HỆ THỐNG LƯỚI BOOTSTRAP
Xin chào các bạn hôm nay mình muốn chia sẻ với các bạn, cách sử dụng hệ thống lưới trong bootstrap.
Hệ thống lưới (Grid systems) là gì?
Hệ thống lưới (Grid systems) là cấu trúc bao gồm hàng loạt các hàng và cột theo quy chuẩn để tạo ra các bố cục trang web, nói một cách đơn giản đó là khung sườn, rường cột được làm sẵn để bạn có thể lắp ghép xây dựng một ngôi nhà theo ý muốn. Có rất nhiều hệ thống lưới được các nhà thiết kế web sử dụng ở phần thiết kế front-end, một trong những hệ thống lưới phổ biến nhất đó là Bootstrap.
Hệ thống lưới bootstrap
Hệ thống lưới bootstrap được thiết kế với 12 cột nằm dọc. Nếu bạn không muốn sử dụng 12 cột riêng rẽ, thì các bạn có thể nhóm các cột lại với nhau để tạo ra một cột với kích thước rông hơn bằn một hai hoặc ba lần kịc thước cột ban đầu.
Một trong những khả năng tuyệt vời của Bootstrap đó là cung cấp cho bạn khả năng để dễ dàng tạo ra các trang web có sẵn thiết kế đáp ứng đa màn hình (responsive web design)
Trên một màn hình lớn, thì nội dung được hiển thị tốt hơn nếu nó được dàn ra ba cột, nhưng trên một màn hình nhỏ, nó sẽ là tốt hơn nếu các mục nội dung, được hiển thị trên một cột.
Tại sao sử dụng Bootstrap?
Ưu điểm của Bootstrap:
+ Dễ dáng sử dụng: Bất kỳ ai có kiến thức cơ bản HTML và CSS có thể bắt đầu sử dụng Bootstrap
+ Responsive features: Khả năng đáp ứng đa màn hình của Bootstrap’s responsive CSS cho tất cả các thiết bị phổ biến hiện nay như điện thoại, máy tính bảng, máy để bàn …
+ Ưu tiên cho thiết bị di động: Ở phiên bản Bootstrap 3, thiết kế theo kiểu mobile-first-ưu tiên các thiết bị di động là một phần cốt lõi của hệ thống khung
+ Tương thích trình duyệt: Bootstrap luôn tương thích với đại đa số các trình duyệt hiện đại (Chrome, Firefox, Internet Explorer, Safari, and Opera)
Khởi tạo trang web đầu tiên với Bootstrap
Bootstrap sử dụng các phần tử HTML và thuộc tính CSS đò hỏi khai báo HTML5 doctype. Bạn phải luôn khai báo đúng HTML5 doctype ở đầu trang, cùng với các thuộc tính ngôn ngữ lang: < !DOCTYPE html>
Bootstrap 3 được thiết kế ưu tiên hiển thị trên các thiết bị di động, đó là một phần cố lọi trong hệ thống khung sườn (core framework). Để đam bảo thiết kế hiển thị đúng trên các thiết bị, bạn phải thêm meta viewport đúng cách: width=device-width cho phép trang web tương thích với chiều ngang với các thiết bị di động initial-scale=1 cho phép tình trạng xem trang ở tỉ lệ 1 (1 pixel CSS tương đương 1 pixel viewport) khi chúng được tãi xuống trên trình duyệt.
.container class dành cho phần khung chứa có chiều ngang cố định (fixed width) .container-fluid dành cho phần khung chứa với chiều ngang tràn hết màn hình (full width)
Chú ý: đối với khung bao sử dụng một trong hai class trên không được để lồng một khung chứa khác tương tự bên trong (nested container)
4. Hai trang mẫu bootstrap
Sau đây là bảng tóm tắt hệ thống lưới làm việc trên nhiều thiết bị ImageHệ thống lưới (Grid systems) là gì?
Hệ thống lưới (Grid systems) là cấu trúc bao gồm hàng loạt các hàng và cột theo quy chuẩn để tạo ra các bố cục trang web, nói một cách đơn giản đó là khung sườn, rường cột được làm sẵn để bạn có thể lắp ghép xây dựng một ngôi nhà theo ý muốn. Có rất nhiều hệ thống lưới được các nhà thiết kế web sử dụng ở phần thiết kế front-end, một trong những hệ thống lưới phổ biến nhất đó là Bootstrap.
Hệ thống lưới bootstrap
Hệ thống lưới bootstrap được thiết kế với 12 cột nằm dọc. Nếu bạn không muốn sử dụng 12 cột riêng rẽ, thì các bạn có thể nhóm các cột lại với nhau để tạo ra một cột với kích thước rông hơn bằn một hai hoặc ba lần kịc thước cột ban đầu.
Một trong những khả năng tuyệt vời của Bootstrap đó là cung cấp cho bạn khả năng để dễ dàng tạo ra các trang web có sẵn thiết kế đáp ứng đa màn hình (responsive web design)
Trên một màn hình lớn, thì nội dung được hiển thị tốt hơn nếu nó được dàn ra ba cột, nhưng trên một màn hình nhỏ, nó sẽ là tốt hơn nếu các mục nội dung, được hiển thị trên một cột.
Tại sao sử dụng Bootstrap?
Ưu điểm của Bootstrap:
+ Dễ dáng sử dụng: Bất kỳ ai có kiến thức cơ bản HTML và CSS có thể bắt đầu sử dụng Bootstrap
+ Responsive features: Khả năng đáp ứng đa màn hình của Bootstrap’s responsive CSS cho tất cả các thiết bị phổ biến hiện nay như điện thoại, máy tính bảng, máy để bàn …
+ Ưu tiên cho thiết bị di động: Ở phiên bản Bootstrap 3, thiết kế theo kiểu mobile-first-ưu tiên các thiết bị di động là một phần cốt lõi của hệ thống khung
+ Tương thích trình duyệt: Bootstrap luôn tương thích với đại đa số các trình duyệt hiện đại (Chrome, Firefox, Internet Explorer, Safari, and Opera)
Khởi tạo trang web đầu tiên với Bootstrap
1. Thiết lập khai báo HTML5 doctype
Bootstrap sử dụng các phần tử HTML và thuộc tính CSS đò hỏi khai báo HTML5 doctype. Bạn phải luôn khai báo đúng HTML5 doctype ở đầu trang, cùng với các thuộc tính ngôn ngữ lang: < !DOCTYPE html>
2. Bootstrap 3 ưu tiên thiết bị di động (mobile-first)
Bootstrap 3 được thiết kế ưu tiên hiển thị trên các thiết bị di động, đó là một phần cố lọi trong hệ thống khung sườn (core framework). Để đam bảo thiết kế hiển thị đúng trên các thiết bị, bạn phải thêm meta viewport đúng cách: width=device-width cho phép trang web tương thích với chiều ngang với các thiết bị di động initial-scale=1 cho phép tình trạng xem trang ở tỉ lệ 1 (1 pixel CSS tương đương 1 pixel viewport) khi chúng được tãi xuống trên trình duyệt.
3. Các khung chứa (Containers) Bootstrap yêu cầu các khung bao quanh các phần tử nội dung. Có hai loại classes bạn có thể chọn:
.container class dành cho phần khung chứa có chiều ngang cố định (fixed width) .container-fluid dành cho phần khung chứa với chiều ngang tràn hết màn hình (full width)
Chú ý: đối với khung bao sử dụng một trong hai class trên không được để lồng một khung chứa khác tương tự bên trong (nested container)
4. Hai trang mẫu bootstrap
# 1. Trang web mẫu có chiều ngang cố định (fixed width)< !DOCTYPE html><html lang="en"><head> <meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script></head><body><div class="container"> <h1>My First Bootstrap Page</h1> <p>This is some text.</p> </div></body></html># 1. Trang web mẫu có chiều ngang tràn màn hình (full width container)< !DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>My First Bootstrap Page</h1> <p>This is some text.</p> </div> </body> </html>
Nguôn: http://thietke.website/
Post a Comment
Post a Comment