Login

Học Bootstrap 4

  Trang Chủ / Tin tức / Học Bootstrap 4

Grid System trong Bootstrap 4

Trong bài này, chúng ta cùng nghiên cứu một khái niệm mới có tên là Grid System trong Bootstrap. Hệ thống Grid có lẽ là khái niệm quan trọng, nền tảng nhất để các bạn có thể hiểu được cách thức xây dựng bố cục website trong Bootstrap.

Lưu ý: Học Bootstrap là học cách sử dụng các class một cách hợp lý và hiệu quả vì thế chúng ta sẽ học các class của bootstrap và hiểu cách ứng dụng nó với mục đích là xây dựng website với ít custom css code nhất có thể.

Lớp container và container-fluid

Để có thể xây dựng được hệ thống Grid và để hệ thống Grid hoạt động hiệu quả nhất, chúng ta cần xây dựng nó bên trong 1 trong 2 class là container hoặc container-fluid. Vì vậy, trước khi đi tìm hiểu hệ thống Grid, chúng ta cần phải hiểu cách sử dụng 2 class này và ý nghĩa của 2 class như thế nào.

.container

Mình sẽ giải thích thông qua ví dụ chạy nhé. Đầu tiên, mình sẽ có 1 giao diện sử dụng class .container, như sau:

 

<!DOCTYPE html&gt;
<html lang="en"&gt;
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h1> Grid System Bootstrap 4 </h1>
  <p>Ví dụ về Grid system trong Bootstrpa 4</p>
</div>
 
</body>
</html>

Để các bạn có thể thấy được hiển thị của class container này, mình sẽ trang trí cho nó màu nền, như sau:
<div class="container" style="background: yellow;">

  <h1>Grid System Bootstrap 4</h1>
  <p>Example</p>
</div>

Kết quả khi các bạn sử dụng class .container như sau:

 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container" style="background: yellow;">
  <h1>Grid System Bootstrap 4</h1>
  <p>Example</p> 
</div>

</body>
</html>

Các bạn sẽ nhận ra giao diện này không trải rộng toàn bộ màn hình, mình sẽ cho các bạn xem cách Bootstrap 4 xây dựng CSS cho class này nhé:
 

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

Như vậy rút ra, .container là 1 class có độ rộng trên thiết bị laptop là 1140px, được căn giữa màn hình.

.container-fluid

Tương tự, class .container-fluid có cách sử dụng cũng như CSS giống với class .container

Điểm khác duy nhất đó là về kích thước độ rộng màn hình thì class .container-fluid có độ rộng trải toàn bộ full màn hình, như ví dụ dưới:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Grid Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid" style="background: yellow;">
  <h1>Grid System Bootstrap 4</h1>
  <p>Example Container-Fluid</p> 
</div>

</body>
</html>

Hệ thống Grid System trong Bootstrap 4

Và sau khi hiểu được về 2 class đầu tiên, các bạn sẽ học đến Hệ thống Grid. Mình có lưu ý như sau, hệ thống Grid chỉ có thể hoạt động mạnh mẽ và hiệu quả nhất khi chúng được đặt trong 1 trong 2 class trên, thế nên các bạn cần phải nhớ nhé!

Trong Bootstrap 4, hệ thống Grid của chúng ta bao gồm các dòng, trong các dòng sẽ có tổng cộng 12 cột. Nếu các bạn không muốn dùng 12 cột riêng lẻ, các bạn có thể gom nhiều cột lại thành 1 cột lớn.

Hệ thống Grid đã được reponsive trên các thiết bị, thế nên các cột sẽ được tự động sắp xếp lại tùy theo kích thước màn hình mà website đang chạy. Và các bạn phải chắc chắn tổng số cột trên 1 dòng phải là 12 cột hoặc ít hơn 12 cột.

.row

Class đầu tiên trong hệ thống Grid là .row, 1 row các bạn khởi tạo nghĩa là 1 dòng.

Trong row này sẽ có tối đa 12 cột.

Cú pháp sử dụng class .row như sau:

Rất đơn giản đúng không nào, chúng ta đi tiếp vào các cột nhé.

.col

Trong 1 row có tối đa 12 cột, công thức để sử dụng class .col chia cột như sau:

Trong đó:

  • x là tên thiết bị chia:
    • col- (thiết bị cực nhỏ – độ rộng màn hình ít hơn 576px)
    • .col-sm- (thiết bị nhỏ – kích thước màn hình >= 576px)
    • .col-md- (thiết bị trung bình – kích thước màn hình >= 768px)
    • .col-lg- (thiết bị lớn – kích thước màn hình >= 992px)
    • .col-xl- (thiết bị siêu lớn – kích thước màn hình >= 1200px)
  • y là số cột chia cho thành phần đó chiếm bao nhiều trong tổng số 12 cột: các bạn điền từ 1 đến 12 là được.

Nếu để ý bạn có thể lấy lớp .col-xs- ở BS3 đã bị bỏ thay bằng lớp .col-. Các lớp ở trên có thể kết hợp để tạo bố cục giao diện linh hoạt và năng động hơn.

Cấu trúc cơ bản của một mạng Grid Bootstrap 4

<div class="container">
<!-- Điều khiển chiều rộng cột và cách hiển thị trên các thiết bị khác nhau --- dammio.com -->
<div class="row">
  <div class="col-*-*">Cột 1</div>
  <div class="col-*-*">Cột 2</div>
</div>
<div class="row">
  <div class="col-*-*">Cột 1</div>
  <div class="col-*-*">Cột 2</div>
  <div class="col-*-*">Cột 3</div>
</div>
</div>


Lưu ý: Nếu bạn không muốn định nghĩa các vùng div con theo kích thước màn hình, bạn có thể dùng lớp .col để cho Boostrap tự định nghĩa kích thước này, như sau:

<!-- Bootstrap tự động định nghĩa kích thước bố cục theo chiều rộng màn hình -->
<div class="row">
  <div class="col">Col 1</div>
  <div class="col">Col 2</div>
  <div class="col">Col 3</div>
</div>

Ở ví dụ này, thay vì định nghĩa chiều rộng mỗi cột, Bootstrap sẽ tự động xử lý. Với 3 cột, có nghĩa là độ rộng sẽ là 100%/3 = khoảng 33%.

Kết luận

Như vậy, bạn đã nắm được hệ thống Grid trong Bootstrap 4 và cách định nghĩa hệ thống Grid với các ví dụ cơ bản. Mời bạn tiếp tục theo dõi bài tiếp theo.

bootstrap bootstrap 4 grid system bootstrap grid system bootstrap 4

Danh Mục Lập Trình

Baobinh.net
TIN LIÊN QUAN
DANH MỤC GIAO DIỆN

Bài viết ngẫu nhiên

Danh mục lập trình