Reboot
Reboot, in samling elemint-spesifike CSS-feroarings yn ien bestân, kickstart Bootstrap om in elegante, konsekwinte en ienfâldige basisline te leverjen om op te bouwen.
Oanpak
Reboot bout op Normalize, en leveret in protte HTML-eleminten mei wat opinige stilen mei allinich elemintselektors. Oanfoljende styling wurdt allinich dien mei klassen. Bygelyks, wy reboote guon <table>
stilen foar in ienfâldiger baseline en letter jouwe .table
, .table-bordered
, en mear.
Hjir binne ús rjochtlinen en redenen foar it kiezen wat te oerskriuwen yn Reboot:
- Update guon browser-standertwearden om
rem
s te brûken ynstee fanem
s foar skaalbere komponint-ôfstân. - Avoid
margin-top
. Fertikale marzjes kinne ynstoarte, wat ûnferwachte resultaten opleverje. Noch wichtiger, in inkele rjochting fanmargin
is in ienfâldiger mentale model. - Foar makliker skaalfergrutting oer apparaatgrutte moatte blokeleminten
rem
s brûke foarmargin
s. - Hâld deklaraasjes fan
font
-relatearre eigenskippen op in minimum, brûkinherit
wannear mooglik.
CSS fariabelen
Taheakke yn v5.1.1
Mei v5.1.1 hawwe wy ús fereaske @import
s standerdisearre oer al ús CSS-bundels (ynklusyf bootstrap.css
, bootstrap-reboot.css
, en bootstrap-grid.css
om op te nimmen _root.scss
. Dit foeget :root
nivo CSS-fariabelen ta oan alle bondels, nettsjinsteande hoefolle fan harren wurde brûkt yn dy bondel. Uteinlik sil Bootstrap 5 trochgean mei sjoch mear CSS fariabelen tafoege oer de tiid.
Side standerts
De <html>
en <body>
eleminten wurde bywurke om bettere side-wide standerts te leverjen. Mear spesifyk:
- De
box-sizing
is globaal ynsteld op elk elemint-ynklusyf*::before
en*::after
, oanborder-box
. Dit soarget derfoar dat de opjûne breedte fan elemint wurdt nea oerskreden fanwege padding of grins.- Gjin basis
font-size
wurdt ferklearre op de<html>
, mar16px
wurdt oannommen (de browser standert).font-size: 1rem
wurdt tapast op 'e<body>
foar maklik responsive type-skaalfergrutting fia mediafragen, wylst de brûkersfoarkarren respektearje en in mear tagonklike oanpak garandearje. Dizze browser standert kin oerskreaun wurde troch it feroarjen fan de$font-size-root
fariabele.
- Gjin basis
- De
<body>
set ek in globalefont-family
,font-weight
,line-height
, encolor
. Dit wurdt letter erfd troch guon foarmeleminten om lettertype-ynkonsistinsjes foar te kommen. - Foar feiligens
<body>
hat de in ferklearrebackground-color
, standert op#fff
.
Native lettertypestapel
Bootstrap brûkt in "native font stack" of "systeem font stack" foar optimale tekstwerjefte op elk apparaat en OS. Dizze systeemlettertypen binne spesifyk ûntworpen mei hjoeddeistige apparaten yn gedachten, mei ferbettere werjefte op skermen, stipe foar fariabele lettertypen, en mear. Lês mear oer native font stacks yn dit Smashing Magazine artikel .
$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;
Tink derom dat om't de lettertypestapel emoji-lettertypen omfettet, in protte gewoane symboal / dingbat unicode-tekens wurde werjûn as mearkleurige piktogrammen. Har uterlik sil fariearje, ôfhinklik fan 'e styl brûkt yn' e native emoji-lettertype fan 'e browser/platfoarm, en se wurde net beynfloede troch CSS- color
stilen.
Dit font-family
wurdt tapast op de <body>
en automatysk erfde globaal hiele Bootstrap. Om de globale font-family
, bywurkje $font-family-base
en opnij kompilearje Bootstrap.
CSS fariabelen
As Bootstrap 5 trochgiet te rypjen, sille mear en mear stilen wurde boud mei CSS-fariabelen as in middel om mear real-time oanpassing te leverjen sûnder de needsaak om Sass altyd opnij te kompilearjen. Us oanpak is om ús boarne Sass-fariabelen te nimmen en se te transformearjen yn CSS-fariabelen. Op dy manier, sels as jo gjin CSS-fariabelen brûke, hawwe jo noch alle krêft fan Sass. Dit is noch oan 'e gong en sil tiid duorje om folslein út te fieren.
Besjoch bygelyks dizze :root
CSS-fariabelen foar mienskiplike <body>
stilen:
@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};
Yn 'e praktyk wurde dy fariabelen dan tapast yn Reboot sa:
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
}
Hjirmei kinne jo realtime oanpassingen meitsje lykas jo wolle:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
Kopteksten en paragrafen
Alle koptekst-eleminten - bgl. <h1>
- en <p>
wurde weromset om har te margin-top
ferwiderjen. Koppen hawwe margin-bottom: .5rem
tafoege en paragrafen margin-bottom: 1rem
foar maklike ôfstân.
Heading | Foarbyld |
---|---|
<h1></h1> |
h1. Bootstrap heading |
<h2></h2> |
h2. Bootstrap heading |
<h3></h3> |
h3. Bootstrap heading |
<h4></h4> |
h4. Bootstrap heading |
<h5></h5> |
h5. Bootstrap heading |
<h6></h6> |
h6. Bootstrap heading |
Listen
Alle listen <ul>
- , <ol>
, en <dl>
- hawwe har margin-top
fuortsmiten en in margin-bottom: 1rem
. Nested listen hawwe gjin margin-bottom
. Wy hawwe ek de padding-left
oan <ul>
en <ol>
eleminten weromset.
- Alle listen hawwe har boppemarge fuortsmiten
- En har ûnderste marzje normalisearre
- Neste listen hawwe gjin ûndermarge
- Op dizze manier hawwe se in mear evenredich uterlik
- Benammen as folge troch mear list items
- De linker padding is ek weromset
- Hjir is in bestelde list
- Mei in pear list items
- It hat deselde algemiene útstrieling
- As de foarige unordered list
Foar ienfâldiger styling, dúdlike hiërargy en bettere spacing, beskriuwingslisten hawwe bywurke margin
s. <dd>
s weromsette margin-left
nei 0
en tafoegje margin-bottom: .5rem
. <dt>
s binne fet .
- Beskriuwingslisten
- In beskriuwingslist is perfekt foar it definiearjen fan termen.
- Term
- Definysje foar de term.
- In twadde definysje foar deselde term.
- In oare term
- Definysje foar dizze oare term.
Inline koade
Wrap ynline snippets fan koade mei <code>
. Wês wis dat jo HTML-hoekheakjes ûntkomme.
<section>
moatte wurde ferpakt as inline.
For example, <code><section></code> should be wrapped as inline.
Koade blokken
Brûk <pre>
s foar meardere rigels koade. Wês der nochris wis fan dat jo alle hoekheakjes yn 'e koade ûntkomme foar juste rendering. It <pre>
elemint wurdt weromset om syn te ferwiderjen margin-top
en rem
ienheden te brûken foar har 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>
Fariabelen
Foar it oanjaan fan fariabelen brûk de <var>
tag.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Meidogger ynfier
Brûk de <kbd>
om ynfier oan te jaan dy't typysk fia toetseboerd ynfierd wurdt.
Om ynstellings te bewurkjen, druk op 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>
Sample útfier
Foar it oanjaan fan sampleútfier fan in programma brûk de <samp>
tag.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Tabellen
Tafels wurde in bytsje oanpast oan styl <caption>
s, collapse grinzen, en soargje konsekwint text-align
hiele. Oanfoljende feroarings foar grinzen, padding, en mear komme mei de .table
klasse .
Tabel heading | Tabel heading | Tabel heading | Tabel heading |
---|---|---|---|
Tabel sel | Tabel sel | Tabel sel | Tabel sel |
Tabel sel | Tabel sel | Tabel sel | Tabel sel |
Tabel sel | Tabel sel | Tabel sel | Tabel sel |
Formulieren
Ferskate foarmeleminten binne opnij opstarte foar ienfâldiger basisstilen. Hjir binne guon fan 'e meast opfallende feroarings:
<fieldset>
s hawwe gjin grinzen, padding, of marzje sadat se kinne maklik brûkt wurde as wrappers foar yndividuele ynput of groepen fan ynput.<legend>
s, lykas fjildsets, binne ek opnij ynsteld om te sjen as in koptekst fan soarten.<label>
s binne ynsteld omdisplay: inline-block
te tasteanmargin
wurde tapast.<input>
s,<select>
s,<textarea>
s, en<button>
s wurde meast oanpakt troch Normalize, mar Reboot ferwideret harrenmargin
en setsline-height: inherit
, te.<textarea>
s wurde wizige om allinich fertikaal te feroarjen, om't horizontale grutte feroaring faak de side-yndieling "brekt".<button>
s en<input>
knop eleminten hawwecursor: pointer
wannear:not(:disabled)
.
Dizze wizigingen, en mear, wurde hjirûnder oantoand.
Stipe foar datum- en kleurynfier
Tink derom dat datumynputen net folslein wurde stipe troch alle browsers, nammentlik Safari.
Oanwizers op knoppen
Reboot befettet in ferbettering foar role="button"
it feroarjen fan de standert rinnerke nei pointer
. Foegje dit attribút ta oan eleminten om te helpen oan te jaan dat eleminten ynteraktyf binne. Dizze rol is net nedich foar <button>
eleminten dy't har eigen cursor
feroaring krije.
<span role="button" tabindex="0">Non-button element button</span>
Misc eleminten
Adres
It <address>
elemint wurdt bywurke om de browser standert werom te setten font-style
fan italic
nei normal
. line-height
is no ek erfd, en margin-bottom: 1rem
is tafoege. <address>
s binne foar it presintearjen fan kontaktynformaasje foar de neiste foarâlder (of in hiele wurk). Bewarje opmaak troch rigels te einigjen mei <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Folsleine namme
[email protected]
Blockquote
De standert margin
op blockquotes is 1em 40px
, dus wy sette dat werom nei 0 0 1rem
foar wat mear konsistint mei oare eleminten.
In bekend sitaat, befette yn in blokquote-elemint.
Immen ferneamd yn Boarne Titel
Inline eleminten
It <abbr>
elemint ûntfangt basisstyling om it opfallend te meitsjen tusken alineatekst.
Gearfetting
De standert cursor
op gearfetting is text
, dus wy sette dat werom nei pointer
om oer te bringen dat it elemint kin wurde ynteraksje troch derop te klikken.
Guon details
Mear ynformaasje oer de details.
Noch mear details
Hjir binne noch mear details oer de details.
HTML5 [hidden]
attribút
HTML5 foeget in nij globaal attribút mei de namme ta[hidden]
, dat wurdt stylearre as display: none
standert. Troch in idee te lienjen fan PureCSS , ferbetterje wy dizze standert troch te meitsjen [hidden] { display: none !important; }
om te helpen foar te kommen dat it per display
ongeluk oerskreaun wurdt.
<input type="text" hidden>
jQuery ynkompatibiliteit
[hidden]
is net kompatibel mei jQuery's $(...).hide()
en $(...).show()
metoaden. Dêrom ûnderskriuwe wy op it stuit net foaral [hidden]
oare techniken foar it behearen display
fan eleminten.
Om gewoan de sichtberens fan in elemint te wikseljen, wat betsjuttet dat it display
net wizige is en it elemint noch de stream fan it dokumint kin beynfloedzje, brûk dan de .invisible
klasse ynstee.