รีบูต

Reboot ซึ่งเป็นคอลเล็กชันของการเปลี่ยนแปลง CSS เฉพาะองค์ประกอบในไฟล์เดียว kickstart Bootstrap เพื่อให้มีพื้นฐานที่สวยงาม สม่ำเสมอ และเรียบง่ายในการสร้าง

ในหน้านี้

เข้าใกล้

รีบูทสร้างขึ้นจาก Normalize โดยให้องค์ประกอบ HTML จำนวนมากที่มีสไตล์ค่อนข้างแสดงความคิดเห็นโดยใช้ตัวเลือกองค์ประกอบเท่านั้น การจัดสไตล์เพิ่มเติมทำได้เฉพาะกับคลาสเท่านั้น ตัวอย่างเช่น เรารีบูตบาง<table>สไตล์เพื่อให้เป็นบรรทัดฐานที่ง่ายขึ้นและให้.table, .table-bordered, และอื่นๆ ในภายหลัง

ต่อไปนี้คือแนวทางและเหตุผลในการเลือกสิ่งที่จะแทนที่ในการรีบูต:

อัปเดตค่าเริ่มต้นของเบราว์เซอร์เพื่อใช้rems แทนems สำหรับการเว้นวรรคคอมโพเนนต์ที่ปรับขนาดได้
หลีกเลี่ยงmargin-top. ระยะขอบแนวตั้งอาจยุบลง ให้ผลลัพธ์ที่ไม่คาดคิด ที่สำคัญกว่านั้น ทิศทางเดียวของmarginเป็นแบบจำลองทางจิตที่เรียบง่ายกว่า
เพื่อให้ปรับขนาดตามขนาดอุปกรณ์ได้ง่ายขึ้น องค์ประกอบบล็อกควรใช้rems สำหรับmargins
รักษาการประกาศfontคุณสมบัติที่เกี่ยวข้องให้น้อยที่สุด โดยใช้inheritเมื่อทำได้

ตัวแปร CSS

เพิ่มใน v5.2.0

ด้วย v5.1.1 เราได้กำหนดมาตรฐานที่จำเป็น@importสำหรับกลุ่ม CSS ทั้งหมดของเรา (รวมถึงbootstrap.css, bootstrap-reboot.css, และbootstrap-grid.css) เพื่อรวม_root.scss. สิ่งนี้จะเพิ่ม:rootตัวแปร CSS ระดับให้กับบันเดิลทั้งหมด ไม่ว่าจะใช้กี่ตัวแปรในกลุ่มนั้น ในที่สุด Bootstrap 5 จะยังคงเห็นตัวแปร CSSเพิ่มขึ้นเมื่อเวลาผ่านไป เพื่อให้การปรับแต่งตามเวลาจริงมากขึ้นโดยไม่จำเป็นต้องคอมไพล์ Sass ใหม่ทุกครั้ง แนวทางของเราคือการนำตัวแปร Sass ต้นทางมาแปลงเป็นตัวแปร CSS ด้วยวิธีนี้ แม้ว่าคุณจะไม่ได้ใช้ตัวแปร CSS คุณก็ยังมีพลังของ Sass อยู่ทั้งหมด การดำเนินการนี้ยังอยู่ในระหว่างดำเนินการและจะใช้เวลาดำเนินการอย่างเต็มที่

ตัวอย่างเช่น พิจารณา:rootตัวแปร CSS เหล่านี้สำหรับ<body>สไตล์ทั่วไป:

  @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};

ในทางปฏิบัติ ตัวแปรเหล่านั้นจะถูกนำไปใช้ในการ Reboot ดังนี้:

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
}

ซึ่งช่วยให้คุณปรับแต่งตามเวลาจริงได้ตามต้องการ:

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

ค่าเริ่มต้นของหน้า

<html>และองค์ประกอบ<body>ได้รับการอัปเดตเพื่อให้มีค่าเริ่มต้นทั่วทั้งหน้าที่ดีขึ้น โดยเฉพาะอย่างยิ่ง:

