Spring til hovedindhold Spring til dokumentnavigation
Check
in English

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 rems i stedet for ems til skalerbar komponentafstand.
  • Undgå margin-top. Lodrette marginer kan kollapse, hvilket giver uventede resultater. Endnu vigtigere er en enkelt retning af marginen enklere mental model.
  • For lettere skalering på tværs af enhedsstørrelser bør blokelementer bruge rems for margins.
  • Hold erklæringer om font-relaterede egenskaber på et minimum, brug inheritnår det er muligt.

CSS variabler

Tilføjet i v5.2.0

Med v5.1.1 standardiserede vi vores påkrævede @imports på tværs af alle vores CSS-pakker (inklusive bootstrap.css, bootstrap-reboot.css, og bootstrap-grid.css) til at inkludere _root.scss. Dette tilføjer :rootniveau CSS-variabler til alle bundter, uanset hvor mange af dem, der bruges i det pågældende bundt. I sidste ende vil Bootstrap 5 fortsætte med at se flere CSS-variabler tilføjet over tid, for at give mere realtidstilpasning uden behov for altid at genkompilere 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 :rootCSS-variabler for almindelige <body>stilarter:

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};
  

I praksis anvendes disse variabler derefter i Genstart sådan:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$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>

Sidestandarder

Elementerne <html>og <body>er opdateret for at give bedre standardindstillinger for hele siden. Mere specifikt:

  • Den box-sizinger globalt indstillet på hvert element – ​​inklusive *::beforeog *::after, til border-box. Dette sikrer, at elementets deklarerede bredde aldrig overskrides på grund af polstring eller kant.
    • Ingen base font-sizeer erklæret på <html>, men 16pxantages (browserens standard). font-size: 1remanvendes 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-rootvariablen.
  • Den <body>indstiller også en global font-family, font-weight, line-height, og color. Dette nedarves senere af nogle formularelementer for at forhindre skrifttypeuoverensstemmelser.
  • For en sikkerheds skyld <body>har den erklæret background-color, som standard er #fff.

Indbygget skrifttypestak

Bootstrap bruger en "native font stack" eller "system font stack" til optimal tekstgengivelse på hver enhed og OS. 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,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // 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- colorstile.

Dette font-familyanvendes på <body>og nedarves automatisk globalt gennem Bootstrap. For at skifte den globale font-familyskal du opdatere $font-family-baseog genkompilere Bootstrap.

Overskrifter og afsnit

Alle overskriftselementer - f.eks. <h1>- og nulstilles <p>for at få deres margin-topfjernet. Der er tilføjet overskrifter margin-bottom: .5remog afsnit margin-bottom: 1remfor 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

Horisontale regler

Elementet <hr>er blevet forenklet. I lighed med browserens standardindstillinger er <hr>s stylet via border-top, har en standard opacity: .25, og arver automatisk deres border-colorvia color, inklusive hvornår colorer indstillet via forælderen. De kan ændres med tekst-, kant- og opacitetsværktøjer.





html
<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

Lister

Alle lister <ul>— , <ol>, og <dl>— har deres margin-topfjernet og en margin-bottom: 1rem. Indlejrede lister har ingen margin-bottom. Vi har også nulstillet padding-lefttændt <ul>og <ol>elementerne.

  • 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
  1. Her er en bestilt liste
  2. Med et par listepunkter
  3. Den har det samme overordnede udseende
  4. Som den tidligere uordnede liste

For enklere styling, tydeligt hierarki og bedre afstand har beskrivelseslister opdateret margins. <dd>s nulstilles margin-lefttil 0og tilføjes margin-bottom: .5rem. <dt>s er med fed skrift .

Beskrivelseslister
En beskrivelsesliste er perfekt til at definere termer.
Semester
Definition af 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.

Skal f.eks. <section>pakkes ind som inline.
html
For example, <code>&lt;section&gt;</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-topog bruge remenheder til dets margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>
html
<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Variabler

<var>Brug tagget til at angive variabler .

y = m x + b
html
<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.

For at skifte bibliotek skal du skrive cdefterfulgt af navnet på mappen.
Tryk på for at redigere indstillinger ctrl + ,
html
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 .

Denne tekst er beregnet til at blive behandlet som et eksempeloutput fra et computerprogram.
html
<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-alignhele vejen igennem. Yderligere ændringer til kanter, polstring og mere kommer med klassen .table.

Dette er en eksempeltabel, og dette er dens billedtekst til at beskrive indholdet.
Tabel overskrift Tabel overskrift Tabel overskrift Tabel overskrift
Tabel celle Tabel celle Tabel celle Tabel celle
Tabel celle Tabel celle Tabel celle Tabel celle
Tabel celle Tabel celle Tabel celle Tabel celle
html
<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

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 til display: inline-blockat tillade marginat blive anvendt.
  • <input>s, <select>s, <textarea>s og <button>s adresseres for det meste af Normalize, men Genstart fjerner også deres marginog sæt line-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 har cursor: pointerhvornår :not(:disabled).

Disse ændringer og flere er vist nedenfor.

Eksempel legende

100

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 indikere, at elementer er interaktive. Denne rolle er ikke nødvendig for <button>elementer, som får deres egen cursorforandring.

Ikke-knap element knap
html
<span role="button" tabindex="0">Non-button element button</span>

Diverse elementer

Adresse

Elementet <address>opdateres for at nulstille browserens standard font-stylefra italictil normal. line-heighter også nu nedarvet, og margin-bottom: 1remer 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>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Fulde navn
[email protected]

Blokcitat

Standarden marginpå blockquotes er 1em 40px, så vi nulstiller det til 0 0 1remfor 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 stil for at få det til at skille sig ud blandt afsnitsteksten.

HTML- forkortelseselementet .

Resumé

Standarden cursorpå resume er text, så vi nulstiller det til pointerfor 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: nonestandard. 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 displayved 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 displayaf elementer.

For blot at skifte synligheden af ​​et element, hvilket betyder, at det displayikke er ændret, og elementet stadig kan påvirke flowet af dokumentet, skal du bruge klassen .invisiblei stedet.