Bootstrap - Tổng quan về CSS

Chương này cung cấp tổng quan về các phần chính trong cơ sở hạ tầng của Bootstrap, bao gồm cả cách tiếp cận của Bootstrap để phát triển web tốt hơn, nhanh hơn, mạnh hơn.

Loại tài liệu HTML5

Bootstrap sử dụng các phần tử HTML nhất định và các thuộc tính CSS yêu cầu sử dụng loại tài liệu HTML5. Do đó, hãy bao gồm đoạn mã dưới đây cho loại tài liệu HTML5 ở đầu tất cả các dự án của bạn bằng Bootstrap.

<!DOCTYPE html>
<html>
   ....
</html>

Di động đầu tiên

Kể từ khi Bootstrap 3 ra mắt, Bootstrap đã trở thành thiết bị di động đầu tiên. Nó có nghĩa là các kiểu 'di động đầu tiên' có thể được tìm thấy trong toàn bộ thư viện thay vì chúng trong các tệp riêng biệt. Bạn cần thêmviewport meta tag đến <head> , để đảm bảo kết xuất phù hợp và phóng to chạm trên thiết bị di động.

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

thuộc tính width kiểm soát chiều rộng của thiết bị. Đặt nó thành chiều rộng thiết bị sẽ đảm bảo rằng nó được hiển thị trên các thiết bị khác nhau (điện thoại di động, máy tính để bàn, máy tính bảng ...) đúng cách.
ban đầu-scale = 1.0 đảm bảo rằng khi được tải, trang web của bạn sẽ được hiển thị ở tỷ lệ 1: 1 và không áp dụng tính năng phóng to ra khỏi hộp.

Thêm vào user-scalable = no đến contentđể tắt khả năng phóng to trên thiết bị di động như hình dưới đây. Người dùng chỉ có thể cuộn chứ không thể thu phóng với thay đổi này và dẫn đến trang web của bạn giống một ứng dụng gốc hơn một chút.

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

Thông thường , quy mô tối đa = 1,0 được sử dụng cùng với quy mô người dùng = không . Như được đề cập ở trênuser-scalable = no có thể mang đến cho người dùng trải nghiệm giống như một ứng dụng gốc hơn, do đó Bootstrap không khuyên bạn nên sử dụng thuộc tính này.

Hình ảnh đáp ứng

Bootstrap 3 cho phép bạn làm cho hình ảnh đáp ứng bằng cách thêm một lớp .img-responsive đến <img>nhãn. Lớp này áp dụngmax-width: 100%; và height: auto; vào hình ảnh để nó có tỷ lệ phù hợp với phần tử mẹ.

<img src = "..." class = "img-responsive" alt = "Responsive image">

Kiểu chữ và Liên kết

Bootstrap thiết lập một kiểu hiển thị chung (nền), kiểu chữ và liên kết cơ bản -

Basic Global display- Đặt màu nền: #fff; trên phần tử <body> .
Typography- Sử dụng các thuộc tính @ font-family-base , @ font-size-base và @ line-height-base làm cơ sở đánh máy.
Link styles- Đặt màu liên kết toàn cục thông qua thuộc tính @ link-color và chỉ áp dụng gạch dưới liên kết trên : hover .

Nếu bạn có ý định sử dụng mã LESS, bạn có thể tìm thấy tất cả những điều này trong giàn giáo.less .

Bình thường hóa

Bootstrap sử dụng Normalize để thiết lập tính nhất quán giữa các trình duyệt.

Normalize.css là một giải pháp thay thế hiện đại, sẵn sàng cho HTML5 để đặt lại CSS. Đây là một tệp CSS nhỏ cung cấp tính nhất quán trên nhiều trình duyệt tốt hơn trong kiểu mặc định của các phần tử HTML.

Hộp đựng

Sử dụng lớp học .container để bao bọc nội dung của một trang và dễ dàng căn giữa nội dung như hình dưới đây.

<div class = "container">
   ...
</div>

Hãy nhìn vào .containerlớp trong tệp bootstrap.css -

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

Lưu ý rằng, do đệm và độ rộng cố định, các vùng chứa không thể lồng vào nhau theo mặc định.

Hãy xem tệp bootstrap.css -

@media (min-width: 768px) {
   .container {
      width: 750px;
   }
}

Ở đây, bạn có thể thấy CSS có các truy vấn phương tiện cho các vùng chứa với width. Điều này giúp cho việc áp dụng khả năng đáp ứng và trong các lớp đó, lớp vùng chứa được sửa đổi cho phù hợp để hiển thị hệ thống lưới đúng cách.