Chuyển đến nội dung chính Chuyển đến điều hướng tài liệu
Check
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.

Trên trang này

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

Các biến CSS

Đã thêm vào v5.2.0

Với v5.1.1, chúng tôi đã chuẩn hóa các yêu cầu @importtrên tất cả các gói CSS của chúng tôi (bao gồm bootstrap.css, bootstrap-reboot.cssvà bootstrap-grid.css) để đưa vào _root.scss. Điều này thêm :rootcác biến CSS cấp độ vào tất cả các gói, bất kể có bao nhiêu trong số chúng được sử dụng trong gói đó. Cuối cùng thì Bootstrap 5 sẽ tiếp tục thấy nhiều biến CSS được thêm vào theo thời gian, để cung cấp nhiều tùy chỉnh theo thời gian thực hơn mà không cần phải luôn biên dịch lại Sass. Cách tiếp cận của chúng tôi là lấy các biến Sass nguồn của chúng tôi và chuyển đổi chúng thành các biến CSS. Bằng cách đó, ngay cả khi bạn không sử dụng các biến CSS, bạn vẫn có tất cả sức mạnh của Sass. Quá trình này vẫn đang được tiến hành và sẽ cần thời gian để thực hiện đầy đủ.

Ví dụ: hãy xem xét các :rootbiến CSS này cho các <body>kiểu phổ biến:

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

Trong thực tế, các biến đó sau đó được áp dụng trong Khởi động lại như sau:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

Điều này cho phép bạn thực hiện các tùy chỉnh theo thời gian thực theo cách bạn muốn:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

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. Mặc định của trình duyệt này có thể được ghi đè bằng cách sửa đổi $font-size-rootbiến.
  • Nó <body>cũng thiết lập một toàn cầu font-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-weightline-heightcolor
  • Để 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

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,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // 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

Quy tắc ngang

Phần <hr>tử đã được đơn giản hóa. Tương tự như mặc định của trình duyệt, <hr>s được tạo kiểu qua border-top, có mặc định opacity: .25và tự động kế thừa border-colorqua của chúng color, bao gồm cả thời điểm colorđược đặt qua gốc. Chúng có thể được sửa đổi bằng các tiện ích văn bản, đường viền và độ mờ.

html 
<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

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. Chúng tôi cũng đã thiết lập lại các yếu tố padding-leftbậ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
  1. Đây là danh sách đã đặt hàng
  2. Với một vài mục trong danh sách
  3. Nó có cùng một cái nhìn tổng thể
  4. 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.

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.

Ví dụ, <section>nên được bọc dưới dạng nội tuyến.
html 
For example, <code>&lt;section&gt;</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-topvà sử dụng remcác đơn vị cho nó margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>
html 
<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Biến

Để chỉ ra các biến, hãy sử dụng <var>thẻ.

y = m x + b
html 
<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.

Để chuyển đổi các thư mục, hãy nhập cdtheo sau là tên của thư mục.
Để chỉnh sửa cài đặt, nhấn ctrl + ,
html 
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ẻ.

Văn bản này được coi là đầu ra mẫu từ một chương trình máy tính.
html 
<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-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
html 
<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

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.

Chú giải ví dụ

100

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ự cursorthay đổi.

Nút phần tử không phải nút
html 
<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.

Phần tử viết tắt HTML .

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 đè.

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