Genstart
Genstart, en samling af elementspecifikke CSS-ændringer i en enkelt fil, kickstarter Bootstrap for at give en elegant, konsistent og enkel baseline at bygge videre på.
Nærme sig
Genstart bygger på Normalize, og giver mange HTML-elementer en lidt egensindig stil, der kun bruger elementvælgere. Yderligere styling udføres kun med klasser. For eksempel genstarter vi nogle <table>
stilarter for en enklere baseline og giver senere .table
, .table-bordered
, og mere.
Her er vores retningslinjer og grunde til at vælge, hvad der skal tilsidesættes i Genstart:
- Opdater nogle browserstandardværdier til at bruge
rem
s i stedet forem
s til skalerbar komponentafstand. - Undgå
margin-top
. Lodrette marginer kan kollapse, hvilket giver uventede resultater. Endnu vigtigere er en enkelt retning afmargin
en enklere mental model. - For lettere skalering på tværs af enhedsstørrelser bør blokelementer bruge
rem
s formargin
s. - Hold erklæringer om
font
-relaterede egenskaber på et minimum, bruginherit
når det er muligt.
CSS variabler
Tilføjet i v5.1.1
Med v5.1.1 standardiserede vi vores påkrævede @import
s på tværs af alle vores CSS-bundter (inklusive bootstrap.css
, bootstrap-reboot.css
, og bootstrap-grid.css
for at inkludere _root.scss
. Dette tilføjer :root
niveau-CSS-variabler til alle bundter, uanset hvor mange af dem, der bruges i den pakke. I sidste ende vil Bootstrap 5 fortsætte med at se flere CSS-variabler tilføjet over tid.
Sidestandarder
Elementerne <html>
og <body>
er opdateret for at give bedre standardindstillinger for hele siden. Mere specifikt:
- Den
box-sizing
er globalt indstillet på hvert element – inklusive*::before
og*::after
, tilborder-box
. Dette sikrer, at elementets deklarerede bredde aldrig overskrides på grund af polstring eller kant.- Ingen base
font-size
er erklæret på<html>
, men16px
antages (browserens standard).font-size: 1rem
anvendes på<body>
for nem responsiv type-skalering via medieforespørgsler, mens brugernes præferencer respekteres og en mere tilgængelig tilgang sikres. Denne browserstandard kan tilsidesættes ved at ændre$font-size-root
variablen.
- Ingen base
- Den
<body>
indstiller også en globalfont-family
,font-weight
,line-height
, ogcolor
. Dette nedarves senere af nogle formularelementer for at forhindre skrifttypeuoverensstemmelser. - For en sikkerheds skyld
<body>
har den erklæretbackground-color
, som standard er#fff
.
Indbygget skrifttypestak
Bootstrap bruger en "native font stack" eller "system font stack" til optimal tekstgengivelse på alle enheder og operativsystemer. Disse systemskrifttyper er designet specifikt med nutidens enheder i tankerne, med forbedret gengivelse på skærme, understøttelse af variabel skrifttype og mere. Læs mere om indbyggede skrifttyper i denne artikel i 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;
Bemærk, at fordi skrifttypestakken indeholder emoji-skrifttyper, vil mange almindelige symbol/dingbat unicode-tegn blive gengivet som flerfarvede piktogrammer. Deres udseende vil variere afhængigt af den stil, der bruges i browserens/platformens oprindelige emoji-skrifttype, og de vil ikke blive påvirket af nogen CSS- color
stile.
Dette font-family
anvendes på <body>
og nedarves automatisk globalt gennem Bootstrap. For at skifte den globale font-family
skal du opdatere $font-family-base
og genkompilere Bootstrap.
CSS variabler
Efterhånden som Bootstrap 5 fortsætter med at modnes, vil flere og flere stilarter blive bygget med CSS-variabler som et middel til at give mere realtidstilpasning uden behov for altid at omkompilere Sass. Vores tilgang er at tage vores kilde Sass-variabler og transformere dem til CSS-variabler. På den måde, selvom du ikke bruger CSS-variabler, har du stadig al magten fra Sass. Dette er stadig i gang og vil tage tid at implementere fuldt ud.
Overvej f.eks. disse :root
CSS-variabler for almindelige <body>
stilarter:
@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 anvendes disse variabler derefter i Genstart sådan:
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
}
Hvilket giver dig mulighed for at foretage tilpasninger i realtid, som du vil:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
Overskrifter og afsnit
Alle overskriftselementer - f.eks. <h1>
- og nulstilles <p>
for at få deres margin-top
fjernet. Der er tilføjet overskrifter margin-bottom: .5rem
og afsnit margin-bottom: 1rem
for nem afstand.
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 <dl>
— har deres margin-top
fjernet og en margin-bottom: 1rem
. Indlejrede lister har ingen margin-bottom
. Vi har også nulstillet padding-left
tændt <ul>
og <ol>
elementer.
- Alle lister har deres øverste margen fjernet
- Og deres bundmargen normaliserede sig
- Indlejrede lister har ingen bundmargen
- På denne måde får de et mere jævnt udseende
- Især når efterfulgt af flere listepunkter
- Den venstre polstring er også blevet nulstillet
- Her er en bestilt liste
- Med et par listepunkter
- Den har det samme overordnede udseende
- Som den tidligere uordnede liste
For enklere styling, tydeligt hierarki og bedre afstand har beskrivelseslister opdateret margin
s. <dd>
s nulstilles margin-left
til 0
og tilføje margin-bottom: .5rem
. <dt>
s er med fed skrift .
- Beskrivelseslister
- En beskrivelsesliste er perfekt til at definere termer.
- Semester
- Definition for begrebet.
- En anden definition for det samme udtryk.
- Et andet udtryk
- Definition for dette andet udtryk.
Inline kode
Ombryd inline kodestykker med <code>
. Sørg for at undslippe HTML-vinkelparenteser.
<section>
pakkes ind som inline.
For example, <code><section></code> should be wrapped as inline.
Kodeblokke
Brug <pre>
s til flere linjer kode. Igen skal du sørge for at undslippe eventuelle vinkelparenteser i koden for korrekt gengivelse. Elementet <pre>
nulstilles for at fjerne dets margin-top
og bruge rem
enheder til dets 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>
Brug tagget til at angive variabler .
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Bruger input
Brug for <kbd>
at angive input, der typisk indtastes via tastaturet.
Tryk på for at redigere indstillinger 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>
Eksempel output
<samp>
Brug tagget til at angive prøveoutput fra et program .
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Tabeller
Tabeller er lidt justeret til stil <caption>
s, kollapser kanter og sikrer ensartet text-align
hele vejen igennem. Yderligere ændringer til kanter, polstring og mere kommer med klassen .table
.
Tabel overskrift | Tabel overskrift | Tabel overskrift | Tabel overskrift |
---|---|---|---|
Tabelcelle | Tabelcelle | Tabelcelle | Tabelcelle |
Tabelcelle | Tabelcelle | Tabelcelle | Tabelcelle |
Tabelcelle | Tabelcelle | Tabelcelle | Tabelcelle |
Formularer
Forskellige formelementer er blevet genstartet for at få enklere basestile. Her er nogle af de mest bemærkelsesværdige ændringer:
<fieldset>
s har ingen kanter, polstring eller margen, så de kan nemt bruges som omslag til individuelle input eller grupper af input.<legend>
s, ligesom feltsæt, er også blevet ændret til at blive vist som en slags overskrift.<label>
s er indstillet tildisplay: inline-block
at tillademargin
at blive anvendt.<input>
s,<select>
s,<textarea>
s og<button>
s adresseres for det meste af Normalize, men Genstart fjerner også deresmargin
og sætline-height: inherit
.<textarea>
s er ændret til kun at kunne ændres lodret, da vandret størrelsesændring ofte "bryder" sidelayoutet.<button>
s og<input>
knapelementer harcursor: pointer
hvornår:not(:disabled)
.
Disse ændringer og flere er vist nedenfor.
Understøttelse af dato- og farveindtastning
Husk, at datoinput ikke understøttes fuldt ud af alle browsere, nemlig Safari.
Pointer på knapper
Genstart inkluderer en forbedring for role="button"
at ændre standardmarkøren til pointer
. Tilføj denne attribut til elementer for at hjælpe med at angive, at elementer er interaktive. Denne rolle er ikke nødvendig for <button>
elementer, som får deres egen cursor
forandring.
<span role="button" tabindex="0">Non-button element button</span>
Diverse elementer
Adresse
Elementet <address>
opdateres for at nulstille browserens standard font-style
fra italic
til normal
. line-height
er også nu nedarvet, og margin-bottom: 1rem
er tilføjet. <address>
s er til at præsentere kontaktoplysninger for den nærmeste forfader (eller et helt arbejde). Bevar formateringen ved at afslutte linjer med <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Fulde navn
[email protected]
Blokcitat
Standarden margin
på blockquotes er 1em 40px
, så vi nulstiller det til 0 0 1rem
for noget mere konsistent med andre elementer.
Et velkendt citat, indeholdt i et blokcitat-element.
En berømt i Kildetitel
Inline elementer
Elementet <abbr>
modtager grundlæggende styling for at få det til at skille sig ud blandt afsnitsteksten.
Resumé
Standarden cursor
på resume er text
, så vi nulstiller det til pointer
for at formidle, at elementet kan interageres med ved at klikke på det.
Nogle detaljer
Mere info om detaljerne.
Endnu flere detaljer
Her er endnu flere detaljer om detaljerne.
HTML5 [hidden]
attribut
HTML5 tilføjer en ny global attribut ved navn[hidden]
, som er stilet som display: none
standard. Ved at låne en idé fra PureCSS forbedrer vi denne standard ved [hidden] { display: none !important; }
at hjælpe med at forhindre, at den display
ved et uheld bliver tilsidesat.
<input type="text" hidden>
jQuery inkompatibilitet
[hidden]
er ikke kompatibel med jQuery's $(...).hide()
og $(...).show()
metoder. Derfor støtter vi i øjeblikket ikke særligt [hidden]
andre teknikker til styring display
af elementer.
For blot at skifte synligheden af et element, hvilket betyder, at det display
ikke er ændret, og elementet stadig kan påvirke flowet af dokumentet, skal du bruge klassen .invisible
i stedet.