Source

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 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;

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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in 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 sit amet erat nunc
Eget porttitor lorem

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

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.
Euismod: Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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.

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

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.

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

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.