Reštartovať

Reboot, zbierka zmien CSS špecifických pre jednotlivé prvky v jednom súbore, naštartuje Bootstrap, aby poskytol elegantnú, konzistentnú a jednoduchú základňu, na ktorej sa dá stavať.

Prístup

Reboot stavia na Normalize a poskytuje mnohým prvkom HTML trochu svojrázne štýly pomocou iba selektorov prvkov. Dodatočný štýl sa vykonáva iba s triedami. Napríklad reštartujeme niektoré <table>štýly pre jednoduchšiu základnú líniu a neskôr poskytneme .table, .table-bordered, a ďalšie.

Tu sú naše pokyny a dôvody pre výber toho, čo prepísať pri reštarte:

Aktualizujte niektoré predvolené hodnoty prehliadača tak, aby používali rems namiesto ems pre škálovateľné rozstupy komponentov.
Vyhnite sa margin-top. Vertikálne okraje sa môžu zrútiť a priniesť neočakávané výsledky. Čo je však dôležitejšie, jeden smer marginje jednoduchší mentálny model.
Pre jednoduchšie škálovanie medzi veľkosťami zariadení by prvky bloku mali používať rems ako margins.
Udržujte deklarácie fontsúvisiacich vlastností na minime a používajte ich inheritvždy, keď je to možné.

Predvolené nastavenia stránky

Prvky <html>a <body>sú aktualizované, aby poskytovali lepšie predvolené hodnoty pre celú stránku. Konkrétnejšie:

Je box-sizingglobálne nastavený na každom prvku – vrátane *::beforea *::after, až border-box. To zaisťuje, že deklarovaná šírka prvku nebude nikdy prekročená kvôli výplni alebo okraju.
Žiadna základňa nie font-sizeje deklarovaná na <html>, ale 16pxpredpokladá sa (predvolené nastavenie prehliadača). font-size: 1remje aplikovaný na <body>pre jednoduché a citlivé škálovanie typu prostredníctvom mediálnych dopytov pri rešpektovaní preferencií používateľov a zabezpečení prístupnejšieho prístupu.
Tiež <body>nastavuje globálne font-family, line-height, a text-align. Toto neskôr zdedia niektoré prvky formulára, aby sa predišlo nekonzistentnosti písma.
Pre bezpečnosť <body>má deklarované background-color, pričom predvolená hodnota je #fff.

Natívny zásobník písiem

Predvolené webové fonty (Helvetica Neue, Helvetica a Arial) boli v Bootstrape 4 vypustené a nahradené „natívnou hromadou fontov“ pre optimálne vykresľovanie textu na každom zariadení a OS. Prečítajte si viac o natívnych zásobníkoch písiem v tomto článku časopisu 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;

Upozorňujeme, že pretože zásobník písiem obsahuje písma emoji, mnohé bežné znaky Unicode symbolov/dingbat sa vykreslia ako viacfarebné piktogramy. Ich vzhľad sa bude líšiť v závislosti od štýlu použitého v natívnom písme emoji prehliadača/platformy a nebudú ovplyvnené žiadnymi colorštýlmi CSS.

Toto font-familysa aplikuje na <body>a automaticky sa dedí globálne cez Bootstrap. Ak chcete prepnúť globálne font-family, aktualizujte $font-family-basea prekompilujte Bootstrap.

Nadpisy a odseky

Všetky prvky nadpisu – napr. – a sú <h1>resetované <p>, aby boli margin-topodstránené. Nadpisy boli margin-bottom: .5rempridané a odseky margin-bottom: 1rempre jednoduché vytváranie medzier.

Smerovanie	Príklad
`<h1></h1>`	h1. Bootstrap nadpis
`<h2></h2>`	h2. Bootstrap nadpis
`<h3></h3>`	h3. Bootstrap nadpis
`<h4></h4>`	h4. Bootstrap nadpis
`<h5></h5>`	h5. Bootstrap nadpis
`<h6></h6>`	h6. Bootstrap nadpis

zoznamy

Všetky zoznamy <ul>— , <ol>, a <dl>—majú margin-topodstránené a margin-bottom: 1rem. Vnorené zoznamy nemajú margin-bottom.

Všetky zoznamy majú odstránený horný okraj
A ich spodný okraj sa znormalizoval
Vnorené zoznamy nemajú spodný okraj
- Takto majú rovnomernejší vzhľad
- Najmä ak za nimi nasledujú ďalšie položky zoznamu
Ľavá výplň bola tiež resetovaná

Tu je zoradený zoznam
S niekoľkými položkami zoznamu
Má rovnaký celkový vzhľad
Ako predchádzajúci neusporiadaný zoznam

Pre jednoduchší štýl, jasnú hierarchiu a lepšie rozstupy majú zoznamy popisov aktualizované margins. <dd>s resetovať a margin-leftpridať . s sú tučné .0margin-bottom: .5rem<dt>

