Hệ thống lưới trong Bootstrap 3

LongAnIT 9/20/2018 01:18:00 CH Bình luận
Hệ thống lưới trong Bootstrap 3
Hệ thống lưới trong Bootstrap 3

Như các bạn đã biết, độ rộng màn hình 1 trang web dùng Bootstrap là tương đối, tức là độ rộng này tùy thuộc theo kích thước màn hình.

Hệ thống lưới của Bootstrap 3 chia thành 12 cột theo chiều rộng của trang. Chúng ta có thể gom các cột lại với nhau để tạo thành vùng lớn hơn, chẳng hạn 4 cột có độ rộng 1 được gom thành 1 cột có độ rộng 4.

Cơ bản hệ thống lưới trong Bootstrap 3

Khi thiết kế giao diện, người thiết kế phải đảm bảo độ rộng của các cột tạo thành luôn là 12 để giao diện không bị bể (hiển thị sai). Các trường hợp thiết kế:

span 3 – span 9: OK
span 4 – span 8: OK
span 5 – span 7: OK
span 3 – span 4 – span 5: OK
span 4 – span 6 – span 2: OK
span 8 – span 6: không OK, vì tổng số cột là 14, lớn hơn số cột tối đa là 12

Các lớp lưới
Trong Bootstrap, có 4 lớp lưới chính như sau:

  1. xs (dùng cho di động): có chiều rộng màn hình nhỏ hơn 768px
  2. sm (dùng cho tablet): có chiều rộng màn hình từ 768px trở lên
  3. md (dùng cho desktop): có chiều rộng màn hình từ 992px trở lên
  4. lg (dùng cho desktop có kích thước lớn): có chiều rộng màn hình từ 1200px trở lên


Tùy theo thiết kế, bạn có thể chọn các loại lớp lưới phù hợp với màn hình thiết bị hiển thị. Do xu hướng sử dụng điện thoại di động và tablet phổ biến, cho nên bạn nên dùng 2 lớp sm hoặc md.

Cấu trúc cơ bản của lưới Bootstrap
Chúng ta xét đến 1 đoạn mã sau để thấy rõ cấu trúc lưới của Bootstrap.
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
  ...
</div>
Tạo 3 vùng bằng nhau

Cơ bản hệ thống lưới trong Bootstrap 3

Để tạo 1 dòng chứa 3 vùng bằng nhau có giao diện khớp với tablet trở lên, chúng ta sử dụng đoạn mã sau:

<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
  ...
</div>
Trong đoạn mã trên, chúng ta thấy có 3 lớp col-sm-4 tức là 3 lớp này sử dụng cho màn hình Tablet, Desktop và Desktop có kích thước lớn. Mỗi lớp có 4 cột như vậy, với 3 lớp, chúng ta có 12 cột, đúng theo yêu cầu của hệ thống lưới Bootstrap.

Tạo 2 vùng không bằng nhau

Cơ bản hệ thống lưới trong Bootstrap 3

Tiếp đến chúng ta sẽ tạo giao diện với 2 vùng không bằng nhau với vùng trái có kích thước 4 cột, và vùng phải có kích thước 8.

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>
Kết luận: Bài viết này chúng tôi giúp các bạn nắm kiến thức cơ bản về hệ thống lưới của Bootstrap3 cũng như cách phân vùng cho các giao diện Bootstrap3 đơn giản.

Hướng dẫn cơ bản cách nhúng bootstrap 3 vào trong blogger

LongAnIT 9/14/2018 09:33:00 CH Bình luận
Bootstrap 3 Framework

Bootstrap là Front-end framework, là một bộ sưu tập miễn phí các công cụ để tạo ra các trang web và các ứng dụng web. Nó chứa HTML và CSS dựa trên các mẫu thiết kế cho kiểu chữ (typography), các form, các nút (button), tables, modals, v.v... chuyển hướng và các thành phần giao diện khác, cũng như mở rộng JavaScript tùy chọn.

Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter như một framework, một công cụ để phục vụ công việc nội bộ của Twitter. Trước khi phát triển Bootstrap, có nhiều thư viện khác nhau đã được sử dụng để phát triển giao diện, dẫn đến mâu thuẫn, xung đột. Bootstrap ra đời để khắc phục những yếu tố này, cũng như giúp các nhà phát triển, lập trình tại Twitter có thể triển khai công việc nhanh hơn, tiện lợi và đồng bộ hơn.

Bootstrap tương thích với các phiên bản mới nhất của tất cả các trình duyệt nổi tiếng trên thế giới như Chrome, Firefox, IE, Opera.... Kể từ phiên bản 2.0 trở l nó cũng hỗ trợ Responsive Web Design. Thiết kế và bố trí của các trang web tự động điều chỉnh, tự động tương thích các thiết bị được sử dụng (máy tính để bàn, máy tính bảng, điện thoại di động).

1. Tôi xin trích dẫn cấu trúc cơ bản của trang Blogger

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title>
Tiêu đề trang web
</title>
<!-- Bắt đầu viết Css cho web -->
<b:skin>
<![CDATA[ /* Chèn Css vào đây */ ]]>
</b:skin>
</head>
<!-- Bắt đầu phần hiển thị trên web -->
<body>
Thêm nội dung trang web của bạn vào đây
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'>
</b:section>
</body>
<!-- Kết thúc phần hiển thị trên web -->
</html>
Đây là cấu trúc cơ bản của 1 template blogger ( Cấu trúc cơ bản, CSS, HTML...).

2. Để sử dụng bootstrap vào trong blogger chúng ta sẽ thực hiện cách sau:

Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML bạn thêm đoạn code bên dưới vào ngay phía dưới thẻ <head>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
 Làm tương tự bạn thêm 2 link bên dưới vào trước trên thẻ </body>
<script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'></script>
<script async='async' src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' type='text/javascript'></script>
 Thêm thẻ Reponsive cho blogger
<meta name="viewport" content="width=device-width, initial-scale=1">
Kết luận: Trên đây, tôi đã hướng dẫn các bạn cách nhúng bộ thư viện Bootstrap vào website. Sau khi thực hiện việc nhúng xong Boostrap vào website, bạn có thể làm việc với các thành phần của bootstrap.