Source

Reboot

Reboot, kumpulan parobahan CSS unsur-spésifik dina hiji file, kickstart Bootstrap pikeun nyadiakeun hiji garis dasar elegan, konsisten, sarta basajan pikeun ngawangun kana.

Ngadeukeutan

Reboot diwangun dina Normalize, nyadiakeun loba elemen HTML kalawan gaya rada opinionated maké ngan selectors unsur. styling tambahan dipigawé ngan kalawan kelas. Contona, urang reboot sababaraha <table>gaya pikeun baseline basajan tur engké nyadiakeun .table, .table-bordered, sareng nu sanesna.

Ieu tungtunan sareng alesan pikeun milih naon anu kedah ditimpa dina Reboot:

Apdet sababaraha nilai standar browser ngagunakeun rems tinimbang ems pikeun spasi komponén scalable.
Nyingkahan margin-top. Margin nangtung bisa ambruk, ngahasilkeun hasil nu teu kaduga. Langkung pentingna sanaos, arah tunggal marginmangrupikeun modél mental anu langkung saderhana.
Pikeun skala gampang sakuliah ukuran alat, elemen blok kedah nganggo rems pikeun margins.
Tetep deklarasi fontsipat -related ka minimum, ngagunakeun inheritsabisana.

Kaca standar

Unsur <html>sareng <body>unsur diropéa pikeun nyayogikeun standar halaman anu langkung saé. Leuwih husus:

The box-sizingdisetel sacara global dina unggal unsur-kaasup *::beforejeung *::after, ka border-box. Ieu mastikeun yén lebar anu dinyatakeun tina unsur henteu pernah ngaleuwihan kusabab padding atanapi wates.
- Taya basa font-sizedinyatakeun dina <html>, tapi 16pxdianggap (standar browser). font-size: 1remditerapkeun dina <body>pikeun skala tipe responsif gampang via queries média bari respecting preferensi pamaké sarta mastikeun pendekatan leuwih diaksés.
The <body>ogé susunan global font-family, line-height, jeung text-align. Ieu diwariskeun engké ku sababaraha elemen formulir pikeun nyegah inconsistencies font.
Pikeun kasalametan, nu <body>geus dinyatakeun background-color, defaulting ka #fff.

Tumpukan font asli

Fon wéb standar (Helvetica Neue, Helvetica, sareng Arial) parantos diturunkeun dina Bootstrap 4 sareng diganti ku "tumpuk font asli" pikeun rendering téks anu optimal dina unggal alat sareng OS. Baca leuwih seueur tentang tumpukan font asli dina artikel Smashing Magazine ieu .

