Znova zaženite

Reboot, zbirka sprememb CSS, specifičnih za element v eni sami datoteki, zažene Bootstrap, da zagotovi elegantno, dosledno in preprosto osnovo, na kateri lahko nadgradite.

Pristop

Reboot nadgrajuje Normalize in ponuja številne elemente HTML z nekoliko samozavestnimi slogi z uporabo samo izbirnikov elementov. Dodaten styling se izvaja samo z razredi. Na primer, znova zaženemo nekatere <table>sloge za enostavnejšo osnovo in pozneje zagotovimo .table, .table-borderedin še več.

Tu so naše smernice in razlogi za izbiro, kaj preglasiti pri ponovnem zagonu:

Posodobite nekatere privzete vrednosti brskalnika, da uporabite rems namesto ems za razširljiv razmik komponent.
Izogibajte se margin-top. Navpični robovi se lahko zrušijo, kar povzroči nepričakovane rezultate. Še pomembneje pa je, da je ena smer marginenostavnejši mentalni model.
Za lažje skaliranje po velikostih naprav morajo blokovni elementi uporabljati rems namesto margins.
Izjave o fontlastnostih, povezanih z -, naj bodo čim manjše in jih uporabite, inheritkadar koli je to mogoče.

Privzete nastavitve strani

Elementi <html>in <body>so posodobljeni, da zagotovijo boljše privzete nastavitve za celotno stran. Natančneje:

Je box-sizingglobalno nastavljen za vsak element – vključno z *::beforein *::afterdo border-box. To zagotavlja, da deklarirana širina elementa ni nikoli presežena zaradi oblazinjenja ali obrobe.
Nobena osnova font-sizeni deklarirana na <html>, ampak 16pxse predpostavlja (privzeta nastavitev brskalnika). font-size: 1remse uporablja na <body>za enostavno odzivno skaliranje tipov prek medijskih poizvedb ob spoštovanju uporabniških nastavitev in zagotavljanju bolj dostopnega pristopa.
Nastavi tudi <body>globalne font-family, line-height, in text-align. To pozneje podedujejo nekateri elementi obrazca, da preprečijo nedoslednosti pisav.
Zaradi varnosti <body>ima deklarirano background-color, privzeto je #fff.

Izvorni sklad pisav

Privzete spletne pisave (Helvetica Neue, Helvetica in Arial) so bile opuščene v Bootstrap 4 in nadomeščene z »nativnim skladom pisav« za optimalno upodabljanje besedila v vsaki napravi in OS. Preberite več o izvornih skladih pisav v tem članku revije 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;

Upoštevajte, da bo veliko pogostih simbolov/dingbat znakov Unicode, ker sklad pisav vključuje pisave emodžijev, upodobljenih kot večbarvni piktogrami. Njihov videz se bo razlikoval glede na slog, uporabljen v izvorni pisavi emojijev brskalnika/platforme, in nanje ne bodo vplivali nobeni colorslogi CSS.

To font-familyvelja za <body>in samodejno podedovano globalno v celotnem Bootstrapu. Če želite preklopiti globalno font-family, posodobite $font-family-basein znova prevedite Bootstrap.

Naslovi in odstavki

Vsi elementi naslova – npr. <h1>– in <p>so ponastavljeni, da jih margin-topodstranimo. Dodani so margin-bottom: .5remnaslovi in odstavki margin-bottom: 1remza lažji razmik.

Naslov	Primer
`<h1></h1>`	h1. Naslov Bootstrap
`<h2></h2>`	h2. Naslov Bootstrap
`<h3></h3>`	h3. Naslov Bootstrap
`<h4></h4>`	h4. Naslov Bootstrap
`<h5></h5>`	h5. Naslov Bootstrap
`<h6></h6>`	h6. Naslov Bootstrap

Seznami

Vsi seznami – <ul>, <ol>in <dl>– so margin-topodstranjeni in margin-bottom: 1rem. Ugnezdeni seznami nimajo margin-bottom.

Vsem seznamom je odstranjen zgornji rob
In njihova spodnja meja se je normalizirala
Ugnezdeni seznami nimajo spodnjega roba
- Tako imajo bolj enakomeren videz
- Še posebej, če mu sledi več elementov seznama
Ponastavljeno je bilo tudi levo oblazinjenje

Tukaj je urejen seznam
Z nekaj točkami seznama
Ima enak splošni videz
Kot prejšnji neurejen seznam

Za preprostejši slog, jasno hierarhijo in boljši razmik so seznami opisov posodobljeni margins. <dd>ponastavite margin-leftin 0dodajte margin-bottom: .5rem. <dt>s so krepko .

