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, thiết kế website 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ữ, cong ty thiet ke web 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 công ty thiết kế web 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 GithubTạ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 dịch vụ thiết kế web 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)
Các bước để khởi tạo trang web đầu tiên với Bootstrap:
- 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.
- Bootstrap 3 ưu tiên thiết bị di động (mobile-first)
Bootstrap 3 được thiết kế website chuyên nghiệp ư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 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.
- Các khung chứa (Containers) Bootstrap yêu cầu các khung bao quanh các phần tử nội dung
- Hai trang mẫu bootstrap: Trang web mẫu có chiều ngang cố định (fixed width)
Social Plugin