ถูกbox-sizingกำหนดไว้ทั่วโลกในทุกองค์ประกอบ—รวมถึง*::beforeและ*::afterถึงborder-box. เพื่อให้แน่ใจว่าความกว้างที่ประกาศขององค์ประกอบจะไม่เกินเนื่องจากการเติมหรือเส้นขอบ
- ไม่มีfont-sizeการประกาศฐานบน<html>แต่16pxถือว่า (ค่าเริ่มต้นของเบราว์เซอร์) font-size: 1remถูกนำไปใช้กับการ<body>ปรับขนาดประเภทที่ตอบสนองได้ง่ายผ่านการสืบค้นสื่อในขณะที่เคารพการตั้งค่าของผู้ใช้และทำให้มั่นใจในแนวทางที่เข้าถึงได้มากขึ้น ค่าเริ่มต้นของเบราว์เซอร์นี้สามารถแทนที่ได้โดยการแก้ไข$font-size-rootตัวแปร
นอกจาก<body>นี้ยังกำหนดโกลบอลfont-family, font-weight, , line-heightและ colorองค์ประกอบนี้สืบทอดมาในภายหลังโดยองค์ประกอบบางรูปแบบเพื่อป้องกันความไม่สอดคล้องกันของแบบอักษร
เพื่อความปลอดภัย<body>มีการประกาศbackground-colorผิดนัดเป็น#fff.

กองแบบอักษรดั้งเดิม

Bootstrap ใช้ "สแต็คฟอนต์ดั้งเดิม" หรือ "สแต็กฟอนต์ระบบ" สำหรับการแสดงข้อความที่เหมาะสมที่สุดในทุกอุปกรณ์และระบบปฏิบัติการ แบบอักษรของระบบเหล่านี้ได้รับการออกแบบมาโดยเฉพาะโดยคำนึงถึงอุปกรณ์ในปัจจุบัน โดยมีการเรนเดอร์หน้าจอที่ได้รับการปรับปรุง การรองรับแบบอักษรที่ปรับเปลี่ยนได้ และอื่นๆ อ่านเพิ่มเติมเกี่ยวกับกองแบบอักษรดั้งเดิมในบทความSmashing Magazineนี้

$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;

โปรดทราบว่าเนื่องจากสแต็กฟอนต์มีฟอนต์อิโมจิ อักขระทั่วไป/อักขระ Unicode dingbat จำนวนมากจะแสดงเป็นภาพสัญลักษณ์หลากสี ลักษณะที่ปรากฏจะแตกต่างกันไป ขึ้นอยู่กับสไตล์ที่ใช้ในแบบอักษรอีโมจิดั้งเดิมของเบราว์เซอร์/แพลตฟอร์ม และจะไม่ได้รับผลกระทบจากcolorสไตล์ CSS ใดๆ

สิ่งนี้font-familyใช้กับ the <body>และ สืบทอดโดยอัตโนมัติทั่วโลกใน Bootstrap หากต้องการเปลี่ยน global font-familyให้อัพเดต$font-family-baseและคอมไพล์ Bootstrap ใหม่

หัวเรื่องและย่อหน้า

องค์ประกอบส่วนหัวทั้งหมด—เช่น<h1>—และ<p>ถูกรีเซ็ตเพื่อmargin-topลบออก เพิ่ม หัวเรื่องmargin-bottom: .5remและย่อหน้าmargin-bottom: 1remเพื่อให้เว้นวรรคได้ง่าย

หัวเรื่อง	ตัวอย่าง
`<h1></h1>`	ชั่วโมง1. Bootstrap หัวเรื่อง
`<h2></h2>`	ชั่วโมง2. Bootstrap หัวเรื่อง
`<h3></h3>`	ชั่วโมง3. Bootstrap หัวเรื่อง
`<h4></h4>`	ชั่วโมง4. Bootstrap หัวเรื่อง
`<h5></h5>`	h5. Bootstrap หัวเรื่อง
`<h6></h6>`	h6. Bootstrap หัวเรื่อง

กฎแนวนอน

