in English

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.

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

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.css), aby zahrnovaly _root.scss. To přidá :rootproměnné CSS úrovně do všech balíčků bez ohledu na to, kolik jich je v tomto balíčku použito. Nakonec Bootstrap 5 bude i nadále v průběhu času přidávat více proměnných CSS , aby bylo možné poskytovat více 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 {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

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

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$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>

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

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,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // 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.

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

Horizontální pravidla

Prvek <hr>byl zjednodušen. Podobně jako výchozí nastavení prohlížeče <hr>jsou s stylizovány pomocí border-top, mají výchozí hodnotu opacity: .25a automaticky dědí jejich border-colorprostřednictvím color, včetně toho, kdy colorje nastaveno prostřednictvím nadřazeného prvku. Lze je upravit pomocí nástrojů pro text, ohraničení a neprůhlednost.

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

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

html

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>

html

<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

html

<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 + ,

html

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.

html

<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

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

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>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.
<button>s and <input> button elements have cursor: pointer when :not(:disabled).

These changes, and more, are demonstrated below.

Example legend

Example input

Example email

Example telephone

Example url

Example number

Example search

Example range

Example file input

Example select

Check this checkbox

Option one is this and that Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls. Option three is disabled

Example textarea

Example date

Example time

Example password

Example datetime-local

Example week

Example month

Example color

Example output 100

Date & color input support

Keep in mind date inputs are not fully supported by all browsers, namely Safari.

Pointers on buttons

Reboot includes an enhancement for role="button" to change the default cursor to pointer. Add this attribute to elements to help indicate elements are interactive. This role isn’t necessary for <button> elements, which get their own cursor change.

Non-button element button

html

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

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.

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

Inline elements

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

The HTML abbreviation element.

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.

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

Restartujte

Přístup

CSS proměnné

Výchozí nastavení stránky

Zásobník nativních písem

Nadpisy a odstavce

Horizontální pravidla

Seznamy

Vložený kód

Bloky kódu

Proměnné

Uživatelský vstup

Ukázkový výstup

Tabulky

formuláře

Date & color input support

Pointers on buttons

Misc elements

Address

Blockquote

Inline elements

Summary

HTML5 [hidden] attribute

jQuery incompatibility

HTML5 `[hidden]` attribute