HTML5 doctype
Bootstrap sử dụng các phần tử HTML và các thuộc tính CSS, những thứ yêu cầu phải sử dụng HTML5 doctype. Vì thế, hãy thêm nó vào dòng đầu tiên trong các dự án của bạn.
<!DOCTYPE html>
<html lang="en">
...
</html>
Ưu tiên các thiết bị di động
Với Bootstrap 2, chúng tôi đã thêm các style thân thiện với các thiết bị di động như một phần chính của framework. Tuy nhiên trong Bootstrap 3, chúng tôi đã viết lại dự án để có thể tương thích với các thiết bị di động ngay từ khi bắt đầu. Thay vì phải thêm các style tùy chọn cho các thiết bị, chúng tôi đã gắn trực tiếp vào core. Các style dành cho thiết bị di động nằm xuyên suốt trong cả thư viện thay vì nằm trong các tập tin riêng lẻ.
Để đảm bảo việc render và "chạm phóng to", hãy thêm thẻ meta viewport vào <head> của bạn.
<meta name="viewport" content="width=device-width, initial-scale=1">
Bạn có thể vô hiệu hóa tính năng phóng to trên các thiết bị di động bằng cách thêm user-scalable=no vào thẻ meta viewport. Thuộc tính này sẽ vô hiệu hóa tính năng phóng to, điều đó có nghĩa là người dùng chỉ có thể cuộn trang, tạo cảm giác như người dùng đang sử dụng một ứng dụng điện thoại thuần túy. Nhìn chung, chúng tôi không đề xuất sử dụng thuộc tính này trên tất cả các site, vì vậy hãy cân nhắc trước khi sử dụng.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Typography và các liên kết
Bootstrap thiết lập các style chung cho việc hiển thị, typography và các liên kết. Cụ thể, chúng tôi:
- Thiết lập
background-color: #fff; trên thẻ body - Sử dụng các thuộc tính
@font-family-base, @font-size-base, and @line-height-base làm cơ sở của typography - Thiết lập màu sắc chung của liên kết bằng thuộc tính
@link-color và áp dụng hiệu ứng gạch dưới khi :hover
Những style này nằm trong tập tin scaffolding.less.
Normalize.css
Để cải thiện việc render đối với các trình duyệt, chúng tôi sử dụng Normalize.css, một dự án được thực hiện bởi Nicolas Gallagher và Jonathan Neal.
Containers
Dễ dàng căn giữa nội dung của một trang bằng cách bọc nội dung của nó bên trong một .container. Container thiết lập thuộc tính width trên tất cả các kích thước được áp dụng vào media query để tương thích với hệ thống lưới của chúng tôi. Lưu ý rằng, do padding và chiều rộng cố định nên container mặc định không thể bị lồng.
Sử dụng class .container cho một container responsive có chiều rộng cố định.
<div class="container">
...
</div>
Sử dụng class .container-fluid cho container có chiều rộng tối đa, bằng chiều rộng khung nhìn của bạn.
<div class="container-fluid">
...
</div>