องค์ประกอบ<hr>ได้รับการทำให้ง่ายขึ้น คล้ายกับค่าเริ่มต้นของเบราว์เซอร์<hr>s ถูกกำหนดสไตล์ผ่านborder-topมีค่าเริ่มต้นopacity: .25และสืบทอดborder-colorผ่าน โดยอัตโนมัติ colorรวมถึงเวลาcolorที่ตั้งค่าผ่านพาเรนต์ สามารถแก้ไขได้ด้วยยูทิลิตี้ข้อความ เส้นขอบ และความทึบ

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

รายการ

รายการทั้งหมด— <ul>, <ol>, และ<dl>— margin-topถูกลบและไฟล์margin-bottom: 1rem. margin-bottomรายการที่ซ้อน กันไม่มี เราได้รีเซ็ตการpadding-leftเปิด<ul>และ<ol>องค์ประกอบด้วย

รายการทั้งหมดถูกลบระยะขอบบนออก
และระยะขอบล่างของพวกมันทำให้เป็นมาตรฐาน
รายการที่ซ้อนกันไม่มีระยะขอบด้านล่าง
- ด้วยวิธีนี้พวกเขาจึงมีรูปลักษณ์ที่สม่ำเสมอมากขึ้น
- โดยเฉพาะอย่างยิ่งเมื่อตามด้วยรายการเพิ่มเติม
ช่องว่างภายในด้านซ้ายได้รับการรีเซ็ตด้วย

นี่คือรายการสั่งซื้อ
พร้อมรายการไม่กี่รายการ
มีลักษณะโดยรวมเหมือนกัน
เป็นรายการที่ไม่เรียงลำดับก่อนหน้า

สำหรับการจัดรูปแบบที่ง่ายกว่า ลำดับชั้นที่ชัดเจน และระยะห่างที่ดีขึ้น รายการคำอธิบายได้อัปเดตmargins s <dd>รีเซ็ตและmargin-leftเพิ่ม s เป็นตัวหนา0margin-bottom: .5rem<dt>

รายการคำอธิบาย: รายการคำอธิบายเหมาะสำหรับการกำหนดเงื่อนไข
ภาคเรียน: คำจำกัดความของคำว่า; คำจำกัดความที่สองสำหรับคำเดียวกัน
อีกวาระหนึ่ง: คำจำกัดความสำหรับคำอื่นนี้

รหัสอินไลน์

ตัดข้อมูลโค้ดแบบอินไลน์ด้วย<code>. อย่าลืมหลีกเลี่ยงวงเล็บมุม HTML

ตัวอย่างเช่น <section>ควรห่อแบบอินไลน์

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

บล็อคโค้ด

ใช้<pre>s สำหรับโค้ดหลายบรรทัด ย้ำอีกครั้งว่าต้องหลีกเลี่ยงวงเล็บเหลี่ยมใดๆ ในโค้ดเพื่อการแสดงผลที่ถูกต้อง องค์ประกอบ<pre>ถูกรีเซ็ตเพื่อลบmargin-topและใช้remหน่วยสำหรับ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>

ตัวแปร

สำหรับการระบุตัวแปรให้ใช้<var>แท็ก

y = ม. x + b

html

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

ข้อมูลผู้ใช้

ใช้<kbd>เพื่อระบุอินพุตที่ปกติแล้วจะป้อนผ่านแป้นพิมพ์

หากต้องการเปลี่ยนไดเร็กทอรี ให้พิมพ์ cdตามด้วยชื่อของไดเร็กทอรี
หากต้องการแก้ไขการตั้งค่า ให้กด 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>

ผลลัพธ์ตัวอย่าง

สำหรับการระบุเอาต์พุตตัวอย่างจากโปรแกรม ให้ใช้<samp>แท็ก

ข้อความนี้มีขึ้นเพื่อใช้เป็นตัวอย่างผลลัพธ์จากโปรแกรมคอมพิวเตอร์

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

โต๊ะ

ตารางจะถูกปรับเล็กน้อยตามสไตล์<caption>ยุบเส้นขอบ และให้แน่ใจว่าสอดคล้องกันtext-alignตลอด การเปลี่ยนแปลงเพิ่มเติมสำหรับเส้นขอบ ช่องว่างภายใน และอื่นๆ มาพร้อมกับ.tableคลาส

