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-bordered
v.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
rem
s thay vìem
s 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ấtmargin
là 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
rem
s chomargin
s. - Giữ khai báo các
font
thuộc tính liên quan đến mức tối thiểu, sử dụnginherit
bấ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-sizing
cầu được thiết lập trên mọi phần tử — bao gồm*::before
và*::after
, đếnborder-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ưng16px
đượ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. Có thể ghi đè mặc định của trình duyệt này bằng cách sửa đổi$font-size-root
biến.
- Không có cơ sở nào
- Nó
<body>
cũng thiết lập một toàn cầufont-family
, và . Đ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ữ.font-weight
line-height
color
- Để an toàn,
<body>
có một khai báobackground-color
, mặc định là#fff
.
Ngăn xếp phông chữ gốc
Bootstrap sử dụng “ngăn xếp phông chữ gốc” hoặc “ngăn xếp phông chữ hệ thống” để hiển thị văn bản tối ưu trên mọi thiết bị và hệ điều hành. Các phông chữ hệ thống này đã được thiết kế đặc biệt dành cho các thiết bị ngày nay, với khả năng hiển thị được cải thiện trên màn hình, hỗ trợ phông chữ có thể thay đổi và hơn thế nữa. Đọ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:
// Cross-platform generic font family (default user interface font)
system-ui,
// Safari for macOS and iOS (San Francisco)
-apple-system,
// 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ỳ color
kiể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-base
và 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-top
xoá 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-top
bị xóa và a margin-bottom: 1rem
. Danh sách lồng nhau không có margin-bottom
. Chúng tôi cũng đã thiết lập lại các yếu tố padding-left
bật <ul>
và .<ol>
- 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 margin
s. <dd>
s đặt lại margin-left
và 0
thê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.
Mã nội tuyến
Gói các đoạn mã nội tuyến bằng <code>
. Đảm bảo thoát khỏi dấu ngoặc nhọn HTML.
<section>
nên được bọc dưới dạng nội tuyến.
For example, <code><section></code> should be wrapped as inline.
Khối mã
Sử dụng <pre>
s cho nhiều dòng mã. Một lần nữa, hãy đảm bảo thoát khỏi bất kỳ dấu ngoặc nhọn nào trong mã để hiển thị phù hợp. Phần <pre>
tử được đặt lại để loại bỏ nó margin-top
và sử dụng rem
các đơn vị cho nó margin-bottom
.
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
Biến
Để chỉ ra các biến, hãy sử dụng <var>
thẻ.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Đầu vào của người dùng
Sử dụng <kbd>
để biểu thị thông tin đầu vào thường được nhập qua bàn phím.
Để chỉnh sửa cài đặt, nhấn ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
Đầu ra mẫu
Để chỉ ra đầu ra mẫu từ một chương trình, hãy sử dụng <samp>
thẻ.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
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-align
xuyê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 .table
lớp .
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-block
cho phépmargin
đượ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ácmargin
bộ và của chúngline-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: pointer
khi:not(:disabled)
.
Những thay đổi này và hơn thế nữa được minh họa bên dưới.
Hỗ trợ nhập ngày tháng và màu sắc
Xin lưu ý rằng các mục nhập ngày tháng không được hỗ trợ đầy đủ bởi tất cả các trình duyệt, cụ thể là Safari.
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ự cursor
thay đổi.
<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-style
từ italic
thành normal
. line-height
hiệ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>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Tên đầy đủ
[email protected]
Blockquote
Mặc định margin
trên blockquotes là 1em 40px
, vì vậy chúng tôi đặt lại điều đó thành 0 0 1rem
một cái 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.
Bản tóm tắt
Mặc định cursor
về 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: none
mặ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 display
tình trạng vô tình bị ghi đè.
<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 display
phần tử.
Để chỉ chuyển đổi chế độ hiển thị của một phần tử, nghĩa là phần tử đó display
khô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 .invisible
thay thế.