Source

Reboot

Reboot — elementiem raksturīgu CSS izmaiņu kolekcija vienā failā — palaidiet Bootstrap, lai nodrošinātu elegantu, konsekventu un vienkāršu bāzes līniju, uz kuras balstīties.

Pieeja

Atsāknēšana balstās uz Normalize, nodrošinot daudzus HTML elementus ar zināmā mērā pārdomātiem stiliem, izmantojot tikai elementu atlasītājus. Papildu stils tiek veikts tikai ar klasēm. Piemēram, mēs atsāknējam dažus <table>stilus, lai iegūtu vienkāršāku bāzes līniju, un vēlāk nodrošinām .table, .table-bordered, un citus.

Tālāk ir sniegtas mūsu vadlīnijas un iemesli, kādēļ izvēlēties, ko ignorēt iestatījumā Reboot.

Atjauniniet dažas pārlūkprogrammas noklusējuma vērtības, lai mērogojamu komponentu atstarpēm izmantotu rems, nevis s.em
Izvairieties margin-top. Vertikālās piemales var sabrukt, radot negaidītus rezultātus. Tomēr vēl svarīgāk ir tas, ka viens virziens marginir vienkāršāks garīgais modelis.
Lai atvieglotu mērogošanu starp ierīču izmēriem, bloku elementos s ir jāizmanto rems margin.
Samaziniet ar saistīto rekvizītu deklarāciju skaitu fontlīdz minimumam, izmantojot, inheritkad vien iespējams.

Lapas noklusējuma iestatījumi

Elementi <html>un <body>ir atjaunināti, lai nodrošinātu labākus visas lapas noklusējuma iestatījumus. Konkrētāk:

Ir box-sizingglobāli iestatīts katram elementam, tostarp *::beforeun *::after, uz border-box. Tas nodrošina, ka deklarētais elementa platums nekad netiek pārsniegts polsterējuma vai apmales dēļ.
Nekāda bāze font-sizenav deklarēta <html>, bet 16pxtiek pieņemta (pārlūka noklusējuma iestatījums). font-size: 1remtiek izmantots, <body>lai viegli reaģētu tipa mērogošana, izmantojot multivides vaicājumus, vienlaikus ievērojot lietotāju preferences un nodrošinot pieejamāku pieeju.
Arī <body>nosaka globālo font-family, line-heightun text-align. To vēlāk pārmanto daži formas elementi, lai novērstu fontu nekonsekvenci.
Drošības nolūkos <body>ir norādīts background-color, ka noklusējuma vērtība ir #fff.

Vietējā fontu kaudze

Noklusējuma tīmekļa fonti (Helvetica Neue, Helvetica un Arial) ir atcelti programmā Bootstrap 4 un aizstāti ar “vietējo fontu steku”, lai nodrošinātu optimālu teksta atveidi katrā ierīcē un operētājsistēmā. Plašāku informāciju par vietējo fontu kaudzēm lasiet šajā Smashing Magazine rakstā .

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

Tas font-familytiek piemērots <body>un automātiski mantots globāli visā Bootstrap. Lai pārslēgtu globālo font-family, atjauniniet $font-family-baseun atkārtoti kompilējiet Bootstrap.

Virsraksti un rindkopas

Visi virsraksta elementi, piemēram, <h1>un <p>tiek atiestatīti, lai tos margin-topnoņemtu. Ir pievienoti virsraksti margin-bottom: .5remun rindkopas margin-bottom: 1rem, lai atvieglotu atstarpi.

Virsraksts	Piemērs
`<h1></h1>`	h1. Bootstrap virsraksts
`<h2></h2>`	h2. Bootstrap virsraksts
`<h3></h3>`	h3. Bootstrap virsraksts
`<h4></h4>`	h4. Bootstrap virsraksts
`<h5></h5>`	h5. Bootstrap virsraksts
`<h6></h6>`	h6. Bootstrap virsraksts

Saraksti

Visiem sarakstiem <ul>— , <ol>, un <dl>— ir margin-topnoņemti un ir margin-bottom: 1rem. Ligzdotajos sarakstos nav margin-bottom.

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

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

Lai nodrošinātu vienkāršāku stilu, skaidru hierarhiju un labāku atstarpi, aprakstu saraksti ir atjaunināti margin. <dd>s atiestatīt un margin-leftpievienot . s ir treknrakstā .0margin-bottom: .5rem<dt>