นี่คือตารางตัวอย่าง และนี่คือคำอธิบายภาพเพื่ออธิบายเนื้อหา
หัวตาราง	หัวตาราง	หัวตาราง	หัวตาราง
เซลล์ตาราง	เซลล์ตาราง	เซลล์ตาราง	เซลล์ตาราง
เซลล์ตาราง	เซลล์ตาราง	เซลล์ตาราง	เซลล์ตาราง
เซลล์ตาราง	เซลล์ตาราง	เซลล์ตาราง	เซลล์ตาราง

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>

แบบฟอร์ม

องค์ประกอบของแบบฟอร์มต่างๆ ได้รับการรีบูตเพื่อให้มีลักษณะพื้นฐานที่เรียบง่ายขึ้น นี่คือการเปลี่ยนแปลงที่โดดเด่นที่สุดบางส่วน:

<fieldset>ไม่มีเส้นขอบ ช่องว่างภายใน หรือระยะขอบ ดังนั้นจึงสามารถใช้เป็นตัวห่อหุ้มสำหรับอินพุตแต่ละรายการหรือกลุ่มของอินพุตได้อย่างง่ายดาย
<legend>s เช่นเดียวกับ fieldsets ได้รับการ restyled เพื่อแสดงเป็นหัวเรื่องแปลก ๆ
<label>s ถูกตั้งค่าเพื่อdisplay: inline-blockให้marginสามารถนำไปใช้ได้
<input>s, <select>s, <textarea>s และ<button>s ส่วนใหญ่ได้รับการแก้ไขโดย Normalize แต่ Reboot จะลบmarginและ set line-height: inheritออกเช่นกัน
<textarea>s ถูกแก้ไขให้ปรับขนาดได้ในแนวตั้งเท่านั้นเนื่องจากการปรับขนาดแนวนอนมักจะ "แบ่ง" เค้าโครงหน้า
<button>องค์ประกอบ s และ<input>ปุ่มมีcursor: pointerเมื่อ:not(:disabled).

การเปลี่ยนแปลงเหล่านี้และอื่นๆ แสดงไว้ด้านล่าง

ตัวอย่างตำนาน

ตัวอย่างอินพุต

ตัวอย่างอีเมล

ตัวอย่างโทรศัพท์

ตัวอย่าง url

ตัวอย่างหมายเลข

ตัวอย่างการค้นหา

ช่วงตัวอย่าง

ตัวอย่างไฟล์อินพุต

ตัวอย่างการเลือก

เลือกช่องทำเครื่องหมายนี้

ตัวเลือกที่หนึ่งคือนี่และนั่น ตัวเลือกที่สองเป็นอย่างอื่นที่ยาวมากในการสาธิตการควบคุมรูปแบบแฟนซีเหล่านี้ ตัวเลือกที่สามถูกปิดใช้งาน

ตัวอย่าง textarea

ตัวอย่างวันที่

เวลาตัวอย่าง

ตัวอย่างรหัสผ่าน

ตัวอย่าง datetime-local

ตัวอย่างสัปดาห์

ตัวอย่างเดือน

ตัวอย่างสี

ตัวอย่างผลลัพธ์ 100

รองรับการป้อนวันที่และสี

โปรดทราบว่าเบราว์เซอร์บางตัว ไม่รองรับการป้อนข้อมูลวันที่ อย่างสมบูรณ์ กล่าวคือ Safari

ตัวชี้บนปุ่ม

การรีบูตรวมถึงการเพิ่มประสิทธิภาพสำหรับrole="button"การเปลี่ยนเคอร์เซอร์เริ่มต้นเป็นpointer. เพิ่มแอตทริบิวต์นี้ให้กับองค์ประกอบเพื่อช่วยระบุว่าองค์ประกอบเป็นแบบโต้ตอบ บทบาทนี้ไม่จำเป็นสำหรับ<button>องค์ประกอบที่ได้รับcursorการเปลี่ยนแปลง เอง

