Bootstrap 4 - Bố cục

Bootstrap 4 sử dụng các lớp vùng chứa để bao bọc nội dung của trang. Nó chứa hai lớp vùng chứa -

.container - Nó đại diện cho một thùng chứa có chiều rộng cố định.
.container-fluid - Nó đại diện cho một thùng chứa có chiều rộng đầy đủ.

Thùng đựng hàng

Lớp .container được sử dụng để bọc nội dung trang với chiều rộng cố định và nội dung có thể được đặt ở trung tâm dễ dàng bằng cách sử dụng lớp .container như hình dưới đây.

<div class = "container">
   ...
</div>

Thí dụ

Ví dụ dưới đây chỉ định một trang web đơn giản với vùng chứa chiều rộng cố định -

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      <title>Bootstrap 4 Example</title>
      <style>
         .container {
            background: #a52c644a;
            text-align: center;
            padding-top: 100px;
            padding-bottom: 100px;
         }   
      </style>
   </head>
   
   <body>
      <div class = "container">
         <h2>Fixed Width Container</h2>
         This is a simple web page with fixed width container by using 
         <code>.container</code> class.
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Đầu ra

Bình chứa chất lỏng

Bạn có thể tạo một vùng chứa có chiều rộng đầy đủ bằng cách sử dụng lớp .container-liquid như được hiển thị bên dưới.

<div class = "container-fluid">
   ...
</div>

Ví dụ dưới đây chỉ định một trang web đơn giản với vùng chứa có chiều rộng đầy đủ -

Thí dụ

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      <title>Bootstrap 4 Example</title>
       <style>
         .container-fluid {
            background: #a52c644a;
            text-align: center;
            padding-top: 100px;
            padding-bottom: 100px;
         }   
      </style>
   </head>
   
   <body>
      <div class = "container-fluid">
         <h2>Full Width Container</h2>
         This is a simple web page with full width container by using 
         <code>.container-fluid</code> class.
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity =" sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Đầu ra