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.
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
rem
místoem
s 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ěrmargin
je jednodušší mentální model. - Pro snadnější škálování napříč velikostmi zařízení by prvky bloku měly používat
rem
s promargin
s. - Omezte deklarace
font
souvisejících vlastností na minimum a používejte je,inherit
kdykoli je to možné.
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-sizing
globálně nastaven na každý prvek – včetně*::before
a*::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-size
není deklarován na<html>
, ale16px
předpokládá se (výchozí nastavení prohlížeče).font-size: 1rem
se 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. - Také
<body>
nastavuje globálnífont-family
,line-height
, atext-align
. 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ánobackground-color
, výchozí je#fff
.
Zásobník nativních písem
Výchozí webová písma (Helvetica Neue, Helvetica a Arial) byla z Bootstrapu 4 vypuštěna a nahrazena „nativním zásobníkem písem“ pro optimální vykreslování textu na každém zařízení a operačním systému. 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:
// 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,
// 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 color
styly CSS.
Toto font-family
se 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-base
a znovu zkompilujte Bootstrap.
Nadpisy a odstavce
Všechny prvky nadpisu – např. – a jsou <h1>
resetovány <p>
, aby byly margin-top
odstraněny. Nadpisy byly margin-bottom: .5rem
přidány a odstavce margin-bottom: 1rem
pro 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-top
odstraněny a margin-bottom: 1rem
. Vnořené seznamy nemají margin-bottom
.
- 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é margin
s. <dd>
s resetovat a margin-left
přidat . s jsou tučně .0
margin-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.
Předformátovaný text
Prvek <pre>
je resetován, aby byl odstraněn margin-top
a použity rem
jednotky pro jeho margin-bottom
.
.example-element { okraj-dole: 1rem; }
Tabulky
Tabulky jsou mírně upraveny podle stylu <caption>
s, sbalí okraje a zajistí konzistentnost text-align
v celém textu. Další změny pro okraje, výplň a další přicházejí s .table
třídou .
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 druhů.<label>
s jsou nastaveny nadisplay: inline-block
, aby bylomargin
možné je použít.<input>
s,<select>
s,<textarea>
sa<button>
většinou řeší Normalize, ale Reboot odstraní i jejichmargin
a 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: pointer
když:not(:disabled)
.
Tyto a další změny jsou uvedeny níže.
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í cursor
změnu.
<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-style
z italic
na normal
. line-height
je také nyní zděděno a margin-bottom: 1rem
bylo 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>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Celé jméno
[email protected]
Blockquote
Výchozí margin
u blockquotes je 1em 40px
, takže jsme to resetovali na 0 0 1rem
něco, co je konzistentnější s ostatními prvky.
Známý citát obsažený v prvku blockquote.
Inline prvky
Prvek <abbr>
obdrží základní styl, aby vynikl mezi odstavcovým textem.
souhrn
Výchozí hodnota cursor
souhrnu je text
, takže jsme to resetovali na, pointer
abychom 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: none
vý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 display
náhodnému přepsání. I když [hidden]
není nativně podporován IE10, explicitní deklarace v našem CSS tento problém řeší.
<input type="text" hidden>
nekompatibilita jQuery
[hidden]
není kompatibilní s jQuery $(...).hide()
a $(...).show()
metodami. Proto v současnosti nepodporujeme [hidden]
jiné techniky pro správu display
prvků.
Chcete-li pouze přepnout viditelnost prvku, což znamená, že display
se nemění a prvek může stále ovlivňovat tok dokumentu, použijte místo toho .invisible
třídu .