Xây dựng bố cục 1 trang web đơn giản có 3 cột nội dung bằng Bootstrap 4.0

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách thiết kế bố cục 1 trang web đơn giản có bố cục 3 cột (cột trái, cột nội dung ở giữa, và cột phải), bao gồm header (phần đầu trang) và footer (phần cuối trang) bằng Bootstrap. Khi thiết kế web bằng Bootstrap thì có nghĩa là bạn đang thiết kế web đáp ứng (Responsive Web Design), do đó trang của bạn có thể hiển thị tốt ở tất cả các loại màn hình thiết bị, từ màn hình tivi, màn hình cỡ lớn, desktop, laptop cho đến mobile.

Trước hết, bạn cần nắm 1 số khái niệm như sau:

Bố cục website (web layout)

Bố cục website (web layout) của một trang web là cách các phần tử và nội dung của trang web được sắp xếp và tổ chức trên màn hình. Bố cục quyết định cách mà các phần như tiêu đề, menu, nội dung chính, chân trang, hình ảnh và nút điều hướng được đặt trong không gian trang web. Bố cục cũng đóng vai trò quan trọng trong việc cung cấp trải nghiệm người dùng dễ đọc và dễ sử dụng. Một số loại bố cục phổ biến trong thiết kế web bao gồm:

Bố cục dọc (Single Column Layout): Trang web có một cột duy nhất và thường được sử dụng cho các trang web tập trung vào việc hiển thị nội dung, chẳng hạn như blog cá nhân hoặc trang web tin tức.
Bố cục hai cột (Two-Column Layout): Trang web chia thành hai cột, thường là cột trái và cột nội dung chính. Điều này thường được sử dụng cho các trang web blog hoặc trang web dự án.
Bố cục ba cột (Three-Column Layout, hay Web 3 Cột): Trang web chia thành ba cột, thường là cột trái, cột nội dung chính và cột phải. Điều này thường được sử dụng cho các trang web thương mại điện tử hoặc trang web tin tức.
Bố cục phân tầng (Grid Layout): Sử dụng một lưới để tổ chức các phần tử trên trang web. Bố cục này cho phép bạn tổ chức nội dung và phần tử theo các hàng và cột, tạo ra một giao diện đa dạng và linh hoạt.
Bố cục linh hoạt (Responsive Layout): Bố cục được thiết kế để thích nghi với kích thước màn hình khác nhau, từ máy tính cá nhân đến điện thoại di động. Điều này đảm bảo rằng trang web trông và hoạt động tốt trên mọi thiết bị.

Liên quan: [HTML/HTML5] Phần 14: Liên kết trong HTML

Bootstrap là một framework (khuôn khổ) phát triển web phổ biến và mã nguồn mở được sử dụng rộng rãi để xây dựng các trang web và ứng dụng web. Bootstrap được phát triển và duy trì bởi Twitter, và nó cung cấp một bộ công cụ và tài liệu hữu ích để giúp nhà phát triển web tạo ra giao diện web thân thiện, hiện đại và đáp ứng một cách nhanh chóng và dễ dàng.

Trang web 3 cột

Sau đây là mã HTML của 1 trang web có phần Header (đầu), thanh Breadcrumb (dạng menu đường dẫn), 3 cột nội dung, và Footer (cuối). Trong ví dụ, chúng ta sử dụng Bootstrap 4.5.2 kèm theo JQuery và Popper.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Giao diện Website Bootstrap</title>
    <!-- Sử dụng Bootstrap CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<!-- Header -->
<header class="bg-primary text-white text-center py-4">
    <h1>Header</h1>
    <p>Logo và menu chính ở đây</p>
</header>

<!-- Breadcrumb -->
<div class="container mt-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Trang chủ</a></li>
            <li class="breadcrumb-item active" aria-current="page">Danh mục</li>
        </ol>
    </nav>
</div>

<!-- Nội dung chính -->
<div class="container">
    <div class="row">
        <!-- Cột trái -->
        <div class="col-md-3">
            <div class="bg-light p-3">
                <h2>Menu Phụ</h2>
                <ul>
                    <li><a href="#">Liên kết 1</a></li>
                    <li><a href="#">Liên kết 2</a></li>
                    <li><a href="#">Liên kết 3</a></li>
                </ul>
            </div>
        </div>
        
        <!-- Cột nội dung ở giữa -->
        <div class="col-md-6">
            <h1>Nội dung chính</h1>
            <p>Nội dung nội dung...</p>
        </div>

        <!-- Cột phải -->
        <div class="col-md-3">
            <div class="bg-light p-3">
                <h2>Tìm kiếm</h2>
                <form>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Tìm kiếm...">
                    </div>
                    <button type="submit" class="btn btn-primary">Tìm</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Footer -->
<footer class="bg-dark text-white text-center py-3">
    <p>Footer - Bản quyền &copy; 2023</p>
</footer>

<!-- Sử dụng Bootstrap JS và jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Như vậy, chúng tôi đã cung cấp cho bạn 1 giao diện website 3 cột đơn giản bằng Bootstrap, bạn có thể tự thêm nhiều phần nội dung khác, và tích lũy thêm kinh nghiệm để có thể thiết kế 1 giao diện websit chuyên nghiệp hơn. Chúc bạn thành công!

Trích dẫn bài viết

APA:
Dammio. (2023). Xây dựng bố cục 1 trang web đơn giản có 3 cột nội dung bằng Bootstrap 4.0. https://www.dammio.com/2023/09/17/xay-dung-bo-cuc-1-trang-web-don-gian-co-3-cot-noi-dung-bang-bootstrap-4-0.
BibTeX:
@misc{dammio, author = {Dammio}, title = {Xây dựng bố cục 1 trang web đơn giản có 3 cột nội dung bằng Bootstrap 4.0}, year = {2023}, url = {https://www.dammio.com/2023/09/17/xay-dung-bo-cuc-1-trang-web-don-gian-co-3-cot-noi-dung-bang-bootstrap-4-0}, urldate = {2024-10-08} }

Kết nối

Bố cục website (web layout)

Trang web 3 cột