Reboot

Reboot, ġabra ta 'bidliet CSS speċifiċi għall-element f'fajl wieħed, kickstart Bootstrap biex tipprovdi linja bażi eleganti, konsistenti u sempliċi biex tibni fuqha.

Approċċ

Reboot jibni fuq Normalize, u jipprovdi ħafna elementi HTML bi stili kemmxejn opinjonisti bl-użu biss ta 'seletturi ta' elementi. Grafika addizzjonali ssir biss bil-klassijiet. Pereżempju, aħna nibdew mill-ġdid xi <table>stili għal linja bażi aktar sempliċi u aktar tard nipprovdu .table, .table-bordered, u aktar.

Hawn huma l-linji gwida u r-raġunijiet tagħna biex nagħżlu x'għandu jinqabeż f'Reboot:

Aġġorna xi valuri default tal-brawżer biex tuża rems minflok ems għall-ispazjar tal-komponenti skalabbli.
Evita margin-top. Il-marġini vertikali jistgħu jikkrollaw, u jagħtu riżultati mhux mistennija. Aktar importanti minn hekk, direzzjoni waħda ta ' marginhuwa mudell mentali aktar sempliċi.
Għal skalar aktar faċli fuq id-daqsijiet tal-apparat, l-elementi tal-blokk għandhom jużaw rems għal margins.
Żomm dikjarazzjonijiet ta' fontproprjetajiet relatati għall-minimu, billi tuża inheritkull meta jkun possibbli.

Paġni defaults

L -elementi <html>u <body>huma aġġornati biex jipprovdu defaults aħjar għall-paġna kollha. B'mod aktar speċifiku:

Il box-sizinghuwa globalment stabbilit fuq kull element—inklużi *::beforeu *::after, sa border-box. Dan jiżgura li l-wisa 'ddikjarata tal-element qatt ma tinqabeż minħabba padding jew bordura.
L-ebda bażi font-sizema hija ddikjarata fuq il- <html>, iżda 16pxhija preżunta (il-browser default). font-size: 1remhija applikata fuq <body>it-tip ta' skalar faċli li jirrispondu permezz ta' mistoqsijiet tal-midja filwaqt li tirrispetta l-preferenzi tal-utent u tiżgura approċċ aktar aċċessibbli.
Il <body>jistabbilixxi wkoll globali font-family, line-height, u text-align. Dan jintiret aktar tard minn xi elementi tal-forma biex jipprevjenu inkonsistenzi tat-tipa.
Għas-sigurtà, il- <body>għandu ddikjarat background-color, inadempjenti għal #fff.

Munzell tat-tipa indiġena

Il-fonts tal-web default (Helvetica Neue, Helvetica, u Arial) twaqqgħu f'Bootstrap 4 u sostitwiti b'"munzell ta' font indiġeni" għall-aħjar rendering tat-test fuq kull apparat u OS. Aqra aktar dwar munzelli ta 'font indiġeni f'dan l- artikolu 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;

Innota li minħabba li l-munzell tat-tipa jinkludi fonts emoji, ħafna karattri Unicode tas-simbolu/dingbat komuni se jingħataw bħala pittografi b'ħafna kuluri. Id-dehra tagħhom se tvarja, skont l-istil użat fil-font nattiv tal-emoji tal-browser/pjattaforma, u mhux se jiġu affettwati minn xi colorstili CSS.

Dan font-familyhuwa applikat għall- <body>u awtomatikament wiret globalment matul Bootstrap. Biex taqleb il-globali font-family, aġġorna $font-family-baseu rikompila Bootstrap.

Intestaturi u paragrafi

L-elementi kollha tal-intestatura—eż, <h1>—u <p>huma reset biex margin-topjitneħħew. Żdiedu l-intestaturi margin-bottom: .5remu l-paragrafi margin-bottom: 1remgħal spazjar faċli.

Intestatura	Eżempju
`<h1></h1>`	h1. Intestatura Bootstrap
`<h2></h2>`	h2. Intestatura Bootstrap
`<h3></h3>`	h3. Intestatura Bootstrap
`<h4></h4>`	h4. Intestatura Bootstrap
`<h5></h5>`	h5. Intestatura Bootstrap
`<h6></h6>`	h6. Intestatura Bootstrap

Listi

Il-listi kollha— <ul>, <ol>, u <dl>—tneħħew margin-topu a margin-bottom: 1rem. Listi nested m'għandhom l-ebda margin-bottom.

Il-listi kollha jitneħħew il-marġni ta' fuq
U l-marġni tal-qiegħ tagħhom normalizzat
Listi mdaħħla m'għandhom l-ebda marġni tal-qiegħ
- Dan il-mod ikollhom dehra aktar uniformi
- Partikolarment meta segwit minn aktar oġġetti tal-lista
L-ikkuttunar tax-xellug ġie reset ukoll

Hawnhekk hawn lista ordnata
Bi ftit oġġetti tal-lista
Għandu l-istess dehra ġenerali
Bħala l-lista mhux ordnata preċedenti

Għal stil aktar sempliċi, ġerarkija ċara, u spazjar aħjar, il-listi tad-deskrizzjoni aġġornaw margins. <dd>s reset margin-leftgħal 0u żid margin-bottom: .5rem. <dt>s huma b'tipa grassa .

