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

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.

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.
Den <body>setter også en global font-family, line-height, og text-align. 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

Standard nettfonter (Helvetica Neue, Helvetica og Arial) har blitt droppet i Bootstrap 4 og erstattet med en "native font stack" for optimal tekstgjengivelse på alle enheter og operativsystemer. Les mer om innfødte fontstabler i denne Smashing Magazine - artikkelen .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // 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 skriftstakken 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- 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

Lister

Alle lister <ul>– , <ol>, og – har fjernet <dl>sine og en . Nestede lister har ingen .margin-topmargin-bottom: 1remmargin-bottom

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.

Forhåndsformatert tekst

<pre>Elementet tilbakestilles for å fjerne margin-topog bruke enheter remfor sitt margin-bottom.

.example-element {
  marg-bunn: 1rem;
}

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

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.

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

<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

Elementet får grunnleggende stil for å få det <abbr>til å skille seg ut blant avsnittsteksten.

Nulla attr vitae elit libero, a pharetra augue.

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 adds a new global attribute named [hidden], which is styled as display: none by default. Borrowing an idea from PureCSS, we improve upon this default by making [hidden] { display: none !important; } to help prevent its display from getting accidentally overridden. While [hidden] isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.

<input type="text" hidden>

jQuery incompatibility

[hidden] is not compatible with jQuery’s $(...).hide() and $(...).show() methods. Therefore, we don’t currently especially endorse [hidden] over other techniques for managing the display of elements.

To merely toggle the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document, use the .invisible class instead.