Phần 3: Hệ thống lưới nâng cao Bootstrap

05/12/2018 Nguyễn Văn Huynh

Trong phần này, các bạn tiếp tục tìm hiểu các lớp lưới khác trong Bootstrap để thực hiện việc phân vùng cho các giao diện phức tạp hơn.

Bảng thông số lưới trong Bootstrap

  Thiết bị siêu nhỏ
Phone (<768px)
Thiết bị nhỏ
Tablet (>=768px)
Thiết bị trung bình
Desktop (>=992px)
Thiết bị lớn
Desktop (>=1200px)
Hành vi lưới Theo chiều ngang mọi lúc Khi bắt đầu thì thu gọn lại, theo chiều ngang trên các điểm ngăn cách Khi bắt đầu thì thu gọn lại, theo chiều ngang trên các điểm ngăn cách Khi bắt đầu thì thu gọn lại, theo chiều ngang trên các điểm ngăn cách
Độ rộng vùng chứa Không (tự động) 750px 970px 1170px
Tiền tố lớp .col-xs- .col-sm- .col-md- .col-lg-
Số cột 12 12 12 12
Độ rộng cột Tự động ~62px ~81px ~97px
Gutter width 30px (15px ở mỗi bên của cột) 30px (15px ở mỗi bên của cột) 30px (15px ở mỗi bên của cột) 30px (15px ở mỗi bên của cột)
Nestable
Offset
Xếp thứ tự cột

Cơ chế xếp chồng cho đến theo chiều ngang (Stacked-to-horizontal)
Trong ví dụ sau, chúng ta sẽ tạo ra 1 hệ thống lưới mà giao diện sẽ hiển thị theo kiểu xếp chồng lên nhau ở màn hình kích thước nhỏ (như mobile/tablet) và giao diện trở thành kiểu ngang ở màn hình có kích thước lớn (như ở máy tính laptop/desktop).

01
02
03
04
05
06
07
08
09
10
11
<div class="container">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-6" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-6" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

Giao diện hiển thị trên thiết bị Tablet và thiết bị điện thoại di động như sau:

Như vậy chúng ta thấy rất rõ, giao diện khi sử dụng Bootstrap sẽ thay đổi từ dạng xếp chồng (stack) ở các thiết bị mobile/phone cho đến dạng giao diện xếp theo chiều ngang (horizontal) ở các thiết bị Desktop/Laptop. Cơ chế giúp giao diện web được hiển thị trên các màn hình giao diện khác nhau với bố cục phù hợp, tránh tình trạng giao diện bị méo, bể. Đây là 1 trong các ưu điểm của Bootstrap.

Hiển thị giao diện trên các kích thước màn hình khác nhau
Trong phần này chúng ta sẽ tìm hiểu cách hiển thị một giao diện web trên các kích thước màn hình khác nhau và có thể điều chỉnh được các kích thước này.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
<div class="container">
  <div class="row">
    <div class="col-sm-3 col-md-4 col-lg-6" style="background-color:yellow;">
      <p>Vùng 1
      <br/>Tablet: 25%
      <br/>Desktop: 33.33%
      <br/>Large Desktop: 50%
      </p>
    </div>
    <div class="col-sm-9 col-md-8 col-lg-6" style="background-color:pink;">
      <p>Vùng 2
      <br/>Tablet: 75%
      <br/>Desktop: 66.66%
      <br/>Large Desktop: 50%
      </p>
    </div>
  </div>
</div>

Ở vùng 1, chúng ta khai báo class=”col-sm-3 col-md-4 col-lg-6″ và vùng 2 chúng ta khai báo class=”col-sm-9 col-md-8 col-lg-6″ điều đó có nghĩa là:

    • Trên giao diện màn hình Tablet thì tỉ lệ giữa vùng 1 và vùng 2 là: 25%/75%, tương ứng col-sm-3 và col-sm-9
 
    • Trên giao diện màn hình Desktop thì tỉ lệ giữa vùng 1 và vùng 2 là: 33.33%/66.66%, tương ứng col-md-4 và col-md-8
    • Trên giao diện màn hình Desktop có kích thước lớn thì tỉ lệ giữa vùng và vùng 2 là: 50%/50%, tương ứng col-lg-6 và col-lg-6

Như vậy, chúng ta có thể khai báo kích thước vùng chi tiết tương ứng với từng kích thước màn hình khác nhau thay vì khai báo chung cho tất cả loại màn hình.

Lớp offset

Để di chuyển các cột sang phải thì chúng ta có thể dùng các lớp dạng như .col--offset-, trong đó * đầu tiên là kiểu màn hình xs, sm, md, lg và * thứ hai là số cột được di dời sang trái.

Chúng ta có ví dụ sau:

01
02
03
04
05
06
07
08
09
10
<div class="container">
  <div class="row">
    <div class="col-md-3" style="background-color:yellow;">
      <p>Vùng 1</p>
    </div>
    <div class="col-md-6 col-md-offset-3" style="background-color:pink;">
      <p>Vùng 2</p>
    </div>
  </div>
</div>

Trong ví dụ trên, vùng 2 sẽ cách 1 khoảng trắng với vùng 1 là 3 như trong hình:

Như dùng các lớp offset, chúng ta có thể giãn khoảng cách vùng về phía bên trái, lưu ý làm sao để tổng các vùng vẫn là 12.

Trong bài này, các bạn đã nắm được các chi tiết thông số thuộc tính của lưới ở các kích thước màn hình, cơ chế Stacked-to-horizontal, cách khai báo hiển thị giao diện ở các kích thước màn hình và sử dụng các lớp offset. Ngoài ra để thiết kế lưới hiệu quả, còn nhiều phương pháp nữa, các bạn sẽ tự tìm hiểu trong quá trình thiết kế.

