Source

Khởi động lại

Khởi động lại, một tập hợp các thay đổi CSS dành riêng cho phần tử trong một tệp duy nhất, khởi động Bootstrap để cung cấp một đường cơ sở thanh lịch, nhất quán và đơn giản để xây dựng.

Cách tiếp cận

Khởi động lại được xây dựng dựa trên Chuẩn hóa, cung cấp nhiều phần tử HTML với các phong cách hơi cố định chỉ sử dụng các bộ chọn phần tử. Tạo kiểu bổ sung chỉ được thực hiện với các lớp. Ví dụ: chúng tôi khởi động lại một số <table>kiểu để có đường cơ sở đơn giản hơn và cung cấp sau đó .table, .table-borderedv.v.

Dưới đây là nguyên tắc và lý do của chúng tôi để chọn nội dung cần ghi đè trong Khởi động lại:

Cập nhật một số giá trị mặc định của trình duyệt để sử dụng rems thay vì ems cho khoảng cách thành phần có thể mở rộng.
Tránh ra margin-top. Biên lợi nhuận theo chiều dọc có thể bị thu hẹp, mang lại kết quả không như mong đợi. Tuy nhiên, quan trọng hơn, một hướng duy nhất marginlà một mô hình tinh thần đơn giản hơn.
Để mở rộng quy mô dễ dàng hơn trên các kích thước thiết bị, các phần tử khối nên sử dụng rems cho margins.
Giữ khai báo các fontthuộc tính liên quan đến mức tối thiểu, sử dụng inheritbất cứ khi nào có thể.

Trang mặc định

Các phần tử <html>và <body>được cập nhật để cung cấp các giá trị mặc định trên toàn trang tốt hơn. Cụ thể hơn:

Toàn box-sizingcầu được thiết lập trên mọi phần tử — bao gồm *::beforevà *::after, đến border-box. Điều này đảm bảo rằng chiều rộng đã khai báo của phần tử không bao giờ bị vượt quá do đệm hoặc đường viền.
- Không có cơ sở nào font-sizeđược khai báo trên <html>, nhưng 16pxđược giả định (mặc định của trình duyệt). font-size: 1remđược áp dụng trên <body>để dễ dàng mở rộng kiểu đáp ứng thông qua các truy vấn phương tiện trong khi vẫn tôn trọng sở thích của người dùng và đảm bảo một cách tiếp cận dễ tiếp cận hơn.
Nó <body>cũng thiết lập một toàn cầu font-family, line-heightvà text-align. Điều này được kế thừa sau này bởi một số thành phần biểu mẫu để ngăn chặn sự mâu thuẫn về phông chữ.
Để an toàn, <body>có một khai báo background-color, mặc định là #fff.

Ngăn xếp phông chữ gốc

Các phông chữ web mặc định (Helvetica Neue, Helvetica và Arial) đã bị loại bỏ trong Bootstrap 4 và được thay thế bằng “ngăn xếp phông chữ gốc” để hiển thị văn bản tối ưu trên mọi thiết bị và hệ điều hành. Đọc thêm về ngăn xếp phông chữ gốc trong bài viết Tạp chí Smashing này .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Điều này font-familyđược áp dụng cho <body>và được kế thừa tự động trên toàn cầu trong Bootstrap. Để chuyển đổi toàn cầu font-family, hãy cập nhật $font-family-basevà biên dịch lại Bootstrap.

Tiêu đề và đoạn văn

Tất cả các phần tử tiêu đề — ví dụ <h1>—và <p>được đặt lại để margin-topxoá chúng. Các tiêu đề đã margin-bottom: .5remđược thêm vào và các đoạn văn margin-bottom: 1remđể có khoảng cách dễ dàng.

Phần mở đầu	Thí dụ
`<h1></h1>`	h1. Tiêu đề Bootstrap
`<h2></h2>`	h2. Tiêu đề Bootstrap
`<h3></h3>`	h3. Tiêu đề Bootstrap
`<h4></h4>`	h4. Tiêu đề Bootstrap
`<h5></h5>`	h5. Tiêu đề Bootstrap
`<h6></h6>`	h6. Tiêu đề Bootstrap

Danh sách

Tất cả danh sách— <ul>, <ol>và <dl>—đã margin-topbị xóa và a margin-bottom: 1rem. Danh sách lồng nhau không có margin-bottom.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer moltie lorem tại massa
Facilisis trong pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat tại
Faucibus porta lacus fringilla vel
Aenean ngồi amet erat nunc
Bỏ qua lorem porttitor

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer moltie lorem tại massa
Facilisis trong pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean ngồi amet erat nunc
Bỏ qua lorem porttitor

Để tạo kiểu đơn giản hơn, phân cấp rõ ràng và khoảng cách tốt hơn, danh sách mô tả đã cập nhật margins. <dd>s đặt lại margin-leftvà 0thêm margin-bottom: .5rem. <dt>s được in đậm .

