Bootstrap 4 - Bootstrap Fixed Layout

Tạo Fixed Layout (Bố Cục Cố Định) Với Bootstrap

Trong Bootstrap 4, chúng ta có thể tạo bố cục trang web dựa trên pixel cố định, tuy nhiên chiều rộng phần tử chứa sẽ khác nhau, tùy thuộc vào chiều rộng viewport và bố cục giao diện Responsive.

Về cơ bản để tạo bố cục cố định cho giao diện Responsive, đầu tiên chúng ta làm việc với lớp .container. Bước tiếp theo 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 .container để căn chỉnh và padding đúng cách.

Để tạo các cột khác bên trong một hàng, chúng ta sử dụng các lớp lưới được xác định trước như .col-*, .col-sm-*, .col-md-*, .col-lg-* và .col-xl-*, trong đó * đại diện cho số lưới (trong khoảng từ 1 đến 12).

 

Lưu ý: các nội dung như văn bản, hình ảnh, video, bảng, ... phải được đặt trong các cột và chỉ có các cột mới có thể là con của các hàng.


Ví dụ: trong ví dụ dưới đây chúng ta sẽ tạo bố cục giao diện Responsive có chiều rộng cố định 720px trên các thiết bị có kích thước màn hình trung bình (có chiều rộng màn hình lớn hơn hoặc bằng 768 px) chẳng hạn như máy tính bảng, hoặc chiều rộng cố định là 960px trên các thiết bị kích thước màn hình lớn (lớn hơn hoặc bằng 992px) như laptop màn hình nhỏ và chiều rộng cố định là 1140px trên các thiết bị kích thước màn hình cực lớn (lớn hơn hoặc bằng 1200px) chẳng hạn như máy tính.

Tuy nhiên nếu viewport của thiết bị nhỏ hơn 768px nhưng lớn hơn hoặc bằng 576px thì bố cục sẽ rộng 540px. Với viewport có kích thước nhỏ hơn 576px, bố cục sẽ bao phủ 100% chiều rộng. Ngoài ra, các cột được xếp chồng lên nhau theo chiều dọc thanh sẽ được thu gọn trong cả hai trường hợp.

<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-3">
    <div class="container">
        <a href="#" class="navbar-brand mr-3">Tutorial Republic</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-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 ml-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="jumbotron">
        <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://www.hiepsiit.com" target="_blank">hiepsiit.com</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.hiepsiit.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://www.hiepsiit.com/html-tutorial/" 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://www.hiepsiit.com/css-tutorial/" 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://www.hiepsiit.com/" 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 © 2019 hiepsiit Republic</p>
            </div>
            <div class="col-md-6 text-md-right">
                <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>

Xem ví dụ

Trong ví dụ trên chúng ta sử dụng các lớp căn chỉnh như .mb-3, .ml-auto, mx-2 etc. để căn chỉnh khoảng trắng giữa các phần tử. Các lớp .text-dark, .text-muted, .text-md-right là các lớp văn bản được sử dụng để điều chỉnh màu sắc và căn chỉnh văn bản.