Source

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 OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (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-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.

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

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.

Disse ændringer og flere er vist nedenfor.

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.

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

En berømt i Kildetitel

Inline elementer

Elementet <abbr>modtager grundlæggende styling 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.