Trước khi bắt đầu đọc bài viết này thì các bạn hãy chắc rằng đã chuẩn bị sẵn bộ công cụ mà mình đã đề cập ở bài giới thiệu tổng quan bootstrap 3 nhé. Cũng như yêu cầu tối thiểu cần có là kiến thức về html & css căn bản. Không dài dòng, bây giờ chúng ta sẽ tiến hành dowload bootstrap cũng như tìm hiểu cấu trúc bên trong của nó.
Tóm Tắt
1. Dowload Bootstrap 3.
Đầu tiên các bạn cần phải vào đây để lựa chọn phiên bản cần dowload, có ba phiên bản để tải về như sau:
Có tổng cộng 3 phiên bản, vậy từng phiên bản có cấu trúc ra sao và đặc tính như thế nào?
Precompiled Bootstrap: Đây là phiên bản, được biên dịch sẵn chúng ta chỉ việc dowload về giải nén ra và sử dụng thôi. Mời các bạn xem cấu trúc file:
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
2. Nhúng thư viện Bootstrap vào website
Cũng giống như nhúng file css vào website bằng cách thường thì Bootstrap còn cung cấp cho chúng ta một bộ liên kết , mà chỉ cần nhúng vào website thì ngay lập tức có thể gọi đến các thuộc tính css & js để sử dụng ngay, rất tiện lợi. Nhưng bên cạnh đó nếu như một ngày nào đó mà cáp quang việt nam không may bị quái thú cắn đứt thì các bạn sẽ phải kêu trời vì load không nổi bộ liên kết này. Giải pháp tối ưu nhất là dowload về giải nén ra và nhúng trực tiếp vào website của mình.
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Tiếp theo chúng ta sẽ tạo ra một mẫu file bootstrap cơ bản để có thế sử dụng nó như sau:
<!DOCTYPE html> <html> <head> <title>Bootstrap 3 example</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1>Learning Bootstrap 3</h1> </body> </html>
Chắc hẳn các bạn sẽ thắc mắc
<meta name="viewport" content="width=device-width, initial-scale=1.0">
là cái gì đúng không nào? Xin thưa là để enable Responsive design thì chúng ta cần phải chèn nó vào file HTML, tag meta viewport . Nó thiết lập màn hình theo tỷ lệ 1×1, điều này sẽ loại bỏ các chức năng mặc định từ các trình duyệt smartphone, chỉ hiển thị vừa màn hình để xem và có thể phóng to bằng thao tác tay, thêm vào trong thẻ
<head>
. Việc cần làm tiếp theo là nhúng Bootstrap file vào file HTML này.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap 3 example</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head> <body> <h1>Learning Bootstrap</h1> <script src="http://code.jquery.com/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
Phần định nghĩa CSS chúng ta sẽ để trong cặp thẻ, còn phần định nghĩa JS chúng ta chèn phía sau cặp thẻ. làm xong việc này thì ngay từ bây giờ chúng ta có thể gọi ngay các thuộc tính css trong Bootstrap , tiến hành xây dựng giao diện website một cách nhanh chóng.
Nếu các bạn save file trên lại và tiến hành chạy thì chắc hẳn sẽ thất vọng vì kết quả không khác gì file html thông thường, xin đừng vội thất vọng vì bài viết này chỉ dừng lại ở việc hướng dẫn các bạn lựa chọn phiên bản phù hợp, cũng như cách nhúng bootstrap 3 vào website. Ở bài biết tiếp theo sẽ bắt đầu xoáy sâu vào vấn đề việc sử dụng các thuộc tính css của bootstrap để xây dựng giao diện website.
3. Lời kết
Bài tiếp theo chúng ta sẽ cùng nhau tìm hiểu về Grid System (Hệ thống lưới). Dự đoán là sẽ khá khó nên tôi mong các bạn hãy thật sự kiên nhẫn đọc hết bài và gõ lại code cho nó nhuần nhuyễn. Riêng tôi cũng sẽ cố gắng trình bày nội dung một cách dễ hiểu nhất.
