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>ปรับขนาดประเภทที่ตอบสนองได้ง่ายผ่านการสืบค้นสื่อในขณะที่เคารพการตั้งค่าของผู้ใช้และทำให้มั่นใจในแนวทางที่เข้าถึงได้มากขึ้น
นอกจาก<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,
  // 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รายการที่ซ้อน กันไม่มี

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

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

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

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

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

องค์ประกอบ<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

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

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

<input type="text" hidden>

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

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

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