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

Na tejto stránke

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

CSS premenné

Pridané vo verzii 5.2.0

Vo verzii 5.1.1 sme štandardizovali naše požadované @imports vo všetkých našich balíkoch CSS (vrátane bootstrap.css, bootstrap-reboot.cssa bootstrap-grid.css), aby zahŕňali _root.scss. To pridá :rootpremenné CSS úrovne do všetkých balíkov bez ohľadu na to, koľko z nich sa v tomto balíku používa. V konečnom dôsledku bude do Bootstrapu 5 časom pribúdať viac premenných CSS , aby sa zabezpečilo viac prispôsobení v reálnom čase bez potreby vždy prekompilovať Sass. Náš prístup spočíva v tom, že vezmeme naše zdrojové premenné Sass a transformujeme ich na premenné CSS. Týmto spôsobom, aj keď nepoužívate premenné CSS, stále máte všetku silu Sass. Toto stále prebieha a jeho úplná implementácia bude nejaký čas trvať.

Zvážte napríklad tieto :rootpremenné CSS pre bežné <body>štýly:

  @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 sa tieto premenné potom použijú pri reštarte 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
}

Čo vám umožňuje vykonávať prispôsobenia v reálnom čase, ako sa vám páči:

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

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ždom prvku – vrátane *::beforea *::after, až border-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. Toto predvolené nastavenie prehliadača je možné prepísať úpravou $font-size-rootpremennej.
Tiež <body>nastavuje globálne font-family, font-weight, line-height, a color. 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

Bootstrap využíva „zásobník natívnych písiem“ alebo „zásobník systémových písiem“ na optimálne vykresľovanie textu na každom zariadení a OS. Tieto systémové fonty boli navrhnuté špeciálne s ohľadom na dnešné zariadenia, s vylepšeným vykresľovaním na obrazovkách, podporou variabilných fontov a podobne. Prečítajte si viac o natívnych zásobníkoch písiem 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;

Upozorňujeme, že pretože zásobník písiem obsahuje písma emoji, mnohé bežné znaky Unicode symbolov/dingbat sa vykreslia ako viacfarebné piktogramy. Ich vzhľad sa bude líšiť v závislosti od štýlu použitého v natívnom písme emoji prehliadača/platformy a nebudú ovplyvnené žiadnymi colorštýlmi CSS.

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

Horizontálne pravidlá

Prvok <hr>bol zjednodušený. Podobne ako predvolené nastavenia prehliadača, <hr>s majú štýl cez border-top, majú predvolenú hodnotu opacity: .25a automaticky dedia svoje border-colorcez color, vrátane toho, keď colorje nastavené cez rodiča. Môžu byť upravené pomocou textových, orámovacích a nepriehľadných nástrojov.

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

zoznamy

Všetky zoznamy <ul>- , <ol>, a <dl>-majú margin-topodstránené a margin-bottom: 1rem. Vnorené zoznamy nemajú margin-bottom. Resetovali sme aj prvky padding-leftzapnutia <ul>a <ol>.

Všetky zoznamy majú odstránený horný okraj
A ich spodný okraj sa znormalizoval
Vnorené zoznamy nemajú spodný okraj
- Takto majú rovnomernejší vzhľad
- Najmä ak za nimi nasledujú ďalšie položky zoznamu
Ľavá výplň bola tiež resetovaná

Tu je zoradený zoznam
S niekoľkými položkami zoznamu
Má rovnaký celkový vzhľad
Ako predchádzajúci neusporiadaný zoznam

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.
Termín: Definícia pojmu.; Druhá definícia toho istého pojmu.
Ďalší termín: Definícia tohto iného pojmu.

Vložený kód

Zabaľte vložené útržky kódu pomocou <code>. Uistite sa, že ste opustili lomené zátvorky HTML.

Napríklad <section>by mali byť zabalené ako vložené.

html

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

Bloky kódu

Použite <pre>s pre viacero riadkov kódu. Pre správne vykreslenie sa ešte raz uistite, že ste v kóde opustili všetky lomené zátvorky. Prvok <pre>sa resetuje, aby sa odstránil jeho prvok margin-topa použil sa rempreň jednotky 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>

Premenné

Na označenie premenných použite <var>značku.

y = m x + b

html

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

Vstup používateľa

Použite <kbd>na označenie vstupu, ktorý sa zvyčajne zadáva pomocou klávesnice.

Ak chcete prepnúť adresáre, napíšte cda za ním názov adresára.
Ak chcete upraviť nastavenia, stlač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ážkový výstup

Na označenie výstupu vzorky z programu použite <samp>značku.

Tento text má byť považovaný 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>

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

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

Podpora vstupu dátumu a farby

Majte na pamäti, že zadávanie dátumu nie je plne podporované všetkými prehliadačmi, konkrétne Safari.

Ukazovatele na tlačidlách

Reboot obsahuje vylepšenie pre role="button"zmenu predvoleného kurzora na pointer. Pridajte tento atribút k prvkom, aby ste mohli indikovať, že prvky sú interaktívne. Táto rola nie je potrebná pre <button>prvky, ktoré dostávajú svoju vlastnú cursorzmenu.

Tlačidlo prvku bez tlačidla

html

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

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.

Známy citát obsiahnutý v prvku blockquote.

Niekto slávny v Source Title

Inline prvky

Prvok <abbr>dostane základný štýl, aby vynikol medzi odsekovým textom.

Prvok skratky HTML .

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 pridáva nový globálny atribút s názvom[hidden] , ktorý má display: noneštandardný štýl. Požičaním nápadu od PureCSS sme toto predvolené nastavenie vylepšili tak, že [hidden] { display: none !important; }zabránime jeho displaynáhodnému prepísaniu.

<input type="text" hidden>

nekompatibilita jQuery

[hidden]nie je kompatibilný s jQuery $(...).hide()a $(...).show()metódami. Preto v súčasnosti zvlášť nepodporujeme [hidden]iné techniky na správu displayprvkov.

Ak chcete iba prepnúť viditeľnosť prvku, čo znamená, že displaynie je upravený a prvok môže stále ovplyvniť tok dokumentu, použite namiesto toho triedu .invisible.

Reštartovať

Prístup

CSS premenné

Predvolené nastavenia stránky

Natívny zásobník písiem

Nadpisy a odseky

Horizontálne pravidlá

zoznamy

Vložený kód

Bloky kódu

Premenné

Vstup používateľa

Ukážkový výstup

Tabuľky

Formuláre

Podpora vstupu dátumu a farby

Ukazovatele na tlačidlách

Rôzne prvky

Adresa

Blockquote

Inline prvky

Zhrnutie

[hidden]atribút HTML5

nekompatibilita jQuery

`[hidden]`atribút HTML5