Popisné zoznamy: Zoznam popisov je ideálny na definovanie výrazov.
Termín: Definícia pojmu.; Druhá definícia toho istého pojmu.
Ďalší termín: Definícia tohto iného pojmu.

Predformátovaný text

Prvok <pre>sa resetuje, aby sa odstránil jeho prvok margin-topa použil sa rempreň jednotky margin-bottom.

.example-element {
  okraj-dole: 1rem;
}

Tabuľky

Tabuľky sú mierne upravené na štýl <caption>s, zbalia okraje a zabezpečia konzistentnosť text-alignv celom texte. S .tabletriedou prichádzajú ďalšie zmeny okrajov, výplne a ďalšie .

Toto je príklad tabuľky a toto je jej popis na popis obsahu.
Záhlavie tabuľky	Záhlavie tabuľky	Záhlavie tabuľky	Záhlavie tabuľky
Bunka tabuľky	Bunka tabuľky	Bunka tabuľky	Bunka tabuľky
Bunka tabuľky	Bunka tabuľky	Bunka tabuľky	Bunka tabuľky
Bunka tabuľky	Bunka tabuľky	Bunka tabuľky	Bunka tabuľky

Formuláre

Rôzne prvky formulára boli reštartované pre jednoduchšie základné štýly. Tu sú niektoré z najpozoruhodnejších zmien:

<fieldset>s nemajú žiadne okraje, vypchávky ani okraje, takže ich možno ľahko použiť ako obaly pre jednotlivé vstupy alebo skupiny vstupov.
<legend>s, rovnako ako sady polí, boli tiež preštylizované tak, aby sa zobrazovali ako nadpisy.
<label>s sú nastavené na display: inline-block, aby bolo marginmožné ich použiť.
<input>S, <select>s, <textarea>s a <button>s väčšinou rieši Normalize, ale Reboot odstráni aj ich margina nastaví line-height: inherit.
<textarea>s sú upravené tak, aby sa ich veľkosť dala meniť iba vertikálne, pretože horizontálna zmena veľkosti často „prerušuje“ rozloženie strany.
<button>s a <input>tlačidlové prvky majú cursor: pointerkeď :not(:disabled).

Tieto a ďalšie zmeny sú uvedené nižšie.

Ukazovatele na tlačidlách

Reboot obsahuje vylepšenie pre role="button"zmenu predvoleného kurzora na pointer. Pridajte tento atribút k prvkom, aby ste mohli indikovať, že prvky sú interaktívne. Táto rola nie je potrebná pre <button>prvky, ktoré dostávajú svoju vlastnú cursorzmenu.

Beztlačidlové tlačidlo prvku

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

Rôzne prvky

Adresa

Prvok <address>sa aktualizuje tak, aby obnovil predvolené nastavenie prehliadača font-stylez italicna normal. line-heightje tiež teraz zdedený a margin-bottom: 1rembol pridaný. <address>s sú na prezentovanie kontaktných informácií na najbližšieho predka (alebo celého súboru práce). Zachovať formátovanie ukončením riadkov s <br>.

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

Celé meno
[email protected]

Blockquote

Predvolená hodnota marginpre blokové úvodzovky je 1em 40px, takže sme to resetovali 0 0 1remna niečo viac konzistentné s ostatnými prvkami.

Známy citát obsiahnutý v prvku blockquote.

Niekto slávny v Source Title

Inline prvky

Prvok <abbr>dostane základný štýl, aby vynikol medzi odsekovým textom.

Nulla attr vitae elit libero, pharetra augue.

Zhrnutie

Predvolená hodnota cursorpre súhrn je text, takže sme to resetovali na, aby sme pointervyjadrili, že s prvkom možno interagovať kliknutím naň.

Niektoré detaily

Viac informácií o detailoch.

Ešte viac detailov

Tu sú ešte ďalšie podrobnosti o detailoch.

`[hidden]`atribút HTML5

HTML5 pridáva nový globálny atribút s názvom[hidden] , ktorý má display: noneštandardný štýl. Požičaním nápadu od PureCSS sme toto predvolené nastavenie vylepšili tým, že [hidden] { display: none !important; }zabránime jeho displaynáhodnému prepísaniu. Hoci [hidden]IE10 natívne nepodporuje, explicitná deklarácia v našom CSS tento problém rieši.

<input type="text" hidden>

nekompatibilita jQuery

[hidden]nie je kompatibilný s jQuery $(...).hide()a $(...).show()metódami. Preto v súčasnosti zvlášť nepodporujeme [hidden]iné techniky na správu displayprvkov.

Ak chcete iba prepínať viditeľnosť prvku, čo znamená, že displaynie je upravený a prvok môže stále ovplyvňovať tok dokumentu, použite namiesto toho triedu .invisible.