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å.

På denne side

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

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 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

Eksempel input

Eksempel e-mail

Eksempel telefon

Eksempel url

Eksempel nummer

Eksempelsøgning

Eksempelområde

Eksempel på filinput

Eksempelvalg

Marker dette afkrydsningsfelt

Mulighed et er dette og hint Mulighed to er noget andet, der også er superlangt til at demonstrere indpakningen af disse smarte formkontrolelementer. Mulighed tre er deaktiveret

Eksempel på tekstområde

Eksempel dato

Eksempel tid

Eksempel på adgangskode

Eksempel datetime-local

Eksempel uge

Eksempel måned

Eksempel farve

Eksempel output 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.

Genstart

Nærme sig

CSS variabler

Sidestandarder

Indbygget skrifttypestak

Overskrifter og afsnit

Horisontale regler

Lister

Inline kode

Kodeblokke

Variabler

Bruger input

Eksempel output

Tabeller

Formularer

Understøttelse af dato- og farveindtastning

Pointer på knapper

Diverse elementer

Adresse

Blokcitat

Inline elementer

Resumé

HTML5 [hidden]attribut

jQuery inkompatibilitet

HTML5 `[hidden]`attribut