Bài 3. Tạo trang web đầu tiên với bootstrap
Lượt xem: 2529
1. Thêm doctype HTML5
Bootstrap sử dụng các yếu tố HTML và CSS các thuộc tính yêu cầu phải sử dụng HTML5 doctype.
Luôn luôn thêm vào DOCTYPE HTML5 vào đầu trang, cùng với các thuộc tính lang và character set một cách chính xác:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 3 là điện thoại di động đầu tiên
Bootstrap 3 được thiết kế để đáp ứng tốt với các thiết bị di động. Phong cách điện thoại di động đầu tiên của lõi framework. Để đảm bảo biểu hiện thích hợp và cảm ứng phóng to, thêm các thẻ <meta> sau bên trong phần tử <head> :
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width:theo dõi màn hình rộng của thiết bị (mà sẽ thay đổi tùy thuộc vào điện thoại).
initial-scale=1 phần thiết lập mức độ zoom ban đầu khi trang được nạp lần đầu tiên vào trình duyệt.
3. Containers
Bootstrap cũng đòi hỏi một yếu tố để bọc nội dung trang web.
Có hai class container để lựa chọn:
1. lớp .container cung cấp một container cố định chiều rộng đáp ứng (responsive)
2. lớp .container-fluid cung cấp một container chứa đầy đủ chiều rộng, bao trùm toàn bộ chiều rộng của khung nhìn.
Chú ý: Bạn không thể đặt một container bên trong một container khác
Ví dụ:
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Trang bootstrap đầu tiên của tôi với lớp container</h1>
<p>Đây là nội dung text</p>
</div>
<div class="container-fluid">
<h1>Trang bootstrap đầu tiên của tôi với lớp container-fluid</h1>
<p>Đây là nội dung text</p>
</div>
</body>
</html>
Xem demo