Source

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

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

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.
  • Tiež <body>nastavuje globálne font-family, line-height, a text-align. 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

Predvolené webové fonty (Helvetica Neue, Helvetica a Arial) boli v Bootstrape 4 vypustené a nahradené „natívnou hromadou fontov“ pre optimálne vykresľovanie textu na každom zariadení a OS. Prečítajte si viac o natívnych zásobníkoch písiem 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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Toto font-familysa aplikuje na <body>a automaticky sa dedí globálne cez Bootstrap. 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

zoznamy

Všetky zoznamy <ul>- , <ol>, a <dl>-majú margin-topodstránené a margin-bottom: 1rem. Vnorené zoznamy 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 veľ
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elita
  3. Integer molestie lorem at massa
  4. Facilisis v pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla veľ
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

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

Predformátovaný text

Prvok <pre>sa resetuje, aby sa odstránil jeho prvok a aby sa naň margin-toppoužili remjednotky margin-bottom.

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

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

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ť len vertikálne, pretože horizontálna zmena veľkosti často „prerušuje“ rozloženie strany.

Tieto a ďalšie zmeny sú uvedené nižšie.

Príklad legendy

100

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). Zachovať formátovanie ukončením riadkov s <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.

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

Niekto slávny v Source Title

Inline prvky

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

Nulla attr vitae elit libero, pharetra augue.

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. Hoci [hidden]IE10 natívne nepodporuje, explicitná deklarácia v našom CSS tento problém rieši.

<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 prepínať viditeľnosť prvku, čo znamená, že displaynie je upravený a prvok môže stále ovplyvňovať tok dokumentu, použite namiesto toho triedu .invisible.