รีบูต
Reboot ซึ่งเป็นคอลเล็กชันของการเปลี่ยนแปลง CSS เฉพาะองค์ประกอบในไฟล์เดียว kickstart Bootstrap เพื่อให้มีพื้นฐานที่สวยงาม สม่ำเสมอ และเรียบง่ายในการสร้าง
เข้าใกล้
รีบูทสร้างขึ้นจาก Normalize โดยให้องค์ประกอบ HTML จำนวนมากที่มีสไตล์ค่อนข้างแสดงความคิดเห็นโดยใช้ตัวเลือกองค์ประกอบเท่านั้น การจัดสไตล์เพิ่มเติมทำได้เฉพาะกับคลาสเท่านั้น ตัวอย่างเช่น เรารีบูตบาง<table>
สไตล์เพื่อให้เป็นบรรทัดฐานที่ง่ายขึ้นและให้.table
, .table-bordered
, และอื่นๆ ในภายหลัง
ต่อไปนี้คือแนวทางและเหตุผลในการเลือกสิ่งที่จะแทนที่ในการรีบูต:
- อัปเดตค่าเริ่มต้นของเบราว์เซอร์เพื่อใช้
rem
s แทนem
s สำหรับการเว้นวรรคคอมโพเนนต์ที่ปรับขนาดได้ - หลีกเลี่ยง
margin-top
. ระยะขอบแนวตั้งอาจยุบลง ให้ผลลัพธ์ที่ไม่คาดคิด ที่สำคัญกว่านั้น ทิศทางเดียวของmargin
เป็นแบบจำลองทางจิตที่เรียบง่ายกว่า - เพื่อให้ปรับขนาดตามขนาดอุปกรณ์ได้ง่ายขึ้น องค์ประกอบบล็อกควรใช้
rem
s สำหรับmargin
s - รักษาการประกาศ
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
ใช้กับ the <body>
และ สืบทอดโดยอัตโนมัติทั่วโลกใน Bootstrap หากต้องการเปลี่ยน global font-family
ให้อัพเดต$font-family-base
และคอมไพล์ Bootstrap ใหม่
หัวเรื่องและย่อหน้า
องค์ประกอบส่วนหัวทั้งหมด—เช่น<h1>
—และ<p>
ถูกรีเซ็ตเพื่อmargin-top
ลบออก เพิ่ม หัวเรื่องmargin-bottom: .5rem
และย่อหน้าmargin-bottom: 1rem
เพื่อให้เว้นวรรคได้ง่าย
หัวเรื่อง | ตัวอย่าง |
---|---|
|
ชั่วโมง1. Bootstrap หัวเรื่อง |
|
ชั่วโมง2. Bootstrap หัวเรื่อง |
|
ชั่วโมง3. Bootstrap หัวเรื่อง |
|
ชั่วโมง4. Bootstrap หัวเรื่อง |
|
h5. Bootstrap หัวเรื่อง |
|
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
สำหรับการจัดรูปแบบที่ง่ายกว่า ลำดับชั้นที่ชัดเจน และระยะห่างที่ดีขึ้น รายการคำอธิบายได้อัปเดตmargin
s s <dd>
รีเซ็ตและmargin-left
เพิ่ม s เป็นตัวหนา0
margin-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
และ setline-height: inherit
ออกเช่นกัน<textarea>
s ถูกแก้ไขให้ปรับขนาดได้ในแนวตั้งเท่านั้นเนื่องจากการปรับขนาดแนวนอนมักจะ "แบ่ง" เค้าโครงหน้า<button>
องค์ประกอบ s และ<input>
ปุ่มมีcursor: pointer
เมื่อ:not(:disabled)
.
การเปลี่ยนแปลงเหล่านี้และอื่นๆ แสดงไว้ด้านล่าง
องค์ประกอบเบ็ดเตล็ด
ที่อยู่
องค์ประกอบ<address>
ได้รับการอัปเดตเพื่อรีเซ็ตค่าเริ่มต้นของเบราว์เซอร์font-style
จากitalic
เป็น ได้รับการ สืบทอดและได้เพิ่มเข้ามาแล้วด้วย ใช้สำหรับนำเสนอข้อมูลติดต่อของบรรพบุรุษที่ใกล้ที่สุด (หรือทั้งงาน) คง รูปแบบไว้โดยลงท้ายด้วย.normal
line-height
margin-bottom: 1rem
<address>
<br>
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
องค์ประกอบแบบอินไลน์
องค์ประกอบ<abbr>
ได้รับการจัดรูปแบบพื้นฐานเพื่อให้โดดเด่นท่ามกลางข้อความในย่อหน้า
สรุป
ค่าเริ่มต้นcursor
ของข้อมูลสรุปคือtext
ดังนั้นเราจึงรีเซ็ตค่านั้นpointer
เพื่อแสดงว่าองค์ประกอบสามารถโต้ตอบได้ด้วยการคลิกที่องค์ประกอบนั้น
รายละเอียดบางอย่าง
ข้อมูลเพิ่มเติมเกี่ยวกับรายละเอียด
รายละเอียดเพิ่มเติม
ต่อไปนี้เป็นรายละเอียดเพิ่มเติมเกี่ยวกับรายละเอียด
[hidden]
แอตทริบิวต์HTML5
HTML5 เพิ่มแอตทริบิวต์ส่วนกลางใหม่ชื่อ[hidden]
ซึ่งกำหนดสไตล์display: none
ตามค่าเริ่มต้น การยืมไอเดียจากPureCSSเราปรับปรุงตามค่าเริ่มต้นนี้โดยการทำ[hidden] { display: none !important; }
เพื่อช่วยป้องกันไม่ให้ แนวคิด display
ถูกแทนที่โดยไม่ได้ตั้งใจ แม้ว่า[hidden]
IE10 จะไม่รองรับโดยกำเนิด แต่การประกาศอย่างชัดแจ้งใน CSS ของเราจะแก้ไขปัญหานั้นได้
ความเข้ากันไม่ได้ของ jQuery
[hidden]
เข้ากันไม่ได้กับ jQuery's $(...).hide()
และ$(...).show()
method ดังนั้นเราจึงไม่สนับสนุน[hidden]
เทคนิคอื่นๆ ในการจัดการdisplay
องค์ประกอบ โดยเฉพาะในขณะนี้
หากต้องการสลับการมองเห็นขององค์ประกอบเพียงอย่างเดียว หมายความว่าองค์ประกอบdisplay
นั้นไม่ได้ถูกแก้ไขและองค์ประกอบยังคงส่งผลต่อการไหลของเอกสาร ให้ใช้.invisible
คลาสแทน