Source

รีบูต

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>ปรับขนาดประเภทที่ตอบสนองได้ง่ายผ่านการสืบค้นสื่อในขณะที่เคารพการตั้งค่าของผู้ใช้และทำให้มั่นใจในแนวทางที่เข้าถึงได้มากขึ้น
นอกจาก<body>นี้ยังกำหนดโกลบอลfont-family, line-height, และtext-align. องค์ประกอบนี้สืบทอดมาในภายหลังโดยองค์ประกอบบางรูปแบบเพื่อป้องกันความไม่สอดคล้องกันของแบบอักษร
เพื่อความปลอดภัย<body>ได้ประกาศbackground-colorผิดนัดเป็น#fff.

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

แบบอักษรเว็บเริ่มต้น (Helvetica Neue, Helvetica และ Arial) ถูกทิ้งใน Bootstrap 4 และแทนที่ด้วย "แบบอักษรดั้งเดิม" เพื่อการแสดงผลข้อความที่เหมาะสมในทุกอุปกรณ์และระบบปฏิบัติการ อ่านเพิ่มเติมเกี่ยวกับกองแบบอักษรดั้งเดิมในบทความSmashing Magazineนี้

$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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

สิ่งนี้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รายการที่ซ้อน กันไม่มี

ลอเรม อิปซัม ดอเลอร์ ซิท เอเม็ท
Consectetur adipiscing elit
จำนวนเต็ม โมเลสตี้ โลเร็ม ที่ มาสสา
สิ่งอำนวยความสะดวกใน pretium nisl aliquet
นุลลา โวลุตพัฒน์ อะลิควัม เวลิต
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat ที่
Faucibus porta lacus fringilla vel
เอเลี่ยนนั่งเอรัทเอรัทนุน
Eget porttitor lorem

ลอเรม อิปซัม ดอเลอร์ ซิท เอเม็ท
Consectetur adipiscing elit
จำนวนเต็ม โมเลสตี้ โลเร็ม ที่ มาสสา
สิ่งอำนวยความสะดวกใน pretium nisl aliquet
นุลลา โวลุตพัฒน์ อะลิควัม เวลิต
Faucibus porta lacus fringilla vel
เอเลี่ยนนั่งเอรัทเอรัทนุน
Eget porttitor lorem

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

รายการคำอธิบาย: รายการคำอธิบายเหมาะสำหรับการกำหนดเงื่อนไข
อุยมอด: ขนถ่าย id ligula porta felis euismod semper eget lacinia odio sem; Donec id elit non mi porta gravida ที่ eget metus
Malesuada porta: Etiam porta sem malesuada magna มอลลิส euismod

ข้อความที่จัดรูปแบบไว้ล่วงหน้า

องค์ประกอบ<pre>ถูกรีเซ็ตเพื่อลบmargin-topและใช้remหน่วยสำหรับmargin-bottom.

.example-องค์ประกอบ {
  ระยะขอบล่าง: 1rem;
}

โต๊ะ

ตารางจะถูกปรับเล็กน้อยตามสไตล์<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).

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

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

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

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

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

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

ตัวอย่าง textarea

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

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

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

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

ที่อยู่

องค์ประกอบ<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ให้สอดคล้องกับองค์ประกอบอื่นๆ

Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat ante

คนที่มีชื่อเสียงใน 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ถูกแทนที่โดยไม่ได้ตั้งใจ แม้ว่า[hidden]IE10 จะไม่รองรับโดยกำเนิด แต่การประกาศอย่างชัดแจ้งใน CSS ของเราจะแก้ไขปัญหานั้นได้

<input type="text" hidden>

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

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

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