$font-family-sans-serif:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (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;

Ieu font-familyditerapkeun ka <body>sareng otomatis diwariskeun sacara global sapanjang Bootstrap. Pikeun ngalihkeun global font-family, ngapdet $font-family-basesareng nyusun ulang Bootstrap.

Judul jeung paragraf

Sadaya elemen judul-contona, - <h1>sareng direset <p>supados margin-topdihapus. Judul geus margin-bottom: .5remditambahkeun jeung paragraf margin-bottom: 1rempikeun spasi gampang.

Judul	Contona
`<h1></h1>`	h1. Judul Bootstrap
`<h2></h2>`	h2. Judul Bootstrap
`<h3></h3>`	h3. Judul Bootstrap
`<h4></h4>`	h4. Judul Bootstrap
`<h5></h5>`	h5. Judul Bootstrap
`<h6></h6>`	h6. Judul Bootstrap

Daptar

Sadaya daptar— , <ul>, <ol>jeung — geus dihapus sarta a . Daptar Nested teu boga .<dl>margin-topmargin-bottom: 1remmargin-bottom

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem jeung massa
Facilisis di pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean diuk amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem jeung massa
Facilisis di pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean diuk amet erat nunc
Eget porttitor lorem

Pikeun styling basajan, hirarki jelas, sarta spasi hadé, béréndélan déskripsi geus diropéa margins. <dd>s reset margin-leftjeung 0nambahkeun margin-bottom: .5rem. <dt>s anu bolded .

Daptar pedaran: Daptar pedaran sampurna pikeun nangtukeun istilah.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida and eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

Téks anu tos diformat

Unsur <pre>direset pikeun ngahapus margin-topsareng nganggo remunit pikeun margin-bottom.

.conto-unsur {
  margin-handap: 1rem;
}

tabél

Tables rada disaluyukeun kana gaya <caption>s, runtuhna wates, sarta mastikeun konsisten text-alignsakuliah. Parobihan tambahan pikeun wates, padding, sareng seueur deui kalebet .tablekelas .

Ieu mangrupikeun conto tabel, sareng ieu mangrupikeun caption pikeun ngajelaskeun eusina.
Judul méja	Judul méja	Judul méja	Judul méja
Sél méja	Sél méja	Sél méja	Sél méja
Sél méja	Sél méja	Sél méja	Sél méja
Sél méja	Sél méja	Sél méja	Sél méja

Bentuk

Rupa-rupa elemen formulir geus rebooted pikeun gaya basa basajan. Ieu sababaraha parobahan anu paling kasohor:

<fieldset>s teu boga wates, padding, atawa margin ngarah bisa gampang dipaké salaku wrappers pikeun inputs individu atawa grup inputs.
<legend>s, kawas fieldsets, ogé geus restyled pikeun dipintonkeun salaku judul tina sorts.
<label>s disetel display: inline-blockka ngidinan marginpikeun dilarapkeun.
<input>s, <select>s, <textarea>s, jeung <button>s lolobana kajawab ku Normalize, tapi Reboot ngaluarkeun maranéhanana marginsarta susunan line-height: inherit, teuing.
<textarea>s dirobah jadi ukur bisa resizable vertikal sakumaha horizontal pangaturan ukuran jadi mindeng "megatkeun" perenah kaca.

Parobahan ieu, sareng seueur deui, dipidangkeun di handap.

elemen séjén

Alamat

Unsur <address>ieu diropéa pikeun ngareset standar browser font-styleti italicka normal. line-heightogé ayeuna diwariskeun, sarta margin-bottom: 1remgeus ditambahkeun. <address>s pikeun presenting informasi kontak pikeun karuhun pangcaketna (atawa sakabéh awak karya). Ngajaga pormat ku tungtung garis kalawan <br>.

Twitter, Nyarita
1355 Pasar St, Suite 900
San Fransisco, CA 94103
P: (123) 456-7890

Ngaran lengkep
[email protected]

Blockquote

The standar marginon blockquotes nyaeta 1em 40px, sangkan ngareset éta 0 0 1rempikeun hal anu leuwih konsisten jeung elemen séjén.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a Ante.

Batur kawentar dina Judul Sumber

Unsur Inline

Unsur <abbr>nampi gaya dasar pikeun ngajantenkeun éta menonjol diantara téks paragraf.

Nulla attr vitae elit libero, a pharetra augue.

Ringkesan

The standar cursoron kasimpulan nyaeta text, sangkan ngareset yén pointerpikeun nepikeun yén unsur bisa berinteraksi kalayan ku ngaklik dinya.

Sababaraha rinci

Inpo nu leuwih lengkep tentang detil.

Malah leuwih rinci

Di dieu malah leuwih rinci ngeunaan detil.

`[hidden]`atribut HTML5

HTML5 nambahkeun atribut global anyar ngaranna[hidden] , nu geus styled sakumaha display: nonestandar. Nginjeum ide ti PureCSS , kami ningkatkeun standar ieu ku cara [hidden] { display: none !important; }ngabantosan nyegah displayteu kahaja ditimpa. Sanaos [hidden]henteu dirojong sacara asli ku IE10, deklarasi eksplisit dina CSS kami ngabéréskeun masalah éta.

<input type="text" hidden>

sauyunan jQuery

[hidden]teu cocog jeung jQuery urang $(...).hide()jeung $(...).show()métode. Ku alatan éta, ayeuna urang teu utamana ngesahkeun [hidden]leuwih téhnik séjén pikeun ngatur displayelemen.

Pikeun ngan ukur togél pisibilitas unsur, hartosna displayéta henteu dirobih sareng unsur éta masih tiasa mangaruhan aliran dokumen, anggo .invisiblekelasna .