ปุ่มองค์ประกอบที่ไม่ใช่ปุ่ม

html

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

องค์ประกอบเบ็ดเตล็ด

ที่อยู่

องค์ประกอบ<address>ได้รับการอัปเดตเพื่อรีเซ็ตค่าเริ่มต้นของเบราว์เซอร์font-styleจากitalicเป็น ได้รับการ สืบทอดและได้เพิ่มเข้ามาแล้วด้วย ใช้สำหรับนำเสนอข้อมูลติดต่อสำหรับบรรพบุรุษที่ใกล้ที่สุด (หรือทั้งงาน) คง รูปแบบไว้โดยลงท้ายด้วย.normalline-heightmargin-bottom: 1rem<address><br>

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

ชื่อ-นามสกุล
[email protected]

Blockquote

ค่าเริ่มต้นmarginของ blockquotes คือ1em 40pxดังนั้นเราจึงรีเซ็ตเพื่อ0 0 1remให้สอดคล้องกับองค์ประกอบอื่นๆ

ใบเสนอราคาที่รู้จักกันดี ซึ่งมีอยู่ในองค์ประกอบ blockquote

คนที่มีชื่อเสียงในSource Title

องค์ประกอบแบบอินไลน์

องค์ประกอบ<abbr>ได้รับการจัดรูปแบบพื้นฐานเพื่อให้โดดเด่นท่ามกลางข้อความในย่อหน้า

องค์ประกอบ ย่อ HTML

สรุป

ค่าเริ่มต้นcursorของสรุปคือtextดังนั้นเราจึงรีเซ็ตค่านั้นpointerเพื่อแสดงว่าองค์ประกอบสามารถโต้ตอบได้ด้วยการคลิกที่องค์ประกอบนั้น

รายละเอียดบางอย่าง

ข้อมูลเพิ่มเติมเกี่ยวกับรายละเอียด

รายละเอียดเพิ่มเติม

ต่อไปนี้เป็นรายละเอียดเพิ่มเติมเกี่ยวกับรายละเอียด

`[hidden]`แอตทริบิวต์HTML5

HTML5 เพิ่มแอตทริบิวต์ส่วนกลางใหม่ชื่อ[hidden]ซึ่งกำหนดสไตล์display: noneตามค่าเริ่มต้น การยืมไอเดียจากPureCSSเราปรับปรุงตามค่าเริ่มต้นนี้โดยการทำ[hidden] { display: none !important; }เพื่อช่วยป้องกันไม่ให้ แนวคิด displayถูกแทนที่โดยไม่ได้ตั้งใจ

<input type="text" hidden>

ความเข้ากันไม่ได้ของ jQuery

[hidden]เข้ากันไม่ได้กับ jQuery's $(...).hide()และ$(...).show()method ดังนั้นเราจึงไม่สนับสนุน[hidden]เทคนิคอื่นๆ ในการจัดการdisplayองค์ประกอบ โดยเฉพาะในขณะนี้

หากต้องการเพียงสลับการมองเห็นขององค์ประกอบ หมายความว่าองค์ประกอบdisplayนั้นไม่ได้ถูกแก้ไขและองค์ประกอบยังคงส่งผลต่อการไหลของเอกสาร ให้ใช้.invisibleคลาสแทน

รีบูต

เข้าใกล้

ตัวแปร CSS

ค่าเริ่มต้นของหน้า

กองแบบอักษรดั้งเดิม

หัวเรื่องและย่อหน้า

กฎแนวนอน

รายการ

รหัสอินไลน์

บล็อคโค้ด

ตัวแปร

ข้อมูลผู้ใช้

ผลลัพธ์ตัวอย่าง

โต๊ะ

แบบฟอร์ม

รองรับการป้อนวันที่และสี

ตัวชี้บนปุ่ม

องค์ประกอบเบ็ดเตล็ด

ที่อยู่

Blockquote

องค์ประกอบแบบอินไลน์

สรุป

[hidden]แอตทริบิวต์HTML5

ความเข้ากันไม่ได้ของ jQuery

`[hidden]`แอตทริบิวต์HTML5