Aprakstu saraksti: Aprakstu saraksts ir lieliski piemērots terminu definēšanai.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida un eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

Iepriekš formatēts teksts

Elements <pre>tiek atiestatīts, lai to noņemtu margin-topun tam izmantotu remvienības margin-bottom.

.example-element {
  mala-apakšā: 1rem;
}

Tabulas

Tabulas ir nedaudz pielāgotas stilam <caption>s, sakļautas apmales un nodrošināta konsekvence text-alignvisā. Papildu izmaiņas apmalēm, polsterējumam un citam saturam ir iekļautas .tableklasē .

Šis ir tabulas piemērs, un šis ir tās paraksts, lai aprakstītu saturu.
Tabulas virsraksts	Tabulas virsraksts	Tabulas virsraksts	Tabulas virsraksts
Tabulas šūna	Tabulas šūna	Tabulas šūna	Tabulas šūna
Tabulas šūna	Tabulas šūna	Tabulas šūna	Tabulas šūna
Tabulas šūna	Tabulas šūna	Tabulas šūna	Tabulas šūna

Veidlapas

Dažādi formas elementi ir pārstartēti vienkāršākiem bāzes stiliem. Šeit ir dažas no visievērojamākajām izmaiņām:

<fieldset>s nav apmaļu, polsterējuma vai piemales, tāpēc tos var viegli izmantot kā atsevišķu ievadu vai ievades grupu iesaiņojumus.
<legend>s, tāpat kā lauku kopas, arī ir pārveidotas, lai tās tiktu parādītas kā sava veida virsraksti.
<label>s ir iestatīti uz, display: inline-blocklai ļautu marginto lietot.
<input>s, <select>s, <textarea>s un <button>s galvenokārt risina Normalize, bet Reboot noņem tos marginun nosaka line-height: inheritarī .
<textarea>s ir modificēti, lai to izmērus varētu mainīt tikai vertikāli, jo horizontālā izmēra maiņa bieži vien “salauž” lapas izkārtojumu.
<button>s un <input>pogu elementiem ir cursor: pointer, kad :not(:disabled).

Šīs un citas izmaiņas ir parādītas tālāk.

Dažādi elementi

Adrese

Elements <address>tiek atjaunināts, lai atiestatītu pārlūkprogrammas noklusējuma iestatījumus font-styleno italicuz normal. line-heighttagad ir arī mantots un margin-bottom: 1remir pievienots. <address>s ir paredzēti tuvākā senča (vai visa darba kopuma) kontaktinformācijas uzrādīšanai. Saglabājiet formatējumu, rindiņas beidzot ar <br>.

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

Pilns vārds
[email protected]

Blockquote

Blockquotes noklusējuma iestatījums marginir 1em 40px, tāpēc mēs to atiestatām, lai 0 0 1remiegūtu vairāk atbilstības citiem elementiem.

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

Kāds slavens avota nosaukumā

Iekļautie elementi

Elementam <abbr>tiek piešķirts pamata stils, lai tas izceltos starp rindkopas tekstu.

Nulla attr vitae elit libero, a pharetra augue.

Kopsavilkums

Kopsavilkuma noklusējuma cursorvērtība ir text, tāpēc mēs to atiestatām uz, pointerlai norādītu, ka elementu var mijiedarboties, noklikšķinot uz tā.

Dažas detaļas

Vairāk informācijas par detaļām.

Vēl sīkāka informācija

Šeit ir vēl sīkāka informācija par detaļām.

HTML5 `[hidden]`atribūts

HTML5 pievieno jaunu globālo atribūtu ar nosaukumu[hidden]display: none , kas pēc noklusējuma tiek veidots kā stils . Aizņemoties ideju no PureCSS , mēs uzlabojam šo noklusējuma iestatījumu, [hidden] { display: none !important; }palīdzot novērst tās displaynejaušu ignorēšanu. Lai gan [hidden]IE10 to sākotnēji neatbalsta, mūsu CSS precīzā deklarācija novērš šo problēmu.

<input type="text" hidden>

jQuery nesaderība

[hidden]nav saderīgs ar jQuery $(...).hide()un $(...).show()metodēm. Tāpēc mēs pašlaik īpaši neatbalstām [hidden]citus elementu pārvaldības paņēmienus display.

Lai vienkārši pārslēgtu elementa redzamību, kas nozīmē, ka displaytas netiek mainīts un elements joprojām var ietekmēt dokumenta plūsmu, izmantojiet .invisibleklasi .