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 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, 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
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. 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.
  • <button>s u l- <input>elementi tal-buttuna għandhom cursor: pointermeta :not(:disabled).

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

Eżempju leġġenda

100

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.