in English

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

Ņemiet vērā: tā kā fontu kaudze ietver emocijzīmju fontus, daudzas izplatītas simbolu/dingbat unikoda rakstzīmes tiks atveidotas kā daudzkrāsainas piktogrammas. To izskats var atšķirties atkarībā no stila, kas tiek izmantots pārlūkprogrammas/platformas vietējā emocijzīmju fontā, un tos neietekmēs nekādi CSS colorstili.

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.

Visiem sarakstiem ir noņemta augšējā piemale
Un to apakšējā robeža normalizējās
Ligzdotajiem sarakstiem nav apakšējās malas
- Tādā veidā tiem ir vienmērīgāks izskats
- Īpaši tad, ja tam seko vairāk saraksta vienumu
Arī kreisais polsterējums ir atiestatīts

Šeit ir sakārtots saraksts
Ar dažiem saraksta elementiem
Tam ir tāds pats kopējais izskats
Tāpat kā iepriekšējais nesakārtotais saraksts

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.
Jēdziens: Termina definīcija.; Otra definīcija šim pašam terminam.
Vēl viens termins: Šī cita termina definīcija.

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.

Norādes uz pogām

Reboot ietver uzlabojumu, role="button"lai mainītu noklusējuma kursoru uz pointer. Pievienojiet šo atribūtu elementiem, lai palīdzētu norādīt, ka elementi ir interaktīvi. Šī loma nav nepieciešama <button>elementiem, kas paši cursormainās.

Bezpogu elementa poga

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

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.

Labi zināms citāts, kas ietverts blockquote elementā.

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 .