ข้ามไปที่เนื้อหาหลัก ข้ามไปที่การนำทางเอกสาร
in English

รีบูต

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

ในหน้านี้

เข้าใกล้

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

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

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

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

<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,
  // 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;

โ��รดทราบว่าเนื่องจากสแต็กฟอนต์มีฟอนต์อีโมจิ อักขระ 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 หัวเรื่อง

รายการ

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

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

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

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

รหัสอินไลน์

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

ตัวอย่างเช่น <section>ควรห่อแบบอินไลน์ 
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>

<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 
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

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

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

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

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

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

ข้อความนี้มีขึ้นเพื่อใช้เป็นตัวอย่างผลลัพธ์จากโปรแกรมคอมพิวเตอร์ 
<samp>This text is meant to be treated as sample output from a computer program.</samp>

โต๊ะ

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

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

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

100

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

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

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

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

ปุ่มองค์ประกอบที่ไม่ใช่ปุ่ม 
<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>ได้รับการจัดรูปแบบพื้นฐานเพื่อให้โดดเด่นท่ามกลางข้อความในย่อหน้า

Nulla attr vitae elit libero, a pharetra augue.

สรุป

ค่าเริ่มต้น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คลาสแทน