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.

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

Standardwebskrifttyperne (Helvetica Neue, Helvetica og Arial) er blevet droppet i Bootstrap 4 og erstattet med en "native font stack" for optimal tekstgengivelse på alle enheder og operativsystemer. Læs mere om indbyggede skrifttyper i denne artikel i Smashing Magazine .

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

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

Lister

Alle lister <ul>— , <ol>, og <dl>— har deres margin-topfjernet og en margin-bottom: 1rem. Indlejrede lister har ingen margin-bottom.

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.

Forformateret tekst

Elementet <pre>nulstilles for at fjerne dets margin-topog bruge remenheder til dets margin-bottom.

.example-element {
  margin-bund: 1rem;
}

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

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.

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

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

Nulla attr vitae elit libero, a pharetra augue.

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. Selvom [hidden]det ikke er indbygget understøttet af IE10, omgår den eksplicitte erklæring i vores CSS dette problem.

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