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ụ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.
Giới thiệu Bootstrap
Bootstrap là một dạng khung thiết kế sẵn (framework) được cung cấp miễn phí giúp các nhà thiết kế web nhanh và dễ dàng hơn.
Bootstrap bao gồm các mẫu thiết kế HTML và CSS được thiết lập sẵn cho kiểu chữ, biểu mẫu, các nút, bảng, thanh chuyển hướng, các tiện ích như bảng nổi trên trang (modals), trình diễn hình ảnh và nhiều plugin JavaScript tùy chọn khác. 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), hỗ trợ chế độ xem ưu tiên cho thiết bị di động (mobile-first).
Responsive web design là công việc thiết kế ra các trang web có khả năng tự động điều chỉnh giao diện tùy thuộc theo kích thước màn hình của thiết bị di dộng để hiển thị chế độ xem tốt nhất.
Lịch sử ra đời của Bootstrap
Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter, và cung cấp miễn phí theo dạng sản phẩm mã nguồn mở từ tháng 8 năm 2011 trên GitHub. Tháng 6 năm 2014. Bootstrap là dự án số 1 trên Github
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)
Làm thế nào để sử dụng Bootstrap?
Có hai cách để sử dụng Bootstrap cho trang web của bạn.
- Tải về Bootstrap từ getbootstrap.com
- Kết nối Bootstrap từ một CDN
Tải Bootstrap
Nếu bạn muốn tải Bootstrap về máy, hãy vào getbootstrap.com, và làm theo các hướng dẫn ở đó.
Kết nối Bootstrap từ một CDN
Nếu bạn không muốn tải về, bạn có thể sử dụng phương pháp kết nối trực tiếp đến nguồn theo phương pháp CDN (Content Delivery Network).
MaxCDN hỗ trợ CDN Bootstrap’s CSS và JavaScript cũng như jQuery:
<!-- Latest compiled and minified CSS -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
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>
<html lang="en">
<head>
<meta charset="utf-8"/>
</head>
</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ốt lõi trong hệ thống khung sườn (core framework). Để đảm 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:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
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 từ 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 class 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
Trang web mẫu có chiều ngang cố định (fixed width)
< !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="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>
Trang web mẫu có chiều ngang tràn màn hình (full width container)
< !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="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>