Start på nytt
Reboot, en samling elementspesifikke CSS-endringer i en enkelt fil, kickstart Bootstrap for å gi en elegant, konsistent og enkel grunnlinje å bygge videre på.
Nærme seg
Reboot bygger på Normalize, og gir mange HTML-elementer til dels egenartede stiler med kun elementvelgere. Ytterligere styling gjøres kun med klasser. For eksempel starter vi noen <table>
stiler på nytt for en enklere grunnlinje og gir senere .table
, .table-bordered
, og mer.
Her er våre retningslinjer og grunner for å velge hva som skal overstyres i omstart:
- Oppdater noen nettleserstandardverdier for å bruke
rem
s i stedet forem
s for skalerbar komponentavstand. - Unngå
margin-top
. Vertikale marginer kan kollapse og gi uventede resultater. Enda viktigere er at en enkelt retningmargin
er en enklere mental modell. - For enklere skalering på tvers av enhetsstørrelser bør blokkelementer bruke
rem
s formargin
s. - Hold erklæringer om
font
-relaterte egenskaper på et minimum, brukinherit
når det er mulig.
CSS-variabler
Lagt til i v5.1.1
Med v5.1.1 standardiserte vi våre påkrevde @import
s på tvers av alle våre CSS-bunter (inkludert bootstrap.css
, bootstrap-reboot.css
, og bootstrap-grid.css
for å inkludere _root.scss
. Dette legger til :root
nivå-CSS-variabler til alle bunter, uavhengig av hvor mange av dem som brukes i den bunten. Til syvende og sist vil Bootstrap 5 fortsette å se flere CSS-variabler lagt til over tid.
Sidestandarder
Elementene og er oppdatert for å gi bedre standardinnstillinger for hele siden <html>
. <body>
Mer spesifikt:
- Den
box-sizing
er globalt innstilt på hvert element—inkludert*::before
og*::after
, tilborder-box
. Dette sikrer at den deklarerte bredden på elementet aldri overskrides på grunn av polstring eller kant.- Ingen base
font-size
er deklarert på<html>
, men16px
antas (nettleserens standard).font-size: 1rem
brukes på<body>
for enkel responsiv typeskalering via medieforespørsler samtidig som brukerens preferanser respekteres og en mer tilgjengelig tilnærming sikres. Denne nettleserens standard kan overstyres ved å endre$font-size-root
variabelen.
- Ingen base
- Den
<body>
setter også en globalfont-family
,font-weight
,line-height
, ogcolor
. Dette arves senere av noen skjemaelementer for å forhindre fontinkonsekvenser. - For sikkerhets skyld har den
<body>
en deklarertbackground-color
, som standard er#fff
.
Innebygd fontstabel
Bootstrap bruker en "native font stack" eller "system font stack" for optimal tekstgjengivelse på alle enheter og operativsystemer. Disse systemfontene er designet spesielt med tanke på dagens enheter, med forbedret gjengivelse på skjermer, støtte for variabel skrift og mer. Les mer om innfødte fontstabler i denne Smashing Magazine - artikkelen .
$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;
Merk at fordi fontstabelen inkluderer emoji-fonter, vil mange vanlige symbol/dingbat unicode-tegn bli gjengitt som flerfargede piktogrammer. Utseendet deres vil variere, avhengig av stilen som brukes i nettleserens/plattformens opprinnelige emoji-font, og de vil ikke bli påvirket av noen CSS- color
stiler.
Dette font-family
brukes på <body>
og arves automatisk globalt gjennom Bootstrap. For å bytte den globale font-family
, oppdater $font-family-base
og kompiler Bootstrap på nytt.
CSS-variabler
Etter hvert som Bootstrap 5 fortsetter å modnes, vil flere og flere stiler bli bygget med CSS-variabler som et middel for å gi mer sanntidstilpasning uten å måtte kompilere Sass på nytt. Vår tilnærming er å ta Sass-kildevariablene våre og transformere dem til CSS-variabler. På den måten, selv om du ikke bruker CSS-variabler, har du fortsatt all kraften til Sass. Dette pågår fortsatt og vil ta tid å implementere det fullt ut.
Vurder for eksempel disse :root
CSS-variablene for vanlige <body>
stiler:
@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};
I praksis blir disse variablene deretter brukt i Reboot slik:
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
}
Som lar deg gjøre sanntidstilpasninger slik du vil:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
Overskrifter og avsnitt
Alle overskriftselementer – f.eks. <h1>
– og <p>
er tilbakestilt for å få margin-top
fjernet dem. Overskrifter er margin-bottom: .5rem
lagt til og avsnitt margin-bottom: 1rem
for enkel avstand.
Overskrift | Eksempel |
---|---|
<h1></h1> |
h1. Bootstrap-overskrift |
<h2></h2> |
h2. Bootstrap-overskrift |
<h3></h3> |
h3. Bootstrap-overskrift |
<h4></h4> |
h4. Bootstrap-overskrift |
<h5></h5> |
h5. Bootstrap-overskrift |
<h6></h6> |
h6. Bootstrap-overskrift |
Lister
Alle lister <ul>
– , <ol>
, og – har fjernet <dl>
sine og en . Nestede lister har ingen . Vi har også tilbakestilt på og elementene.margin-top
margin-bottom: 1rem
margin-bottom
padding-left
<ul>
<ol>
- Alle lister har fjernet toppmargen
- Og bunnmarginen deres normaliserte seg
- Nestede lister har ingen bunnmarg
- På denne måten får de et jevnere utseende
- Spesielt når de følges av flere listeelementer
- Den venstre polstringen er også tilbakestilt
- Her er en bestilt liste
- Med noen få listeelementer
- Den har samme helhetlige utseende
- Som forrige uordnede liste
For enklere styling, tydelig hierarki og bedre avstand, har beskrivelseslister oppdatert margin
s. <dd>
s tilbakestille margin-left
til 0
og legge til margin-bottom: .5rem
. <dt>
s er uthevet .
- Beskrivelseslister
- En beskrivelsesliste er perfekt for å definere begreper.
- Begrep
- Definisjon for begrepet.
- En annen definisjon for samme begrep.
- Et annet begrep
- Definisjon for dette andre begrepet.
Innebygd kode
Pakk inn innebygde kodebiter med <code>
. Sørg for å unnslippe HTML-vinkelparenteser.
<section>
pakkes inn som inline.
For example, <code><section></code> should be wrapped as inline.
Kodeblokker
Bruk <pre>
s for flere linjer med kode. Igjen, sørg for å unnslippe eventuelle vinkelparenteser i koden for riktig gjengivelse. <pre>
Elementet tilbakestilles for å fjerne margin-top
og bruke enheter rem
for sitt 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>
Variabler
<var>
Bruk taggen for å indikere variabler .
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Brukerinnspill
Bruk for <kbd>
å indikere inndata som vanligvis legges inn via tastaturet.
For å redigere innstillinger, trykk 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>
Eksempelutgang
<samp>
Bruk taggen for å indikere prøveutgang fra et program .
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Tabeller
Tabeller er litt justert til stiler <caption>
, kollapser kantlinjer og sikrer konsistent text-align
hele veien. Ytterligere endringer for kantlinjer , polstring og mer kommer med klassen.table
.
Tabelloverskrift | Tabelloverskrift | Tabelloverskrift | Tabelloverskrift |
---|---|---|---|
Tabellcelle | Tabellcelle | Tabellcelle | Tabellcelle |
Tabellcelle | Tabellcelle | Tabellcelle | Tabellcelle |
Tabellcelle | Tabellcelle | Tabellcelle | Tabellcelle |
Skjemaer
Ulike formelementer har blitt startet på nytt for enklere basestiler. Her er noen av de mest bemerkelsesverdige endringene:
<fieldset>
s har ingen kantlinjer, polstring eller marger, slik at de enkelt kan brukes som omslag for individuelle innganger eller grupper av innganger.<legend>
s, som feltsett, har også blitt omstilt for å vises som en slags overskrift.<label>
s er satt tildisplay: inline-block
for å tillatemargin
å bli brukt.<input>
s,<select>
s,<textarea>
s og<button>
s adresseres stort sett av Normalize, men Reboot fjerner deresmargin
og setterline-height: inherit
også.<textarea>
s er endret til å bare kunne endre størrelsen vertikalt da horisontal endring av størrelse ofte "bryter" sidelayout.<button>
s og<input>
knappeelementer harcursor: pointer
når:not(:disabled)
.
Disse endringene, og flere, er vist nedenfor.
Støtte for inntasting av dato og farge
Husk at datoinndata ikke støttes fullt ut av alle nettlesere, nemlig Safari.
Pekere på knapper
Omstart inkluderer en forbedring for role="button"
å endre standardmarkøren til pointer
. Legg til dette attributtet til elementer for å indikere at elementene er interaktive. Denne rollen er ikke nødvendig for <button>
elementer som får sin egen cursor
forandring.
<span role="button" tabindex="0">Non-button element button</span>
Diverse elementer
Adresse
Elementet oppdateres for <address>
å tilbakestille nettleserens standard font-style
fra italic
til . er også nå arvet, og er lagt til. s er for å presentere kontaktinformasjon for nærmeste stamfar (eller et helt arbeid). Bevar formateringen ved å avslutte linjer med .normal
line-height
margin-bottom: 1rem
<address>
<br>
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Fullt navn
[email protected]
Blockquote
Standarden margin
på blockquotes er 1em 40px
, så vi tilbakestiller det til 0 0 1rem
for noe mer konsistent med andre elementer.
Et velkjent sitat, inneholdt i et blockquote-element.
Noen kjent i kildetittelen
Innebygde elementer
Elementet får grunnleggende stil for å få det <abbr>
til å skille seg ut blant avsnittsteksten.
Sammendrag
Standard cursor
for sammendrag er text
, så vi tilbakestiller det til pointer
for å formidle at elementet kan interageres med ved å klikke på det.
Noen detaljer
Mer info om detaljene.
Enda flere detaljer
Her er enda flere detaljer om detaljene.
HTML5- [hidden]
attributt
HTML5 legger til et nytt globalt attributt kalt[hidden]
, som er stilt som display: none
standard. Når vi låner en idé fra PureCSS , forbedrer vi denne standarden ved [hidden] { display: none !important; }
å bidra til å forhindre at den display
blir overstyrt ved et uhell.
<input type="text" hidden>
jQuery-inkompatibilitet
[hidden]
er ikke kompatibel med jQuerys $(...).hide()
og $(...).show()
metoder. Derfor støtter vi foreløpig ikke spesielt [hidden]
andre teknikker for å administrere display
elementene.
For å bare bytte synligheten til et element, noe som betyr at det display
ikke er endret og elementet fortsatt kan påvirke flyten av dokumentet, bruk klassen .invisible
i stedet.