in English

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.

Na této straně

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é.

CSS proměnné

Přidáno ve verzi 5.1.1

Ve verzi 5.1.1 jsme standardizovali naše požadované @imports ve všech našich balících CSS (včetně bootstrap.css, bootstrap-reboot.css, a bootstrap-grid.cssto včetně _root.scss. To přidává :rootproměnné CSS úrovně do všech balíčků, bez ohledu na to, kolik z nich je v tomto balíčku použito. Bootstrap 5 bude i nadále zobrazit další proměnné CSS přidané v průběhu času.

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. Toto výchozí nastavení prohlížeče lze přepsat úpravou $font-size-rootproměnné.
Také <body>nastaví globální font-family, font-weight, line-heighta color. 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

Bootstrap využívá „nativní zásobník písem“ nebo „zásobník systémových písem“ pro optimální vykreslování textu na každém zařízení a operačním systému. Tato systémová písma byla navržena speciálně s ohledem na dnešní zařízení, s vylepšeným vykreslováním na obrazovkách, podporou proměnných písem a dalšími. 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:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // 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;

Všimněte si, že protože zásobník písem obsahuje písma emoji, mnoho běžných znaků unicode symbolů/dingbat bude vykresleno jako vícebarevné piktogramy. Jejich vzhled se bude lišit v závislosti na stylu použitém v nativním písmu emoji prohlížeče/platformy a nebudou ovlivněny žádnými colorstyly CSS.

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.

CSS proměnné

Jak Bootstrap 5 stále dospívá, bude stále více stylů vytvářeno s proměnnými CSS jako prostředek k poskytování většího přizpůsobení v reálném čase bez nutnosti vždy znovu kompilovat Sass. Náš přístup spočívá v tom, že vezmeme naše zdrojové proměnné Sass a transformujeme je na proměnné CSS. Tímto způsobem, i když nepoužíváte proměnné CSS, stále máte veškerou sílu Sass. Toto je stále ve vývoji a jeho úplná implementace bude nějakou dobu trvat.

Zvažte například tyto :rootproměnné CSS pro běžné <body>styly:

  @if $font-size-root != null {
    --#{$variable-prefix}root-font-size: #{$font-size-root};
  }
  --#{$variable-prefix}body-font-family: #{$font-family-base};
  --#{$variable-prefix}body-font-size: #{$font-size-base};
  --#{$variable-prefix}body-font-weight: #{$font-weight-base};
  --#{$variable-prefix}body-line-height: #{$line-height-base};
  --#{$variable-prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$variable-prefix}body-text-align: #{$body-text-align};
  }
  --#{$variable-prefix}body-bg: #{$body-bg};

V praxi se pak tyto proměnné použijí v Rebootu takto:

body {
  margin: 0; // 1
  font-family: var(--#{$variable-prefix}body-font-family);
  @include font-size(var(--#{$variable-prefix}body-font-size));
  font-weight: var(--#{$variable-prefix}body-font-weight);
  line-height: var(--#{$variable-prefix}body-line-height);
  color: var(--#{$variable-prefix}body-color);
  text-align: var(--#{$variable-prefix}body-text-align);
  background-color: var(--#{$variable-prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

Což vám umožňuje provádět úpravy v reálném čase, jak chcete:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

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. Také jsme resetovali prvky padding-lefton <ul>a <ol>.

Všechny seznamy mají odstraněný horní okraj
A jejich spodní okraj se normalizoval
Vnořené seznamy nemají spodní okraj
- Tímto způsobem mají rovnoměrnější vzhled
- Zvláště když následuje více položek seznamu
Levé polstrování bylo také resetováno

Zde je seřazený seznam
S několika položkami seznamu
Má stejný celkový vzhled
Jako předchozí neuspořádaný seznam

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ů.
Období: Definice termínu.; Druhá definice pro stejný termín.
Další termín: Definice tohoto jiného termínu.

Vložený kód

Zabalte vložené úryvky kódu pomocí <code>. Ujistěte se, že uvozujete lomené závorky HTML.

Například <section>by měl být zabalen jako vložený.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Bloky kódu

Použijte <pre>s pro více řádků kódu. Pro správné vykreslení se ještě jednou ujistěte, že jste v kódu opustili všechny lomené závorky. Prvek <pre>je resetován, aby byl odstraněn margin-topa použity remjednotky pro jeho margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Proměnné

Pro indikaci proměnných použijte <var>tag.

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Uživatelský vstup

Použijte <kbd>k označení vstupu, který se obvykle zadává pomocí klávesnice.

Chcete-li přepnout adresáře, zadejte cda poté název adresáře.
Chcete-li upravit nastavení, stiskněte ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Ukázkový výstup

Pro indikaci ukázkového výstupu z programu použijte <samp>tag.

Tento text má být považován za vzorový výstup z počítačového programu.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

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>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.

Příklad legendy

Příklad zadání

Příklad emailu

Příklad telefonu

Příklad adresy URL

Příklad čísla

Příklad vyhledávání

Příklad rozsahu

Příklad vstupu souboru

Příklad výběru

Zaškrtněte toto políčko

Možnost jedna je to a to Možnost dvě je něco jiného, co je také velmi dlouhé, aby demonstrovalo zabalení těchto efektních ovládacích prvků formuláře. Možnost tři je zakázána

Příklad textové oblasti

Příklad data

Příklad času

Příklad hesla

Příklad datetime-local

Příklad týdne

Příklad měsíce

Příklad barvy

Příklad výstupu 100

Podpora zadávání data a barev

Mějte na paměti, že vstupy data nejsou plně podporovány všemi prohlížeči, zejména Safari.

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.

Známý citát obsažený v prvku blockquote.

Někdo slavný v Source Title

Inline prvky

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

Element zkratky HTML .

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í.

<input type="text" hidden>

nekompatibilita jQuery

[hidden]není kompatibilní s jQuery $(...).hide()a $(...).show()metodami. Proto v současné době nijak zvlášť 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 .

Restartujte

Přístup

CSS proměnné

Výchozí nastavení stránky

Zásobník nativních písem

CSS proměnné

Nadpisy a odstavce

Seznamy

Vložený kód

Bloky kódu

Proměnné

Uživatelský vstup

Ukázkový výstup

Tabulky

formuláře

Podpora zadávání data a barev

Ukazatele na tlačítkách

Různé prvky

Adresa

Blockquote

Inline prvky

souhrn

[hidden]Atribut HTML5

nekompatibilita jQuery

`[hidden]`Atribut HTML5