Znova zaženite
Reboot, zbirka sprememb CSS, specifičnih za element, v eni sami datoteki, kickstart Bootstrap za zagotavljanje elegantne, dosledne in preproste osnove za nadgradnjo.
Pristop
Reboot nadgrajuje Normalize in ponuja številne elemente HTML z nekoliko samozavestnimi slogi z uporabo samo izbirnikov elementov. Dodatni 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 -, zmanjšajte na minimum in uporabite,inherit
kadar koli je to mogoče.
spremenljivke CSS
Dodano v v5.1.1
Z različico 5.1.1 smo standardizirali naše zahtevane @import
s v vseh naših svežnjih CSS (vključno z bootstrap.css
, bootstrap-reboot.css
in bootstrap-grid.css
vključiti _root.scss
. To doda :root
spremenljivke ravni CSS vsem svežnjem, ne glede na to, koliko jih je uporabljenih v tem svežnju. Končno bo Bootstrap 5 še naprej oglejte si več spremenljivk CSS, dodanih skozi čas.
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. To privzeto vrednost brskalnika je mogoče preglasiti s spreminjanjem$font-size-root
spremenljivke.
- Nobena osnova
- Nastavi tudi
<body>
globalnefont-family
,font-weight
,line-height
incolor
. To pozneje podedujejo nekateri elementi obrazca, da preprečijo nedoslednosti pisav. - Zaradi varnosti
<body>
ima deklariranobackground-color
, privzeto je#fff
.
Izvorni sklad pisav
Bootstrap uporablja "nativni sklad pisav" ali "sistemski sklad pisav" za optimalno upodabljanje besedila v vsaki napravi in OS. Te sistemske pisave so bile zasnovane posebej za današnje naprave, z izboljšanim upodabljanjem na zaslonih, podporo za spremenljive pisave in več. Preberite več o izvornih skladih pisav v tem članku revije 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;
Upoštevajte, da ker sklad pisav vključuje pisave emodžijev, bodo številni običajni znaki simbola/dingbat unicode upodobljeni 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.
spremenljivke CSS
Ko Bootstrap 5 še naprej dozoreva, bo vedno več slogov zgrajenih s spremenljivkami CSS kot sredstvom za zagotavljanje več prilagajanja v realnem času brez potrebe po vedno znova prevajanju Sass. Naš pristop je, da vzamemo izvorne spremenljivke Sass in jih pretvorimo v spremenljivke CSS. Na ta način, tudi če ne uporabljate spremenljivk CSS, imate še vedno vso moč Sassa. To je še vedno v teku in bo potreben čas za popolno izvedbo.
Na primer, upoštevajte te :root
spremenljivke CSS za običajne <body>
sloge:
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};
V praksi se te spremenljivke nato uporabijo pri ponovnem zagonu takole:
body {
margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
}
Kar vam omogoča prilagajanje v realnem času, kakor želite:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
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
. Prav tako smo ponastavili elemente padding-left
on <ul>
in .<ol>
- 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
na 0
in 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.
Inline koda
Zavijte vstavljene delčke kode z <code>
. Prepričajte se, da ste izstopili iz oglatih oklepajev HTML.
<section>
mora biti zavit kot vstavljeni.
For example, <code><section></code> should be wrapped as inline.
Kodni bloki
Uporabite <pre>
s za več vrstic kode. Ponovno se prepričajte, da ste za pravilno upodabljanje izstopili iz vseh oglatih oklepajev v kodi. Element <pre>
se ponastavi, da se odstrani margin-top
in uporabi rem
enote za svoj 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>
Spremenljivke
Za označevanje spremenljivk uporabite <var>
oznako.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Uporabniški vnos
Uporabite <kbd>
za označevanje vnosa, ki se običajno vnese s tipkovnico.
Če želite urediti nastavitve, pritisnite 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>
Vzorčni izhod
Za označevanje vzorčnega izhoda iz programa uporabite <samp>
oznako.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
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 preprosto 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 vodoravno spreminjanje velikosti pogosto "pokvari" postavitev strani.<button>
s in<input>
elementi gumbov imajocursor: pointer
ko:not(:disabled)
.
Te spremembe in še več so prikazane spodaj.
Podpora za vnos datuma in barve
Upoštevajte, da vsi brskalniki, zlasti Safari , ne podpirajo v celoti datumskih vnosov.
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.
Nekdo znan v naslovu vira
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]
, ki je display: none
privzeto oblikovan. Z izposojo ideje od PureCSS izboljšamo to privzeto vrednost tako, [hidden] { display: none !important; }
da pomagamo preprečiti njeno display
nenamerno preglasitev.
<input type="text" hidden>
Nezdružljivost jQuery
[hidden]
ni združljiv z jQuery $(...).hide()
in $(...).show()
metodami. Zato trenutno še posebej ne podpiramo [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 .