Source

Restartujte

Reboot, sbírka změn CSS specifických pro 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 zabránilo 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 v 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 OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (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-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.
<label>s jsou nastaveny na display: inline-block, aby bylo marginmožné je použít.
<input>s, <select>s, <textarea>s, and <button>s are mostly addressed by Normalize, but Reboot removes their margin and sets line-height: inherit, too.
<textarea>s are modified to only be resizable vertically as horizontal resizing often “breaks” page layout.

These changes, and more, are demonstrated below.

Misc elements

Address

The <address> element is updated to reset the browser default font-style from italic to normal. line-height is also now inherited, and margin-bottom: 1rem has been added. <address>s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with <br>.

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

Full Name
[email protected]

Blockquote

The default margin on blockquotes is 1em 40px, so we reset that to 0 0 1rem for something more consistent with other elements.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Inline elements

The <abbr> element receives basic styling to make it stand out amongst paragraph text.

Nulla attr vitae elit libero, a pharetra augue.

Summary

The default cursor on summary is text, so we reset that to pointer to convey that the element can be interacted with by clicking on it.

Some details

More info about the details.

Even more details

Here are even more details about the details.

HTML5 `[hidden]` attribute

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.