DỤNG BOOTSTRAP
Ta có thể thực hiện các bước sau để có được một trang web đơn giản có sử dụng Bootstrap.
Bước 1: Thêm HTML5 doctype. Do các phần tử HTML và các thuộc tính CSS được sử dụng trong Bootstrap đòi hỏi phải có HTML5 doctype, chúng ta cần thêm HTML5 doctype để có thể sử dụng được các đặc tính này của Bootstrap. Lưu ý luôn luôn thêm HTML5 doctype ở đầu trang. Ngoài ra cần kèm theo các thuộc tính về về ngôn ngữ và mã hóa: lang và character set.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="utf-8"> </head>
</html>
Bước 2: Thêm tag <meta> vào trong phần tử <head> để hỗ trợ touch zooming và bố trí màn hình phù hợp với các thiết bị di động.
<meta name="viewport" content="width=device-width, initial- scale=1">
Ở đây, “width=device-width” được dùng để chỉ định chiều rộng của trang phụ thuộc vào chiều rộng của thiết bị; initial-scale=1"
được dùng để chỉ định mức độ zoom ban đầu khi trang được nạp vào trình duyệt.
Bước 3: Cung cấp phần tử container được dùng để chứa nội dung của website. Ta có thể chọn một trong hai loại phần tử chứa: (1) phần tử container có class là .container và (2) phần tử container có class là .container-fluid. Loại thứ nhất có chiều rộng cố định, loại thứ hai có chiều rộng là toàn bộ chiều rộng của cửa sổ.
Bảng 12.1 minh họa một trang web đơn giản có sử dụng Bootstrap. Trong ví dụ này, ta dùng phần tử container có lớp là .container (loại thứ nhất).
Bảng 12.1 - Một trang web đơn giản có sử dụng 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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/ bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/ jquery.min.js"> </script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/ bootstrap.min.js"> </script> </head> <body>
<div class="container">
<h1>Trang Boostrap cơ bản</h1>
<p>some text here.</p>
</div> </body> </html>