Bố cục cố định với Bootstrap

Trong hướng dẫn này, bạn sẽ học cách tạo bố cục cố định với Bootstrap (Bootstrap Fixed Layout).

Tạo bố cục cố định với Bootstrap

Với Bootstrap, bạn vẫn có thể tạo bố cục trang web dựa trên số lượng pixel cố định, tuy nhiên chiều rộng vùng chứa thay đổi tùy thuộc vào chiều rộng khung nhìn và bố cục cũng thích ứng.

Quá trình tạo bố cục cố định nhưng thích ứng về cơ bản bắt đầu với lớp .container. Sau đó, bạn có thể tạo các hàng với lớp .row để bọc các nhóm cột theo chiều ngang. Các hàng phải được đặt trong một vùng chứa .container để căn chỉnh và padding thích hợp.

Các cột khác có thể được tạo bên trong một hàng bằng cách sử dụng các lớp lưới được định nghĩa trước, chẳng hạn như .col, col-{xs|sm|md|lg|xl|xxl}-* với * đại diện cho số từ 1 đến 12. Vui lòng xem hướng dẫn về Bootstrap Grid để tìm hiểu thêm về các lớp lưới.

Lưu ý: Nội dung thực tế như văn bản, hình ảnh, video, bảng, v.v. phải được đặt trong các cột và chỉ các cột là con trực tiếp của hàng.

Ví dụ sau sẽ tạo bố cục thích ứng có chiều rộng cố định rộng 720px pixel trên các thiết bị vừa như máy tính bảng (khung nhìn ≥ 768px), trong khi rộng 960px trên các thiết bị lớn như máy tính xách tay nhỏ (khung nhìn ≥ 992px), rộng 1140px trên các thiết bị cực lớn như máy tính để bàn (khung nhìn ≥ 1200px) và rộng 1320px trên các thiết bị cực lớn như máy tính để bàn lớn (khung nhìn ≥ 1400px).

Tuy nhiên, trên các thiết bị nhỏ như điện thoại di động (576px ≤ khung nhìn < 768px), bố cục sẽ rộng 540px. Tuy nhiên, trên các thiết bị cực nhỏ (khung nhìn < 576px), bố cục sẽ bao phủ 100% chiều rộng. Ngoài ra, các cột sẽ được xếp chồng lên nhau theo chiều dọc và thanh điều hướng sẽ được thu gọn trong cả hai trường hợp.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Fixed Layout Example</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a href="#" class="navbar-brand">Comdy</a>
        <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">Home</a>
                <a href="#" class="nav-item nav-link">Services</a>
                <a href="#" class="nav-item nav-link">About</a>
                <a href="#" class="nav-item nav-link">Contact</a>
            </div>
            <div class="navbar-nav ms-auto">
                <a href="#" class="nav-item nav-link">Register</a>
                <a href="#" class="nav-item nav-link">Login</a>
            </div>
        </div>
    </div>
</nav>
<div class="container">
    <div class="p-5 my-4 bg-light rounded-3">
        <h1>Learn to Create Websites</h1>
        <p class="lead">In today's world internet is the most popular way of connecting with the people. At <a href="https://comdy.vn" class="text-success" target="_blank">comdy.vn</a> you will learn the essential web development technologies along with real life practice examples, so that you can create your own website to connect with the people around the world.</p>
        <p><a href="https://www.tutorialrepublic.com" target="_blank" class="btn btn-success btn-lg">Get started today</a></p>
    </div>
    <div class="row">
        <div class="col-md-4">
            <h2>HTML</h2>
            <p>HTML is the standard markup language for describing the structure of the web pages. Our HTML tutorials will help you to understand the basics of latest HTML5 language, so that you can create your own web pages or website.</p>
            <p><a href="https://comdy.vn/lap-trinh-html-co-ban/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>CSS</h2>
            <p>CSS is used for describing the presentation of web pages. CSS can save a lot of time and effort. Our CSS tutorials will help you to learn the essentials of latest CSS3, so that you can control the style and layout of your website.</p>
            <p><a href="https://comdy.vn/lap-trinh-css/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>Bootstrap</h2>
            <p>Bootstrap is a powerful front-end framework for faster and easier web development. Our Bootstrap tutorials will help you to learn all the features of latest Bootstrap 4 framework so that you can easily create responsive websites.</p>
            <p><a href="https://comdy.vn/bootstrap/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
        </div>
    </div>
    <hr>
    <footer>
        <div class="row">
            <div class="col-md-6">
                <p>Copyright &copy; 2021 Comdy</p>
            </div>
            <div class="col-md-6 text-md-end">
                <a href="#" class="text-dark">Terms of Use</a> 
                <span class="text-muted mx-2">|</span> 
                <a href="#" class="text-dark">Privacy Policy</a>
            </div>
        </div>
    </footer>
</div>
</body>
</html>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo bố cục cố định với Bootstrap

Chúng tôi đã sử dụng các lớp tiện ích margin, chẳng hạn như .mb-3, .ml-auto, mx-2, v.v. để điều chỉnh khoảng cách giữa các phần tử. Trong khi các lớp .text-dark, .text-muted, .text-md-right là các lớp tiện ích văn bản để điều chỉnh màu sắc và căn chỉnh của văn bản. Bạn sẽ tìm hiểu về chúng trong các chương sau.

BootstrapBootstrap Cơ Bản
Bài Viết Liên Quan:
Bootstrap Toast
Trung Nguyen 14/04/2022
Bootstrap Toast

Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.

Bootstrap ScrollSpy
Trung Nguyen 13/04/2022
Bootstrap ScrollSpy

Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.

Bootstrap Typeahead
Trung Nguyen 13/04/2022
Bootstrap Typeahead

Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.

Bootstrap Carousel
Trung Nguyen 12/04/2022
Bootstrap Carousel

Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.