[Bootstrap 4] Phần 3: Hệ thống lưới Bootstrap 4

191 lượt xem 
 Cập nhật lần cuối: 13/07/2018 lúc 17:00:20
Thể loại: Bootstrap 

Trong bài này, bạn sẽ học hệ thống lưới ở Bootstrap 4, có đôi chút khác biệt so với Bootstrap 3.

Hệ thống lưới Bootstrap 4

Tương tự như Bootstrap 2, Bootstrap 4 cũng có hệ thống lưới 12 cột. Nếu bạn không muốn dùng 12 cột riêng lẻ, bạn có thể gom nhiều cột lại thành một cột rộng hơn.

Hệ thống lưới có tính đáp ứng, các cột sẽ tự động sắp xếp lại tùy theo kích thước màn hình. Bạn hãy chắn chắn tổng các cột phải là 12 hoặc ít hơn.

Các lớp lưới

Điểm mới ở Bootstrap 4 là hệ thống lưới có 5 lớp.

  • .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)

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 lưới Bootstrap 4

Để định nghĩa một lưới BS4, bạn định nghĩa thẻ div với lớp .row ở ngoài, bên trong là các thẻ div với các lớp col-*-* định nghĩa cách hiển thị ở các kích thước màn hình.

<!-- Đ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-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

Trong ví dụ trên, các lớp .col-*-* có dấu sao đầu tiên (*) là kích thước màn hình: sm, md, lg hay xl, và dấu sao thứ hai thể hiện một số từ 1 đến 12. Chẳng hạn, .col-md-6 có nghĩa là ở màn hình thiết bị trung bình (kích thước màn hình >= 768px) thì vùng này chứa độ rộng là 6 cột con gộp lại, có độ rộng tối thiểu (768/12)*6 px = 384px.

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.

<!-- 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"></div>
  <div class="col"></div>
  <div class="col"></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%.

Dự đoán các phiên bản sau của Bootstrap

Các bạn có thể thấy, Bootstrap 4 cũng chia thành 12 cột, nhưng tại sao phải là 12 cột mà không phải là 16 hay 24 cột hay con số nào khác. Đôi khi chúng ta cần cách chia nhiều cột hơn để có thể có nhiều bố cục giao diện đa dạng hơn. Vì vậy, có khả năng Bootstrap 5 sẽ có nhiều cột hơn.

Tương tự, với sự phát triển năng động của ngành chế tạo màn hình, ngày càng có nhiều thiết bị với độ phân giải rất cao (4K) vì vậy, khả năng cao là Bootstrap 5 phải có nhiều lớp hơn ngoài sm, md, lg, xl để đáp ứng nhu cầu. Hãy tưởng tượng, nếu bạn chạy một giao diện web trên màn hình 4K thì bạn sẽ thấy giao diện sẽ bị kéo căng ra và khoảng trống rất nhiều.

Các ví dụ

Tiếp theo, chúng ta sẽ xem các ví dụ sau để hiểu rõ hơn về Bootstrap.

Ba cột bằng nhau

Ví dụ này chứa 3 cột bằng nhau và kích thước do Bootstrap quyết định. Như vậy mỗi vùng sẽ có kích thước khoảng 33.33%.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</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.0/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.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Xin chào Dammio.</h1>
  <p>Ba cột với chiều rộng bằng nhau.</p>
  <div class="row">
    <div class="col" style="background-color:lavender;">.col</div>
    <div class="col" style="background-color:orange;">.col</div>
    <div class="col" style="background-color:lavender;">.col</div>
  </div>
</div>

</body>
</html>

Cột đáp ứng

Ví dụ chứa 4 cột bằng nhau ở màn hình tablet và kéo căng ra đến các màn hình lớn. Nếu là thiết bị di động có kích thước bé hơn 576px thì các cột sẽ chồng lên nhau.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</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.0/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.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Xin chào Dammio!</h1>
  <p>Thu phóng kích thước trình duyệt để xem sự thay đổi bố cục.</p>
  <p>Bốn cột sẽ chồng lên nhau ở kích thước màn hình bé hơn 576px.</p>
  <div class="row">
    <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
  </div>
</div>

</body>
</html>

Dạng 2 cột đáp ứng không cân xứng

Đây là bố cục rất thường gặp ở giao diện Web dùng Bootstrap trên thực tế, tức gồm 2 cột: cột nhỏ chứa menu, cột to chứa nội dung. Trong ví dụ, hai cột sẽ có tỉ lệ 4-8 ở màn hình tablet và giữ nguyên cho đến màn hình có kích thước siêu rộng ở desktop.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</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.0/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.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Xin chào! --- dammio.com</h1>
  <p>Thu phóng kích thước trình duyệt để xem thay đổi bố cục.</p>
  <p>Hai cột sẽ chồng lên nhau nếu kích thước màn hình bé hơn 576px.</p>
  <div class="row">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>
  </div>
</div>
    
</body>
</html>

Kết luận

Như vậy, bạn đã nắm được hệ thống lưới trong Bootstrap 4 và cách định nghĩa hệ thống lưới 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.

Bình luận Facebook

1
Để lại bình luận

avatar
1000
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
[Bootstrap 4] Phần 4: Văn bản trong Bootstrap 4 | | DAMMIO Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
trackback

[…] << Bài trước Trang mục lục Bài tiếp theo >> […]