in English

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,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Lưu ý rằng vì ngăn xếp phông chữ bao gồm các phông chữ biểu tượng cảm xúc, nhiều ký tự Unicode biểu tượng / dingbat phổ biến sẽ được hiển thị dưới dạng hình ảnh nhiều màu. Hình thức của chúng sẽ khác nhau, tùy thuộc vào kiểu được sử dụng trong phông chữ biểu tượng cảm xúc gốc của trình duyệt / nền tảng và chúng sẽ không bị ảnh hưởng bởi bất kỳ colorkiểu CSS nào.

Đ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.

Tất cả các danh sách đều bị loại bỏ lợi nhuận cao nhất
Và lợi nhuận dưới cùng của họ được bình thường hóa
Danh sách lồng nhau không có lề dưới
- Bằng cách này, chúng có vẻ ngoài đồng đều hơn
- Đặc biệt khi theo sau bởi các mục danh sách khác
Phần đệm bên trái cũng đã được đặt lại

Đây là danh sách đã đặt hàng
Với một vài mục trong danh sách
Nó có cùng một cái nhìn tổng thể
Như danh sách không có thứ tự trước đó

Để 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ữ.
Kỳ hạn: Định nghĩa cho thuật ngữ.; Định nghĩa thứ hai cho thuật ngữ tương tự.
Một thuật ngữ khác: Định nghĩa cho thuật ngữ khác này.

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.
<button>s và <input>phần tử nút có cursor: pointerkhi :not(:disabled).

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

Con trỏ trên các nút

Khởi động lại bao gồm một tính năng nâng cao role="button"để thay đổi con trỏ mặc định thành pointer. Thêm thuộc tính này vào các phần tử để giúp chỉ ra các phần tử có tính tương tác. Vai trò này không cần thiết đối với <button>các phần tử, những phần tử này sẽ tự cursorthay đổi.

Nút phần tử không phải nút

<span role="button" tabindex="0">Non-button element button</span>

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.

Một câu trích dẫn nổi tiếng, được chứa trong một phần tử blockquote.

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ế.