Source

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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis i pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat kl
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis i pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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.

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltall posuere erat en ante.

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 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. Selv om [hidden]det ikke er naturlig støttet av IE10, omgår den eksplisitte erklæringen i CSS-en vår dette problemet.

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