Danh sách mô tả: Một danh sách mô tả là hoàn hảo để xác định các thuật ngữ.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida tại eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

Văn bản được định dạng sẵn

Phần <pre>tử được đặt lại để loại bỏ nó margin-topvà sử dụng remcác đơn vị cho nó margin-bottom.

.example-element {
  margin-bottom: 1rem;
}

Những cái bàn

Các bảng được điều chỉnh một chút về kiểu <caption>, thu gọn đường viền và đảm bảo nhất quán text-alignxuyên suốt. Các thay đổi bổ sung cho đường viền, phần đệm và hơn thế nữa đi kèm với .tablelớp .

Đây là một bảng ví dụ và đây là chú thích của nó để mô tả nội dung.
Tiêu đề bảng	Tiêu đề bảng	Tiêu đề bảng	Tiêu đề bảng
Ô bảng	Ô bảng	Ô bảng	Ô bảng
Ô bảng	Ô bảng	Ô bảng	Ô bảng
Ô bảng	Ô bảng	Ô bảng	Ô bảng

Các hình thức

Các phần tử biểu mẫu khác nhau đã được khởi động lại cho các kiểu cơ sở đơn giản hơn. Dưới đây là một số thay đổi đáng chú ý nhất:

<fieldset>s không có đường viền, phần đệm hoặc lề để chúng có thể dễ dàng được sử dụng làm trình bao bọc cho các đầu vào hoặc nhóm đầu vào riêng lẻ.
<legend>s, giống như các tập trường, cũng đã được thiết kế lại để hiển thị dưới dạng một tiêu đề của các loại.
<label>s được đặt để display: inline-blockcho phép marginđược áp dụng.
<input>s, <select>s, <textarea>s và <button>s chủ yếu được giải quyết bằng Normalize, nhưng Reboot cũng loại bỏ các marginbộ và của chúng line-height: inherit.
<textarea>s được sửa đổi để chỉ có thể thay đổi kích thước theo chiều dọc vì việc thay đổi kích thước theo chiều ngang thường "ngắt" bố cục trang.

Những thay đổi này và hơn thế nữa được minh họa bên dưới.

Các yếu tố khác

Địa chỉ nhà

Phần <address>tử được cập nhật để đặt lại mặc định của trình duyệt font-styletừ italicthành normal. line-heighthiện cũng được kế thừa và margin-bottom: 1remđã được thêm vào. <address>s là để trình bày thông tin liên lạc của tổ tiên gần nhất (hoặc toàn bộ cơ quan). Duy trì định dạng bằng cách kết thúc dòng bằng <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Tên đầy đủ
[email protected]

Blockquote

Mặc định margintrên blockquotes là 1em 40px, vì vậy chúng tôi đặt lại điều đó thành 0 0 1remmột thứ gì đó phù hợp hơn với các phần tử khác.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante.

Ai đó nổi tiếng trong Tiêu đề nguồn

Các phần tử nội tuyến

Phần <abbr>tử nhận được kiểu dáng cơ bản để làm cho nó nổi bật giữa văn bản đoạn văn.

Nulla attr vitae elit libero, một loài pharetra augue.

Bản tóm tắt

Mặc định cursorvề tóm tắt là text, vì vậy chúng tôi đặt lại điều đó pointerđể truyền đạt rằng phần tử có thể được tương tác bằng cách nhấp vào nó.

Một số chi tiết

Thông tin thêm về các chi tiết.

Chi tiết hơn nữa

Dưới đây là chi tiết hơn nữa về các chi tiết.

`[hidden]`Thuộc tính HTML5

HTML5 thêm một thuộc tính toàn cục mới có tên[hidden] , thuộc tính này được tạo kiểu theo display: nonemặc định. Mượn ý tưởng từ PureCSS , chúng tôi cải thiện tính năng mặc định này bằng cách thực hiện [hidden] { display: none !important; }để giúp ngăn chặn displaytình trạng vô tình bị ghi đè. Mặc dù [hidden]không được hỗ trợ bởi IE10, nhưng tuyên bố rõ ràng trong CSS của chúng tôi sẽ giải quyết vấn đề đó.

<input type="text" hidden>

jQuery không tương thích

[hidden]không tương thích với jQuery $(...).hide()và $(...).show()các phương thức. Do đó, chúng tôi hiện không đặc biệt tán thành [hidden]các kỹ thuật khác để quản lý các displayphần tử.

Để chỉ chuyển đổi chế độ hiển thị của một phần tử, nghĩa là phần tử đó displaykhông bị sửa đổi và phần tử vẫn có thể ảnh hưởng đến luồng của tài liệu, hãy sử dụng lớp .invisiblethay thế.