Bài 1: Containers và Gird system trong Bootstrap 5.3

Bài 1: Containers và Gird system trong Bootstrap 5.3

Bài đầu tiên chúng ta sẽ bắt đầu tìm hiểu về Containers và Gird System trong Bootstrap 5.3.

Ở phần giới thiệu về Bootstrap là gì các bạn đã được giới thiệu qua về Framework này rồi. Hôm nay sonnguyenaz.com sẽ cùng các bạn đi vào từng thành phần chính nhé.

Containers trong Bootstrap

Containers được xem là thành phần không thể thiếu khi làm việc với Bootstrap. Nó được xem như là một hộp đựng chứa tất cả các thành phần trong đó.

Một trang web có thể chứa 1 hoặc nhiều Containers, với vùng chứa mặc định là:

<div class="container">
  <!-- Content here -->
</div>

Các Containers được quy định như sau:

  • container-sm
  • container-md
  • container-lg
  • container-xl
  • container-xxl
  • container-fluid

Mỗi loại có một kích thước mặc định khác nhau, nhưng nếu muốn tùy biến thì bạn cũng có thể sửa đổi lại như sau:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Gird system trong Bootstrap

Giới thiệu Gird system trong Bootstrap

Gird system trong Bootstrap được nằm trong 1 Containers bao gồm các lựa chọn sau:

  • Extra small (xs): <576px.
  • Small (sm): ≥576px.
  • Medium (md): ≥768px.
  • Large (lg): ≥992px.
  • Extra large (xl): ≥1200px.
  • Extra extra large (xxl): ≥1400px.

Các lựa chọn trên thường được dùng để quy định để dành riêng cho từng loại Smartphone, Tablet, Desktop.

Mỗi một Gird system được quy định với 12 cột được đánh số phía sau cùng, ví dụ như class=”col-6″, Nếu bạn không quy định thì lưới này có thể tự động chia đều.

Một số ví dụ cụ thể

Ví dụ 1: Tạo một gird mặc định

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">

    <!-- Example Code -->
    
    <div class="container text-center">
      <div class="row">
        <div class="col"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
          Cột thứ nhất
        </font></font></div>
        <div class="col"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
          Cột thứ 2
        </font></font></div>
        <div class="col"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
          Cột thứ 3
        </font></font></div>
      </div>
    </div>
    
    <!-- End Example Code -->
  </body>
</html>

Kết quả là:

vi-du-ve-gird-system-trong-bootstrap

Như ví dụ trên mặc định chúng ta không quy định cột thì chiều rộng được tự động chia làm 3 phần bằng nhau.

Nếu muốn chia ba cột trên thành 3 phần cột 1 quy định 3: col-3, cột 2 quy định 6: col-6 và cột 3 quy định 3: col-3:

 <div class="container text-center">
      <div class="row">
        <div class="col-3"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
          Cột thứ nhất
        </font></font></div>
        <div class="col-6"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
          Cột thứ 2
        </font></font></div>
        <div class="col-3"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
          Cột thứ 3
        </font></font></div>
      </div>
    </div>

Kết quả sau khi chia lại là:

chia-lai-thanh-phan-cot

Bạn thấy sự khác biệt rồi đó, cột thứ 2 thì được mở rộng ra và 2 cột còn lại thu hẹp lại theo tỷ lệ quy định

Hoặc chúng ta cũng có thể thêm nhiều Gird trong cùng 1 Containers:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">

    <!-- Example Code -->
    
    <div class="container text-center">
		<!-- Gird 1 -->
      <div class="row">
        <div class="col-3"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
          Cột thứ nhất
        </font></font></div>
        <div class="col-6"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
          Cột thứ 2
        </font></font></div>
        <div class="col-3"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
          Cột thứ 3
        </font></font></div>
      </div>
		<!-- Gird 2 -->
	 <div class="row">
        <div class="col-6"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
          Cột thứ nhất
        </font></font></div>
        <div class="col-6"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
          Cột thứ 2
        </font></font></div>
      </div>	
    </div>
    
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

them-nhieu-gird-trong-mot-containers

Ví dụ 2: tạo Gird với quy định kích thước khác nhau

Ví dụ chúng ta thử so sánh col và col-sm:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
    <!-- Example Code -->
    <div class="container text-center">
		<!-- Gird 1 -->
      <div class="row">
        <div class="col-sm-3"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
          Cột thứ nhất
        </font></font></div>
        <div class="col-sm-6"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
          Cột thứ 2
        </font></font></div>
        <div class="col-sm-3"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
          Cột thứ 3
        </font></font></div>
      </div>
    <!-- Gird 1 -->
      <div class="row">
        <div class="col-3"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
          Cột thứ nhất
        </font></font></div>
        <div class="col-6"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
          Cột thứ 2
        </font></font></div>
        <div class="col-3"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
          Cột thứ 3
        </font></font></div>
      </div>
    <!-- End Example Code -->
  </body>
</html>

Sự khác nhau khi ta cho về chế độ hiển thị Smartphone:

su-khac-nhau-cua-ca-thuoc-tinh-gird

Đây là đặc thù của các website có responsive trong lập trình giao diện mobile.

Các bạn thử đổi sang các lựa chọn khác xem có khác biệt gì không nhé. Ở đây mình chỉ lấy ví dụ để giúp các bạn hiểu về Gird trong Bootstrap.

Lời kết

Như vậy, qua các ví dụ trên mình đã giới thiệu cho các bạn về Gird System trong Bootstrap 5.3 rồi, với bài học này bạn có thể tự thiết kế được 1 khung bố cục website rồi đấy.

Chúc các bạn thành công, cảm ơn vì đã ghé qua.

Rate this post

sonnguyen

Là một nhân viên IT thích chia sẻ những gì mình biết đến tất cả mọi người. Hi vọng được mọi người ủng hộ, nếu có gì sai sót mong các bạn comment xuống dưới để mình khắc phục. Cảm ơn mọi người!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *