Znova zaženite
Reboot, zbirka sprememb CSS, specifičnih za element v eni sami datoteki, zažene Bootstrap, da zagotovi elegantno, dosledno in preprosto osnovo, na kateri lahko nadgradite.
Pristop
Reboot nadgrajuje Normalize in ponuja številne elemente HTML z nekoliko samozavestnimi slogi z uporabo samo izbirnikov elementov. Dodaten styling se izvaja samo z razredi. Na primer, znova zaženemo nekatere <table>
sloge za enostavnejšo osnovo in pozneje zagotovimo .table
, .table-bordered
in še več.
Tu so naše smernice in razlogi za izbiro, kaj preglasiti pri ponovnem zagonu:
- Posodobite nekatere privzete vrednosti brskalnika, da uporabite
rem
s namestoem
s za razširljiv razmik komponent. - Izogibajte se
margin-top
. Navpični robovi se lahko zrušijo, kar povzroči nepričakovane rezultate. Še pomembneje pa je, da je ena smermargin
enostavnejši mentalni model. - Za lažje skaliranje po velikostih naprav morajo blokovni elementi uporabljati
rem
s namestomargin
s. - Izjave o
font
lastnostih, povezanih z -, naj bodo čim manjše in jih uporabite,inherit
kadar koli je to mogoče.
Privzete nastavitve strani
Elementi <html>
in <body>
so posodobljeni, da zagotovijo boljše privzete nastavitve za celotno stran. Natančneje:
- Je
box-sizing
globalno nastavljen za vsak element – vključno z*::before
in*::after
doborder-box
. To zagotavlja, da deklarirana širina elementa ni nikoli presežena zaradi oblazinjenja ali obrobe. - Nobena osnova
font-size
ni deklarirana na<html>
, ampak16px
se predpostavlja (privzeta nastavitev brskalnika).font-size: 1rem
se uporablja na<body>
za enostavno odzivno skaliranje tipov prek medijskih poizvedb ob spoštovanju uporabniških nastavitev in zagotavljanju bolj dostopnega pristopa. - Nastavi tudi
<body>
globalnefont-family
,line-height
, intext-align
. To pozneje podedujejo nekateri elementi obrazca, da preprečijo nedoslednosti pisav. - Zaradi varnosti
<body>
ima deklariranobackground-color
, privzeto je#fff
.
Izvorni sklad pisav
Privzete spletne pisave (Helvetica Neue, Helvetica in Arial) so bile opuščene v Bootstrap 4 in nadomeščene z »nativnim skladom pisav« za optimalno upodabljanje besedila v vsaki napravi in OS. Preberite več o izvornih skladih pisav v tem članku revije 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;
Upoštevajte, da bo veliko pogostih simbolov/dingbat znakov Unicode, ker sklad pisav vključuje pisave emodžijev, upodobljenih kot večbarvni piktogrami. Njihov videz se bo razlikoval glede na slog, uporabljen v izvorni pisavi emojijev brskalnika/platforme, in nanje ne bodo vplivali nobeni color
slogi CSS.
To font-family
velja za <body>
in samodejno podedovano globalno v celotnem Bootstrapu. Če želite preklopiti globalno font-family
, posodobite $font-family-base
in znova prevedite Bootstrap.
Naslovi in odstavki
Vsi elementi naslova – npr. <h1>
– in <p>
so ponastavljeni, da jih margin-top
odstranimo. Dodani so margin-bottom: .5rem
naslovi in odstavki margin-bottom: 1rem
za lažji razmik.
Naslov | Primer |
---|---|
<h1></h1> |
h1. Naslov Bootstrap |
<h2></h2> |
h2. Naslov Bootstrap |
<h3></h3> |
h3. Naslov Bootstrap |
<h4></h4> |
h4. Naslov Bootstrap |
<h5></h5> |
h5. Naslov Bootstrap |
<h6></h6> |
h6. Naslov Bootstrap |
Seznami
Vsi seznami – <ul>
, <ol>
in <dl>
– so margin-top
odstranjeni in margin-bottom: 1rem
. Ugnezdeni seznami nimajo margin-bottom
.
- Vsem seznamom je odstranjen zgornji rob
- In njihova spodnja meja se je normalizirala
- Ugnezdeni seznami nimajo spodnjega roba
- Tako imajo bolj enakomeren videz
- Še posebej, če mu sledi več elementov seznama
- Ponastavljeno je bilo tudi levo oblazinjenje
- Tukaj je urejen seznam
- Z nekaj točkami seznama
- Ima enak splošni videz
- Kot prejšnji neurejen seznam
Za preprostejši slog, jasno hierarhijo in boljši razmik so seznami opisov posodobljeni margin
s. <dd>
ponastavite margin-left
in 0
dodajte margin-bottom: .5rem
. <dt>
s so krepko .
- Seznami opisov
- Opisni seznam je kot nalašč za definiranje izrazov.
- Izraz
- Opredelitev pojma.
- Druga definicija za isti izraz.
- Še en izraz
- Opredelitev tega drugega izraza.
Vnaprej oblikovano besedilo
Element <pre>
se ponastavi, da se odstrani margin-top
in uporabi rem
enote za svoj margin-bottom
.
.example-element { rob-spodaj: 1rem; }
Mize
Tabele so nekoliko prilagojene slogu <caption>
s, strnjene meje in zagotavljajo doslednost text-align
v celotnem besedilu. Dodatne spremembe za obrobe, oblazinjenje in drugo prihajajo z .table
razredom .
Naslov tabele | Naslov tabele | Naslov tabele | Naslov tabele |
---|---|---|---|
Celica tabele | Celica tabele | Celica tabele | Celica tabele |
Celica tabele | Celica tabele | Celica tabele | Celica tabele |
Celica tabele | Celica tabele | Celica tabele | Celica tabele |
Obrazci
Različni elementi obrazca so bili znova zagnani za enostavnejše osnovne sloge. Tukaj je nekaj najbolj opaznih sprememb:
<fieldset>
nimajo robov, oblazinjenja ali robov, zato jih je mogoče enostavno uporabiti kot ovoje za posamezne vnose ali skupine vnosov.<legend>
s, tako kot nabori polj, so bili prav tako spremenjeni, da so prikazani kot nekakšen naslov.<label>
s so nastavljeni tako,display: inline-block
da omogočajomargin
uporabo.<input>
s,<select>
s,<textarea>
s in<button>
s večinoma obravnava Normalize, vendar Reboot odstrani tudi njihovemargin
in nastaviline-height: inherit
.<textarea>
so spremenjeni tako, da jih je mogoče spreminjati samo navpično, saj horizontalno spreminjanje velikosti pogosto "pokvari" postavitev strani.<button>
s in<input>
elementi gumbov imajocursor: pointer
ko:not(:disabled)
.
Te in druge spremembe so prikazane spodaj.
Kazalci na gumbih
Ponovni zagon vključuje izboljšavo za role="button"
spremembo privzetega kazalca v pointer
. Dodajte ta atribut elementom, da boste lažje označili, da so elementi interaktivni. Ta vloga ni potrebna za <button>
elemente, ki dobijo lastno cursor
spremembo.
<span role="button" tabindex="0">Non-button element button</span>
Razni elementi
Naslov
Element <address>
je posodobljen za ponastavitev privzete nastavitve brskalnika font-style
z italic
na normal
. line-height
je tudi zdaj podedovan in margin-bottom: 1rem
je bil dodan. <address>
so za predstavitev kontaktnih informacij za najbližjega prednika (ali celotnega dela). Ohranite oblikovanje tako, da končate vrstice z <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Polno ime
[email protected]
Blockquote
Privzeto margin
za narekovaje je 1em 40px
, zato smo to ponastavili na 0 0 1rem
nekaj, kar je bolj skladno z drugimi elementi.
Dobro znani citat, vsebovan v elementu blockquote.
Inline elementi
Element <abbr>
prejme osnovni slog, da izstopa med besedilom odstavka.
Povzetek
Privzeta vrednost cursor
za povzetek je text
, zato smo to ponastavili na, pointer
da sporočimo, da je z elementom mogoče komunicirati s klikom nanj.
Nekaj podrobnosti
Več informacij o podrobnostih.
Še več podrobnosti
Tukaj je še več podrobnosti o podrobnostih.
[hidden]
atribut HTML5
HTML5 doda nov globalni atribut z imenom[hidden]
display: none
, ki je privzeto oblikovan kot . Z izposojo ideje od PureCSS izboljšamo to privzeto vrednost tako, [hidden] { display: none !important; }
da pomagamo preprečiti njeno display
nenamerno preglasitev. Čeprav [hidden]
ga IE10 ne podpira izvorno, izrecna deklaracija v našem CSS odpravi to težavo.
<input type="text" hidden>
Nezdružljivost jQuery
[hidden]
ni združljiv z jQuery $(...).hide()
in $(...).show()
metodami. Zato trenutno ne podpiramo posebej [hidden]
drugih tehnik za upravljanje display
elementov.
Če želite samo preklopiti vidnost elementa, kar pomeni, da display
ni spremenjen in lahko element še vedno vpliva na potek dokumenta, namesto tega uporabite .invisible
razred .