Cấp bậc tác giả:

HTML

Phần 1 CSS3 - Tổng quan của CSS

Được viết bởi webmaster ngày 01/11/2019 lúc 10:21 AM
Nắm được những phần chính trong kết cấu của Bootstrap, bao gồm cả cách tiếp cận của chúng tôi tới việc phát triển web tốt hơn, nhanh hơn và mạnh hơn.
  • 0
  • 53

Phần 1 CSS3 - Tổng quan của CSS

Loading...

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">

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>

Nguồn bài viết: Sưu tầm

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

Loading...

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML