in English

Reštartovať

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

Prístup

Reboot stavia na Normalize a poskytuje mnohým prvkom HTML trochu svojrázne štýly iba pomocou 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 na výber toho, čo sa má pri reštarte prepísať:

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",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elita
Integer molestie lorem at massa
Facilisis v 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 veľ
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elita
Integer molestie lorem at massa
Facilisis v pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla veľ
Aenean sit amet erat nunc
Eget porttitor lorem

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.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
Porta Malesuada: Etiam porta sem malesuada magna mollis euismod.

Predformátovaný text

Prvok <pre>sa resetuje, aby sa odstránil jeho prvok a aby sa naň margin-toppoužili remjednotky 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ť len 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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante.

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 tak, ž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.