Restartujte

Reboot, sbírka změn CSS specifických pro jednotlivé prvky v jediném souboru, nastartuje Bootstrap, aby poskytl elegantní, konzistentní a jednoduchý základ, na kterém lze stavět.

Přístup

Reboot staví na Normalize a poskytuje mnoha prvkům HTML poněkud svérázné styly pouze pomocí selektorů prvků. Další styling se provádí pouze u tříd. Například restartujeme některé <table>styly pro jednodušší základní linii a později poskytneme .table, .table-bordered, a další.

Zde jsou naše pokyny a důvody pro výběr toho, co přepsat při restartu:

Aktualizujte některé výchozí hodnoty prohlížeče tak, aby remmísto ems pro škálovatelné rozestupy součástí používaly s.
Vyhněte se margin-top. Svislé okraje se mohou zhroutit a přinést neočekávané výsledky. Ještě důležitější však je, že jeden směr marginje jednodušší mentální model.
Pro snadnější škálování napříč velikostmi zařízení by prvky bloku měly používat rems pro margins.
Omezte deklarace fontsouvisejících vlastností na minimum a používejte je, inheritkdykoli je to možné.

Výchozí nastavení stránky

Prvky <html>a <body>jsou aktualizovány, aby poskytovaly lepší výchozí hodnoty pro celou stránku. Konkrétněji:

Je box-sizingglobálně nastaven na každý prvek – včetně *::beforea *::after, až border-box. To zajišťuje, že deklarovaná šířka prvku nebude nikdy překročena kvůli odsazení nebo ohraničení.
Žádný základ font-sizenení deklarován na <html>, ale 16pxpředpokládá se (výchozí nastavení prohlížeče). font-size: 1remse používá <body>pro snadnou odezvu typového škálování prostřednictvím mediálních dotazů při respektování preferencí uživatelů a zajištění přístupnějšího přístupu.
Také <body>nastavuje globální font-family, line-height, a text-align. To je později zděděno některými prvky formuláře, aby se předešlo nekonzistentnosti písem.
Pro bezpečnost <body>má deklarováno background-color, výchozí je #fff.

Zásobník nativních písem

Výchozí webová písma (Helvetica Neue, Helvetica a Arial) byla z Bootstrapu 4 vypuštěna a nahrazena „nativním zásobníkem písem“ pro optimální vykreslování textu na každém zařízení a operačním systému. Přečtěte si více o nativních sadách písem 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-familyse aplikuje na <body>a automaticky se globálně dědí v celém Bootstrapu. Chcete-li přepnout globální font-family, aktualizujte $font-family-basea znovu zkompilujte Bootstrap.

Nadpisy a odstavce

Všechny prvky nadpisu – např. – a jsou <h1>resetovány <p>, aby byly margin-topodstraněny. Nadpisy byly margin-bottom: .5rempřidány a odstavce margin-bottom: 1rempro snadné vytváření mezer.

Nadpis	Pří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

Seznamy

Všechny seznamy <ul>– , <ol>, a <dl>– mají margin-topodstraněny a margin-bottom: 1rem. Vnořené seznamy 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 vel
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 vel
Aenean sit amet erat nunc
Eget porttitor lorem

Pro jednodušší styl, jasnou hierarchii a lepší rozestupy mají seznamy popisů aktualizované margins. <dd>s resetovat a margin-leftpřidat . s jsou tučně .0margin-bottom: .5rem<dt>

Popisné seznamy: Popisný seznam je ideální pro definování termínů.
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.

Předformátovaný text

Prvek <pre>je resetován, aby byl odstraněn margin-topa použity remjednotky pro jeho margin-bottom.

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

Tabulky

Tabulky jsou mírně upraveny podle stylu <caption>s, sbalí okraje a zajistí konzistentnost text-alignv celém textu. Další změny pro okraje, výplň a další přicházejí s .tabletřídou .

Toto je příklad tabulky a toto je její popisek popisující obsah.
Záhlaví tabulky	Záhlaví tabulky	Záhlaví tabulky	Záhlaví tabulky
Buňka tabulky	Buňka tabulky	Buňka tabulky	Buňka tabulky
Buňka tabulky	Buňka tabulky	Buňka tabulky	Buňka tabulky
Buňka tabulky	Buňka tabulky	Buňka tabulky	Buňka tabulky

formuláře

Pro jednodušší základní styly byly restartovány různé prvky formuláře. Zde jsou některé z nejpozoruhodnějších změn:

<fieldset>s nemají žádné okraje, odsazení ani okraj, takže je lze snadno použít jako obaly pro jednotlivé vstupy nebo skupiny vstupů.
<legend>s, stejně jako sady polí, byly také upraveny tak, aby se zobrazovaly jako nadpisy druhů.
<label>s jsou nastaveny na display: inline-block, aby bylo marginmožné je použít.
<input>s, <select>s, <textarea>sa <button>většinou řeší Normalize, ale Reboot odstraní i jejich margina nastaví line-height: inherit.
<textarea>s jsou upraveny tak, aby bylo možné měnit velikost pouze vertikálně, protože horizontální změna velikosti často „přerušuje“ rozvržení stránky.
<button>s a <input>tlačítkové prvky mají cursor: pointerkdyž :not(:disabled).

Tyto a další změny jsou uvedeny níže.

Ukazatele na tlačítkách

Reboot obsahuje vylepšení pro role="button"změnu výchozího kurzoru na pointer. Přidejte tento atribut k prvkům, abyste mohli označit prvky, že jsou interaktivní. Tato role není nutná pro <button>prvky, které dostanou svou vlastní cursorzměnu.

Tlačítko prvku bez tlačítka

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

Různé prvky

Adresa

Prvek <address>je aktualizován tak, aby obnovil výchozí nastavení prohlížeče font-stylez italicna normal. line-heightje také nyní zděděno a margin-bottom: 1rembylo přidáno. <address>s slouží k prezentaci kontaktních informací na nejbližšího předka (nebo celého souboru práce). Zachovejte formátování zakončením řádků <br>.

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

Celé jméno
[email protected]

Blockquote

Výchozí marginu blockquotes je 1em 40px, takže jsme to resetovali na 0 0 1remněco, co je konzistentnější s ostatními prvky.

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

Někdo slavný v Source Title

Inline prvky

Prvek <abbr>obdrží základní styl, aby vynikl mezi odstavcovým textem.

Nulla attr vitae elitní libero, pharetra augue.

souhrn

Výchozí hodnota cursorsouhrnu je text, takže jsme to resetovali na, pointerabychom sdělili, že s prvkem lze interagovat kliknutím na něj.

Nějaké detaily

Více informací o detailech.

Ještě více detailů

Zde jsou ještě další podrobnosti o detailech.

`[hidden]`Atribut HTML5

HTML5 přidává nový globální atribut s názvem[hidden] , který je nastaven jako display: nonevýchozí. Vypůjčením nápadu od PureCSS jsme toto výchozí nastavení vylepšili tím, že [hidden] { display: none !important; }pomáháme zabránit jeho displaynáhodnému přepsání. I když [hidden]není nativně podporován IE10, explicitní deklarace v našem CSS tento problém řeší.

<input type="text" hidden>

nekompatibilita jQuery

[hidden]není kompatibilní s jQuery $(...).hide()a $(...).show()metodami. Proto v současnosti nepodporujeme [hidden]jiné techniky pro správu displayprvků.

Chcete-li pouze přepnout viditelnost prvku, což znamená, že displayse nemění a prvek může stále ovlivňovat tok dokumentu, použijte místo toho .invisibletřídu .