Tag: bootstrapgrid systemadvance

Đang phát triển ...

Bài viết liên quan

Phần 5. Màu sắc văn bản trong Bootstrap 4

Bootstrap 4 xây dựng sẵn những lớp cho phép chúng ta có thể dùng để định nghĩa “màu sắc” cho văn bản trong trang web.

Phần 4: Văn bản trong Boostrap

Trong bài này, chúng ta sẽ học đến cách thiết lập mặc định cho phong cách văn bản trong Bootstrap.

Phần 2: Hệ thống lưới trong Bootstrap 4

Nội dung của phần này là về hệ thống lưới được sử dụng trong Bootstrap.

Phần 1: Giới thiệu Bootstrap 4

Bootstrap là 1 framework JavaScript, CSS và HTML miễn phí và phổ biến nhất trong việc thiết kế giao diện web đáp ứng trên di động.

CSS định nghĩa sẵn trong bootstrap 3

Chương này chúng ta sẽ đi tìm hiểu những css được định nghĩa sẵn trong BS và cách sử dụng chúng.

Cài đặt và sử dụng Bootstrap 3

Để sử dụng được bootstrap chúng ta cần cầu hình cài đặt đưa các file thư viện của bootstrap vào dự án web của chúng ta

Giới thiệu về bootstrap (BS)

Bootstrap là gì: bootstrap là  Html, css, js được xây dựng sẵn để sử dụng trong các dự án phát triển web, các trang web đáp ứng lại các kích thước màn hình hiển thị.a

Tấn công ransomware cực lớn trên toàn cầu, tải về bản vá lỗi ngay

Tấn công ransomware cực lớn trên toàn cầu, tải về bản vá lỗi ngay

Cuộc tấn công vào NHS đã sử dụng một dạng ransomware có tên Wanacryptor và nhắm mục tiêu vào hàng nghìn tổ chức ở 74 quốc gia. Ransomware là một dạng tấn công mạng có liên quan đến việc các hacker nắm quyền kiểm soát máy tính hoặc thiết bị di động và yêu cầu đòi tiền chuộc. Bằng nhiều cách, những kẻ tấn công tải phần mềm độc hại vào thiết bị và mã hóa thông tin của nạn nhân.

Kỹ thuật tìm kiếm và thay thế từ cơ bản đến nâng cao trong MS Office (Word)

Kỹ thuật tìm kiếm và thay thế từ cơ bản đến nâng cao trong MS Office (Word)

Trong Word nói riêng, Office nói chung, có lẽ ai cũng biết chức năng tìm kiếm và thay thế nội dung văn bản, nhưng ngoài ra, còn nhiểu chức năng khác trong hộp thoại tìm kiếm và thay thế mà không phải ai cũng biết để sử dụng. Trong đó có tìm kiếm và thay thế định dạng, sử dụng các ký hiệu đại diện, các ký tự đặc biệt… 

Bài 6: Thủ thuật outlook 2010

Bài 6: Thủ thuật outlook 2010

Bài viết giới thiệu đến các bạn một số thủ thuật được dùng trong outlook 2010, để giúp công việc của các bạn được dễ dàng hơn.

Bài 5: Quản lý các thông tin trong  outlook 2010

Bài 5: Quản lý các thông tin trong outlook 2010

Bài viết giới thiệu về phương pháp quản lý thông tinn trong outlook 2010. Chúng ta hãy cùng tìm hiểu xem có điểm gì khác và nổi bật so với outlook 2007

Bài 4: Sử dụng lịch làm việc một cách hiệu quả outlook 2010

Bài 4: Sử dụng lịch làm việc một cách hiệu quả outlook 2010

Để công việc của đạt hiệu quả cao hơn, chúng ta hãy cùng nhau tìm hiểu cách sử dụng lịch làm việc một cách hiệu quả hơn trong outlook 2010

Bài 3: Quản lý hộp thư của bạn về dung lượng và lưu trữ outlook 2010

Bài 3: Quản lý hộp thư của bạn về dung lượng và lưu trữ outlook 2010

Bài viết sau đây sẽ giới thiệu về mục quản lý hộp thư của bạn về dung lượng và lưu trữ trong microsoft outlook 2010.

Hàm SLEEP trong PHP

Hàm SLEEP trong PHP

Có những lúc trong công việc lập trình ta cần mã tạm dừng theo một thời gian định trước thì trong php có hỗ trợ hàm sleep để các bạn làm điều này.

Hàm Rand trong PHP

Hàm Rand trong PHP

Đôi lúc chúng ta lập trình cần đến những con số sinh ngẫu nhiên vào những công việc khách nhau hôm này mình xin giới thiệu với mọi người hàm sinh số ngẫu nhiên trong PHP

Bài 9: Giới thiệu lập trình hướng đối tượng trong PHP (OOP)

Bài 9: Giới thiệu lập trình hướng đối tượng trong PHP (OOP)

Các bạn tự học PHP nên biết về lập trình hướng đối tượng trong PHP, kỹ thuật lập trình hỗ trợ công nghệ đối tượng

Bài 8: Hàm có sẵn thông dụng trong PHP

Bài 8: Hàm có sẵn thông dụng trong PHP

Hàm thông dụng trong php cần biết, các bạn mới bắt đầu lên nắm rõ ý nghĩa cấu trúc cách dùng những hàm này để bổ trợ kiến thức sau này

Bài 7: Hàm trong PHP

Bài 7: Hàm trong PHP

Hàm do người sử dụng định nghĩa cho phép bạn xử lý những tác vụ thường lặp đi lặp lại trong ứng dụng. cách khai báo, cú pháp của hàm trong php