Seznami opisov: Opisni seznam je kot nalašč za definiranje izrazov.
Izraz: Opredelitev pojma.; Druga definicija za isti izraz.
Še en izraz: Opredelitev tega drugega izraza.

Vnaprej oblikovano besedilo

Element <pre>se ponastavi, da se odstrani margin-topin uporabi remenote za svoj margin-bottom.

.example-element {
  rob-spodaj: 1rem;
}

Mize

Tabele so nekoliko prilagojene slogu <caption>s, strnjene meje in zagotavljajo doslednost text-alignv celotnem besedilu. Dodatne spremembe za obrobe, oblazinjenje in drugo prihajajo z .tablerazredom .

To je primer tabele in to je njen naslov za opis vsebine.
Naslov tabele	Naslov tabele	Naslov tabele	Naslov tabele
Celica tabele	Celica tabele	Celica tabele	Celica tabele
Celica tabele	Celica tabele	Celica tabele	Celica tabele
Celica tabele	Celica tabele	Celica tabele	Celica tabele

Obrazci

Različni elementi obrazca so bili znova zagnani za enostavnejše osnovne sloge. Tukaj je nekaj najbolj opaznih sprememb:

<fieldset>nimajo robov, oblazinjenja ali robov, zato jih je mogoče enostavno uporabiti kot ovoje za posamezne vnose ali skupine vnosov.
<legend>s, tako kot nabori polj, so bili prav tako spremenjeni, da so prikazani kot nekakšen naslov.
<label>s so nastavljeni tako, display: inline-blockda omogočajo marginuporabo.
<input>s, <select>s, <textarea>s in <button>s večinoma obravnava Normalize, vendar Reboot odstrani tudi njihove marginin nastavi line-height: inherit.
<textarea>so spremenjeni tako, da jih je mogoče spreminjati samo navpično, saj horizontalno spreminjanje velikosti pogosto "pokvari" postavitev strani.
<button>s in <input>elementi gumbov imajo cursor: pointerko :not(:disabled).

Te in druge spremembe so prikazane spodaj.

Kazalci na gumbih

Ponovni zagon vključuje izboljšavo za role="button"spremembo privzetega kazalca v pointer. Dodajte ta atribut elementom, da boste lažje označili, da so elementi interaktivni. Ta vloga ni potrebna za <button>elemente, ki dobijo lastno cursorspremembo.

Gumb elementa brez gumba

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

Razni elementi

Naslov

Element <address>je posodobljen za ponastavitev privzete nastavitve brskalnika font-stylez italicna normal. line-heightje tudi zdaj podedovan in margin-bottom: 1remje bil dodan. <address>so za predstavitev kontaktnih informacij za najbližjega prednika (ali celotnega dela). Ohranite oblikovanje tako, da končate vrstice z <br>.

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

Polno ime
[email protected]

Blockquote

Privzeto marginza narekovaje je 1em 40px, zato smo to ponastavili na 0 0 1remnekaj, kar je bolj skladno z drugimi elementi.

Dobro znani citat, vsebovan v elementu blockquote.

Nekdo znan v naslovu vira

Inline elementi

Element <abbr>prejme osnovni slog, da izstopa med besedilom odstavka.

Nulla attr vitae elit libero, a pharetra augue.

Povzetek

Privzeta vrednost cursorza povzetek je text, zato smo to ponastavili na, pointerda sporočimo, da je z elementom mogoče komunicirati s klikom nanj.

Nekaj podrobnosti

Več informacij o podrobnostih.

Še več podrobnosti

Tukaj je še več podrobnosti o podrobnostih.

`[hidden]`atribut HTML5

HTML5 doda nov globalni atribut z imenom[hidden]display: none , ki je privzeto oblikovan kot . Z izposojo ideje od PureCSS izboljšamo to privzeto vrednost tako, [hidden] { display: none !important; }da pomagamo preprečiti njeno displaynenamerno preglasitev. Čeprav [hidden]ga IE10 ne podpira izvorno, izrecna deklaracija v našem CSS odpravi to težavo.

<input type="text" hidden>

Nezdružljivost jQuery

[hidden]ni združljiv z jQuery $(...).hide()in $(...).show()metodami. Zato trenutno ne podpiramo posebej [hidden]drugih tehnik za upravljanje displayelementov.

Če želite samo preklopiti vidnost elementa, kar pomeni, da displayni spremenjen in lahko element še vedno vpliva na potek dokumenta, namesto tega uporabite .invisiblerazred .