Listi ta' deskrizzjoni: Lista ta 'deskrizzjoni hija perfetta għad-definizzjoni tat-termini.
Terminu: Definizzjoni għat-terminu.; It-tieni definizzjoni għall-istess terminu.
Terminu ieħor: Definizzjoni għal dan it-terminu l-ieħor.

Test ifformattjat minn qabel

L- <pre>element jiġi reset biex jitneħħa margin-topu juża l- remunitajiet tiegħu margin-bottom.

.example-element {
  marġini-qiegħ: 1rem;
}

Tabelli

Tabelli huma kemmxejn aġġustati għall-istil <caption>s, kollass fruntieri, u jiżguraw konsistenti text-alignmadwar. Bidliet addizzjonali għall-fruntieri, ikkuttunar, u aktar jiġu mal - .tableklassi .

Din hija tabella eżempju, u din hija l-caption tagħha biex tiddeskrivi l-kontenut.
Intestatura tal-mejda	Intestatura tal-mejda	Intestatura tal-mejda	Intestatura tal-mejda
Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda
Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda
Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda

Formoli

Diversi elementi tal-forma ġew rebooted għal stili bażi aktar sempliċi. Hawn huma xi wħud mill-aktar bidliet notevoli:

<fieldset>s m'għandhom l-ebda fruntieri, padding, jew marġini sabiex ikunu jistgħu jintużaw faċilment bħala tgeżwir għal inputs individwali jew gruppi ta 'inputs.
<legend>s, bħal fieldsets, ġew ukoll restyled biex jintwerew bħala intestatura ta 'tip.
<label>s huma stabbiliti biex display: inline-blockjippermettu marginli jiġu applikati.
<input>s, <select>s, <textarea>s, u <button>s huma l-aktar indirizzati minn Normalize, iżda Reboot tneħħi tagħhom marginu settijiet line-height: inherit, ukoll.
<textarea>s huma modifikati biex ikunu jistgħu jinbidlu biss b'mod vertikali peress li d-daqs orizzontali ta 'spiss "tkisser" it-tqassim tal-paġna.
<button>s u l- <input>elementi tal-buttuna għandhom cursor: pointermeta :not(:disabled).

Dawn il-bidliet, u aktar, huma murija hawn taħt.

Pointers fuq buttuni

Reboot jinkludi titjib role="button"biex jibdel il-cursor default għal pointer. Żid dan l-attribut ma' elementi biex tgħin tindika li l-elementi huma interattivi. Dan ir-rwol mhuwiex meħtieġ għall- <button>elementi, li jiksbu l- cursorbidla tagħhom stess.

Buttuna ta 'element mhux buttuna

<span role="button" tabindex="0">Non-button element button</span>

Elementi varji

Indirizz

L- <address>element jiġi aġġornat biex jerġa' jissettja l-default tal-browser font-styleminn italicgħal normal. line-heighthuwa wkoll issa wiret, u margin-bottom: 1remġie miżjud. <address>s huma għall-preżentazzjoni ta 'informazzjoni ta' kuntatt għall-eqreb antenat (jew korp sħiħ ta 'xogħol). Ippreserva l-ifformattjar billi tispiċċa l-linji b' <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Isem sħiħ
[email protected]

Blockquote

Id-default marginfuq blockquotes huwa 1em 40px, għalhekk aħna reset dak 0 0 1remgħal xi ħaġa aktar konsistenti ma 'elementi oħra.

Kwotazzjoni magħrufa sew, li tinsab f'element blockquote.

Xi ħadd famuż fit- Titolu Sors

Elementi inline

L- <abbr>element jirċievi stil bażiku biex jagħmilha jispikka fost it-test tal-paragrafu.

Nulla attr vitae elit libero, a pharetra augue.

Sommarju

Id-default cursorfuq is-sommarju huwa text, għalhekk aħna reset li pointerbiex inwasslu li l-element jista 'jiġi interazzjoni miegħu billi tikklikkja fuqu.

Xi dettalji

Aktar informazzjoni dwar id-dettalji.

Saħansitra aktar dettalji

Hawn huma saħansitra aktar dettalji dwar id-dettalji.

`[hidden]`attribut HTML5

HTML5 iżid attribut globali ġdid bl-isem[hidden] , li huwa mfassal bħala display: noneawtomatikament. Billi nissellef idea minn PureCSS , intejbu dan in-nuqqas billi nagħmlu [hidden] { display: none !important; }biex ngħinu biex jiġi evitat li jiġi displayaċċidentalment overridut. Filwaqt li [hidden]mhix appoġġjata b'mod nattiv minn IE10, id-dikjarazzjoni espliċita fis-CSS tagħna tevita dik il-problema.

<input type="text" hidden>

Inkompatibbiltà jQuery

[hidden]mhix kompatibbli ma 'jQuery $(...).hide()u $(...).show()metodi. Għalhekk, bħalissa ma napprovawx b'mod speċjali [hidden]tekniki oħra għall-ġestjoni displaytal-elementi.

Biex sempliċement taqleb il-viżibilità ta' element, jiġifieri displaymhux immodifikat u l-element xorta jista' jaffettwa l-fluss tad-dokument, uża l- .invisibleklassi minflok.