Source

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ždý prvok – vrátane *::beforea *::after, doborder-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 Bootstrap 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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Toto font-familysa aplikuje na <body>a automaticky sa dedí globálne v rámci Bootstrapu. 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 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.

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). Zachovajte formátovanie tak, že riadky ukončíte znakom <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 adds a new global attribute named [hidden], which is styled as display: none by default. Borrowing an idea from PureCSS, we improve upon this default by making [hidden] { display: none !important; } to help prevent its display from getting accidentally overridden. While [hidden] isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.

<input type="text" hidden>

jQuery incompatibility

[hidden] is not compatible with jQuery’s $(...).hide() and $(...).show() methods. Therefore, we don’t currently especially endorse [hidden] over other techniques for managing the display of elements.

To merely toggle the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document, use the .invisible class instead.