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
rem
s namiestoem
s 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 smermargin
je jednoduchší mentálny model. - Pre jednoduchšie škálovanie medzi veľkosťami zariadení by prvky bloku mali používať
rem
s akomargin
s. - Udržujte deklarácie
font
súvisiacich vlastností na minime a používajte ichinherit
vž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-sizing
globálne nastavený na každom prvku – vrátane*::before
a*::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-size
je deklarovaná na<html>
, ale16px
predpokladá sa (predvolené nastavenie prehliadača).font-size: 1rem
je 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-root
premennej.
- Žiadna základňa nie
- Tiež
<body>
nastavuje globálnefont-family
,font-weight
,line-height
, acolor
. 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,
// 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šimnite si, že pretože zásobník písiem obsahuje písma emoji, mnoho bežných znakov unicode symbolov/dingbat sa vykreslí 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-family
sa aplikuje na <body>
a automaticky sa dedí globálne v rámci Bootstrapu. Ak chcete prepnúť globálne font-family
, aktualizujte $font-family-base
a prekompilujte Bootstrap.
Nadpisy a odseky
Všetky prvky nadpisu – napr. – a sú <h1>
resetované <p>
, aby boli margin-top
odstránené. Nadpisy boli margin-bottom: .5rem
pridané a odseky margin-bottom: 1rem
pre jednoduché vytváranie medzier.
Smerovanie | Príklad |
---|---|
<h1></h1> |
h1. Hlavička bootstrapu |
<h2></h2> |
h2. Hlavička bootstrapu |
<h3></h3> |
h3. Hlavička bootstrapu |
<h4></h4> |
h4. Hlavička bootstrapu |
<h5></h5> |
h5. Hlavička bootstrapu |
<h6></h6> |
h6. Hlavička bootstrapu |
zoznamy
Všetky zoznamy <ul>
- , <ol>
, a <dl>
-majú margin-top
odstránené a margin-bottom: 1rem
. Vnorené zoznamy nemajú margin-bottom
. Resetovali sme aj prvky padding-left
zapnutia <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é margin
s. <dd>
s resetovať a margin-left
pridať . s sú tučné .0
margin-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.
<section>
by mali byť zabalené ako vložené.
For example, <code><section></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-top
a použil sa rem
preň jednotky margin-bottom
.
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
Premenné
Na označenie premenných použite <var>
značku.
<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 upraviť nastavenia, stlač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ážkový výstup
Na označenie výstupu vzorky z programu použite <samp>
značku.
<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-align
v celom texte. S .table
triedou prichádzajú ďalšie zmeny okrajov, výplne a ďalšie .
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é nadisplay: inline-block
, aby bolomargin
možné ich použiť.<input>
S,<select>
s,<textarea>
s a<button>
s väčšinou rieši Normalize, ale Reboot odstráni aj ichmargin
a 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: pointer
keď: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ú cursor
zmenu.
<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-style
z italic
na normal
. line-height
je tiež teraz zdedený a margin-bottom: 1rem
bol 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>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Celé meno
[email protected]
Blockquote
Predvolená hodnota margin
pre blokové úvodzovky je 1em 40px
, takže sme to resetovali 0 0 1rem
na 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.
Zhrnutie
Predvolená hodnota cursor
pre súhrn je text
, takže sme to resetovali na, aby sme pointer
vyjadrili, ž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 display
ná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 display
prvkov.
Ak chcete iba prepnúť viditeľnosť prvku, čo znamená, že display
nie je upravený a prvok môže stále ovplyvniť tok dokumentu, použite namiesto toho triedu .invisible
.