Trong bài viết trước tôi đã có giới thiệu sơ qua về bootrap về nguồn quốc, quá trình hình thành và phát triển của bootstrap trong phần 2 này tôi sẽ giới thiệu tiếp theo về bootstrap đi sâu vào cấu trúc thư mục các file .css và .js, tính năng khai báo reponsive cũng như một số lớp cơ bản của bootstrap
1. Các gói Bootstrap
Bạn có thể tại Bootstrap về máy ở địa chỉ: http://getbootstrap.com/getting-started/#download. Theo đó, Bootstrap được chia thành 3 gói chính:
a. Bootstrap: gói này chứa CSS, JavaScript và font được biên dịch và rút gọn. Không có tài liệu hướng dẫn hay các tập tin mã nguồn trong gói này. Cấu trúc thư mục của gói này như sau:
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
b. Source code: gói này chứa CSS, JavaScript và font cùng với các tài liệu hướng dẫn.
c. Sass: gói này chứa Rails, Compass hoặc các dự án Sass.
2. Ưu điểm của Bootstrap
Dễ sử dụng: Bất kỳ ai có kiến thức căn bản về HTML và CSS cũng đều có thể bắt đầu dùng Bootstrap
Các tính năng đáp ứng: Bootstrap chứa các CSS cho phép thiết kế giao diện đáp ứng có thể hiện thị trên nhiều kích thước màn hình khác nhau như ở tablet, phone hay desktop.
Tiếp cận ưu tiên thiết bị di động: Ở Bootstrap phiên bản 3, các phong cách sử dụng cho di động là 1 phần chính của framework.
Tương thích với các trình duyệt khác nhau: Bootstrap cho phép tương thích với tất cả trình duyệt hiện nay như Chrome, Firefox, Internet Explorer, Safari hay Opera.
3. Tạo trang web đầu tiên với Bootstrap
Trong phần này, chúng ta sẽ tìm hiểu cách tạo 1 trang đơn giản sử dụng framework Bootstrap. Như các bạn đã biết 1 trang HTML5 có cấu trúc như trang Index.html sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
Tuy nhiên nếu bạn dùng Bootstrap, đầu tiên bạn phải tải gói Bootstrap như phần trên, sau đó nhúng 3 tập tin bootstrap.min.css, jquery.min.js và bootstrap.min.js trong gói Bootstrap vào trang Index.html.
Chú ý tập tin jquery bạn phải download từ
https://jquery.com/download/ với phiên bản mới nhất khi viết bài này là
jquery-3.1.1.min.js và đặt trong thư mục js của Bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ví dụ Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
//Nội dung trang Web
</body>
</html>
Bước tiếp theo bạn sẽ học cách tạo nội dung Bootstrap nằm trong phần tử <body>. Vì Bootstrap là framework được thiết kế nhắm đến đối tượng là màn hình di động (mobile) vì vậy để đảm bảo giao diện web được hiển thị chính xác, chúng ta phải dùng thẻ meta với nội dung:
<meta name="viewport" content="width=device-width, initial-scale=1">
Trong đó:
width=device-width: thiết lập độ rộng của màn hình, độ rộng này sẽ co giãn phụ thuộc vào kích thước màn hình mà trang web được duyệt.
initial-scale=1: chỉnh độ zoom (phóng to, thu nhỏ) khi trang web được tải lên lần đầu. Nếu độ zoom là 1 có nghĩa là trang hiển thị đúng kích thước mặc định của nó (100%).
Bootstrap cũng cần một phần tử để chứa các nội dung trang. Có 2 lớp chứa (container) có thể áp dụng đó là:
Lớp
.container cung cấp 1 vùng chứa với kích thước cố định đáp ứng
Lớp
.container-fluid cung cấp một vùng chứa với kích thước đầy đủ, trải rộng toàn bộ độ rộng của màn hình.
Lưu ý: Các vùng chứa không thể nằm trong 1 vùng chứa khác.
Ví dụ 1: Vùng chứa .container
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ví dụ Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Trang Bootstrap nằm trong vùng chứa .container, thẻ h1</h1>
<p>Văn bản, thẻ p</p>
</div>
</body>
</html>
Ví dụ 2: Vùng chứa .container-fluid
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ví dụ Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Trang Bootstrap nằm trong vùng chứa .container-fluid, thẻ h1</h1>
<p>Văn bản thẻ p</p>
</div>
</body>
</html>
Giao diện hiển thị của hai lớp .container và .container-fluid hiển thị ở trình duyệt Chrome với kích thước màn hình 1380×768 và có độ zoom là 150% như sau:
Chúng ta thấy rằng lớp
.container chứa 1 khoảng trắng 2 bên, còn lớp
.container-fluid thì tràn toàn màn hình. Như vậy, tùy theo kiểu thiết kế trang web, chúng ta có thể chọn 1 trong 2 cách này.
Bài này giúp các bạn đã học được các khái niệm cơ bản về Bootstrap, cách tải Bootstrap và áp dụng xây dựng các ví dụ cơ bản.
Còn nữa...
