in English

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

På denne siden

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 rems i stedet for ems for skalerbar komponentavstand.
Unngå margin-top. Vertikale marginer kan kollapse og gi uventede resultater. Enda viktigere er at en enkelt retning marginer en enklere mental modell.
For enklere skalering på tvers av enhetsstørrelser bør blokkelementer bruke rems for margins.
Hold erklæringer om font-relaterte egenskaper på et minimum, bruk inheritnår det er mulig.

CSS-variabler

Lagt til i v5.2.0

Med v5.1.1 standardiserte vi våre påkrevde @imports på tvers av alle CSS-pakkene våre (inkludert bootstrap.css, bootstrap-reboot.css, og bootstrap-grid.css) for å inkludere _root.scss. Dette legger til :rootnivå 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, for å gi mer sanntidstilpasning uten behov for alltid å rekompilere Sass. 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 :rootCSS-variablene for vanlige <body>stiler:

  @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 blir disse variablene deretter brukt i Reboot slik:

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
}

Som lar deg gjøre sanntidstilpasninger slik du vil:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

Sidestandarder

Elementene og er oppdatert for å gi bedre standardinnstillinger for hele siden <html>. <body>Mer spesifikt:

Den box-sizinger globalt innstilt på hvert element—inkludert *::beforeog *::after, til border-box. Dette sikrer at den deklarerte bredden på elementet aldri overskrides på grunn av polstring eller kant.
- Ingen base font-sizeer deklarert på <html>, men 16pxantas (nettleserens standard). font-size: 1rembrukes 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-rootvariabelen.
Den <body>setter også en global font-family, font-weight, line-height, og color. Dette arves senere av noen skjemaelementer for å forhindre fontinkonsekvenser.
For sikkerhets skyld har den <body>en deklarert background-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,
  // 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;

Merk at fordi skriftstakken inneholder 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- colorstiler.

Dette font-familybrukes på <body>og arves automatisk globalt gjennom Bootstrap. For å bytte den globale font-family, oppdater $font-family-baseog kompiler Bootstrap på nytt.

Overskrifter og avsnitt

Alle overskriftselementer – f.eks. <h1>– og <p>er tilbakestilt for å få margin-topfjernet dem. Overskrifter er margin-bottom: .5remlagt til og avsnitt margin-bottom: 1remfor 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

Horisontale regler

<hr>Elementet er forenklet . I likhet med nettleserstandarder er <hr>s stylet via border-top, har en standard opacity: .25, og arver automatisk deres border-colorvia color, inkludert når colorer satt via overordnet. De kan endres med tekst-, kant- og opasitetsverktøy.

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 – har fjernet <dl>sine og en . Nestede lister har ingen . Vi har også tilbakestilt på og elementene.margin-topmargin-bottom: 1remmargin-bottompadding-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 margins. <dd>s tilbakestille margin-lefttil 0og 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.

Skal for eksempel <section>pakkes inn som inline.

html

For example, <code>&lt;section&gt;</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-topog bruke enheter remfor sitt 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>Bruk taggen for å indikere variabler .

y = m x + b

html

<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 å bytte katalog, skriv cdetterfulgt av navnet på katalogen.
For å redigere innstillinger, trykk 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>

Eksempelutgang

<samp>Bruk taggen for å indikere prøveutgang fra et program .

Denne teksten er ment å bli behandlet som eksempelutgang fra et dataprogram.

html

<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-alignhele veien. Ytterligere endringer for kantlinjer , polstring og mer kommer med klassen.table .

Dette er en eksempeltabell, og dette er bildeteksten for å beskrive innholdet.
Tabelloverskrift	Tabelloverskrift	Tabelloverskrift	Tabelloverskrift
Tabellcelle	Tabellcelle	Tabellcelle	Tabellcelle
Tabellcelle	Tabellcelle	Tabellcelle	Tabellcelle
Tabellcelle	Tabellcelle	Tabellcelle	Tabellcelle

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>

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 til display: inline-blockfor å tillate marginå bli brukt.
<input>s, <select>s, <textarea>s og <button>s adresseres stort sett av Normalize, men Reboot fjerner deres marginog setter line-height: inheritogså.
<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 har cursor: pointernår :not(:disabled).

Disse endringene, og flere, er vist nedenfor.

Eksempel legende

Eksempel på input

Eksempel på e-post

Eksempel telefon

Eksempel url

Eksempelnummer

Eksempelsøk

Eksempelområde

Eksempel på filinndata

Eksempelvalg

Merk av i denne avmerkingsboksen

Alternativ én er dette og hint Alternativ to er noe annet som også er veldig langt for å demonstrere innpakningen av disse fancy skjemakontrollene. Alternativ tre er deaktivert

Eksempel på tekstområde

Eksempel dato

Eksempel tid

Eksempel passord

Eksempel datetime-local

Eksempel uke

Eksempel måned

Eksempel farge

Eksempelutgang 100

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

Ikke-knappelementknapp

html

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

Diverse elementer

Adresse

Elementet oppdateres for <address>å tilbakestille nettleserens standard font-stylefra italictil . 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 .normalline-heightmargin-bottom: 1rem<address><br>

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Fullt navn
[email protected]

Blockquote

Standarden marginpå blockquotes er 1em 40px, så vi tilbakestiller det til 0 0 1remfor noe mer konsistent med andre elementer.

Et velkjent sitat, inneholdt i et blockquote-element.

Noen kjent i kildetittelen

Innebygde elementer

De<abbr> til å skille seg ut blant avsnittsteksten.

HTML -forkortelseselementet .

Sammendrag

Standard cursorfor sammendrag er text, så vi tilbakestiller det til pointerfor å 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: nonestandard. Når vi låner en idé fra PureCSS , forbedrer vi denne standarden ved [hidden] { display: none !important; }å bidra til å forhindre at den displayblir 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 displayelementene.

For å bare bytte synligheten til et element, noe som betyr at det displayikke er endret og elementet fortsatt kan påvirke flyten av dokumentet, bruk klassen .invisiblei stedet.

Start på nytt

Nærme seg

CSS-variabler

Sidestandarder

Innebygd fontstabel

Overskrifter og avsnitt

Horisontale regler

Lister

Innebygd kode

Kodeblokker

Variabler

Brukerinnspill

Eksempelutgang

Tabeller

Skjemaer

Støtte for inntasting av dato og farge

Pekere på knapper

Diverse elementer

Adresse

Blockquote

Innebygde elementer

Sammendrag

HTML5- [hidden]attributt

jQuery-inkompatibilitet

HTML5- `[hidden]`attributt