Neistarten

Restart, eng Sammlung vun elementspezifesche CSS Ännerungen an enger eenzeger Datei, kickstart Bootstrap fir eng elegant, konsequent an einfach Basis ze bidden fir op ze bauen.

Approche

Reboot baut op Normalize, liwwert vill HTML Elementer mat e bëssen Meenungsäusserungen mat nëmmen Elementselektoren. Zousätzlech Styling gëtt nëmme mat Klassen gemaach. Zum Beispill restarte mir e puer <table>Stiler fir eng méi einfach Baseline a bidden spéider .table, .table-bordered, a méi.

Hei sinn eis Richtlinnen a Grënn fir ze wielen wat am Restart ze iwwerschreiden:

Update e puer Browser Standardwäerter fir s ze benotzen remamplaz ems fir skalierbar Komponentabstand.
Vermeiden margin-top. Vertikal Margen kënnen zesummeklappen, onerwaart Resultater ginn. Méi wichteg awer, eng eenzeg Richtung marginass e méi einfache mentale Modell.
Fir méi einfach Skaléieren iwwer Apparatgréissten, solle Blockelementer rems fir margins benotzen.
Halt Deklaratioune vun font-relatéierten Eegeschafte op e Minimum, benotzt inheritwann ëmmer méiglech.

Säit Defaults

D' <html>an <body>Elementer ginn aktualiséiert fir besser Säitbreet Defaults ze bidden. Méi spezifesch:

Den box-sizingass weltwäit op all Element gesat - inklusiv *::beforean *::after, zu border-box. Dëst garantéiert datt d'deklaréiert Breet vum Element ni iwwerschratt gëtt wéinst Padding oder Grenz.
Keng Basis font-sizegëtt op der deklaréiert <html>, awer 16pxgëtt ugeholl (de Browser Standard). font-size: 1remass applizéiert op der <body>fir einfach reaktiounsfäeger Type-Scaling iwwer Medien Ufroen iwwerdeems Benotzer Virléiften Respekt an eng méi zougänglech Approche assuréieren.
Déi <body>setzt och eng global font-family, line-height, an text-align. Dëst gëtt spéider vun e puer Formelementer ierflecher fir Schrëftinkonsistenz ze vermeiden.
Fir d'Sécherheet huet den <body>en deklaréierten background-color, defaulting op #fff.

Gebierteg Schrëft Stack

D'Standard Webfonten (Helvetica Neue, Helvetica, an Arial) goufen am Bootstrap 4 erofgelooss an duerch en "native Schrëftstack" ersat fir eng optimal Textrendering op all Apparat an OS. Liest méi iwwer gebierteg Schrëftstacks an dësem Smashing Magazine Artikel .

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

Bedenkt datt well de Schrëftstapel Emoji Schrëften enthält, vill gemeinsam Symbol / dingbat Unicode Charaktere ginn als multifaarweg Piktogramme gemaach. Hir Erscheinung wäert variéieren, jee no dem Stil, deen an der gebierteg Emoji Schrëft vum Browser/Plattform benotzt gëtt, a si ginn net vun all CSS colorStiler beaflosst.

Dëst font-familygëtt op d' <body>an automatesch ierflecher weltwäit uechter Bootstrap applizéiert. Fir de globalen ze wiesselen font-family, aktualiséieren $font-family-basean nei kompiléieren Bootstrap.

Rubriken an Abschnitter

All Rubrik Elementer - zB - a ginn <h1>zréckgesat <p>fir hir margin-topewechzehuelen. Rubriken hunn margin-bottom: .5rembäigefüügt a Paragrafen margin-bottom: 1remfir einfach Abstand.

Rubrik	Beispill
`<h1></h1>`	h1. Bootstrap Rubrik
`<h2></h2>`	h2 vun. Bootstrap Rubrik
`<h3></h3>`	h3 vun. Bootstrap Rubrik
`<h4></h4>`	h4 vun. Bootstrap Rubrik
`<h5></h5>`	h5. Bootstrap Rubrik
`<h6></h6>`	h6. Bootstrap Rubrik

Lëschten

All Lëschte <ul>- , <ol>, an <dl>- hunn hir margin-topewechgeholl an eng margin-bottom: 1rem. Nestéiert Lëschte hu keng margin-bottom.

All Lëschte hunn hiren Topmarge geläscht
An hir ënnescht Margin normaliséiert
Nestéiert Lëschte hu keng ënnescht Marge
- Esou hunn se e méi gläichméisseg Erscheinungsbild
- Besonnesch wann gefollegt vu méi Lëscht Artikelen
Déi lénks Polsterung ass och zréckgesat ginn

Hei ass eng bestallt Lëscht
Mat e puer Lëscht Elementer
Et huet déiselwecht Gesamtoptik
Wéi d'virdrun unordered Lëscht

Fir méi einfach Styling, kloer Hierarchie, a besser Abstand, Beschreiwung Lëschte aktualiséiert margins. <dd>s zréckgesat margin-leftan 0addéieren margin-bottom: .5rem. <dt>s sinn fett .

Beschreiwung Lëschte: Eng Beschreiwungslëscht ass perfekt fir Begrëffer ze definéieren.
Begrëff: Definitioun fir de Begrëff.; Eng zweet Definitioun fir dee selwechte Begrëff.
En anere Begrëff: Definitioun fir dësen anere Begrëff.

Preformatéiert Text

D' <pre>Element gëtt zréckgesat fir seng ze läschen margin-topan remEenheeten fir seng margin-bottom.

.example-element {
  marge-ënnen: 1rem;
}

Dëscher

Dëscher sinn liicht ze Stil s ugepasst <caption>, Zesummebroch Grenzen, a suergen konsequent text-alignuechter. Zousätzlech Ännerungen fir Grenzen, Polsterung a méi kommen mat der .tableKlass .

Dëst ass e Beispill Dësch, an dëst ass seng Iwwerschrëft fir den Inhalt ze beschreiwen.
Dësch Rubrik	Dësch Rubrik	Dësch Rubrik	Dësch Rubrik
Dësch Zell	Dësch Zell	Dësch Zell	Dësch Zell
Dësch Zell	Dësch Zell	Dësch Zell	Dësch Zell
Dësch Zell	Dësch Zell	Dësch Zell	Dësch Zell

Formen

Verschidde Formelementer goufen nei gestart fir méi einfach Basisstiler. Hei sinn e puer vun de bedeitendsten Ännerungen:

<fieldset>s hu keng Grenzen, Polsterung oder Margin, sou datt se einfach als Wrapper fir eenzel Inputen oder Gruppen vun Inputen benotzt kënne ginn.
<legend>s, wéi fieldsets, goufen och restyled ginn als Rubrik vun Zorte ugewisen.
<label>s sinn agestallt display: inline-blockfir ze erlaben marginapplizéiert ginn.
<input>s, <select>s, <textarea>s, an <button>s gi meeschtens vun Normalize adresséiert, awer Reboot läscht hir margina setzt line-height: inheritoch.
<textarea>s ginn geännert fir nëmme vertikal ze änneren, well d'horizontal Gréisst änneren dacks d'Säitlayout "brach".
<button>s an <input>Knäppchen Elementer hunn cursor: pointerwann :not(:disabled).

Dës Ännerungen, a méi, ginn hei ënnen gewisen.

Pointer op Knäppercher

Reboot enthält eng Verbesserung fir role="button"den Default Cursor ze änneren pointer. Füügt dëst Attribut un Elementer fir ze hëllefen ze weisen datt Elementer interaktiv sinn. Dës Roll ass net néideg fir <button>Elementer, déi hir eege cursorÄnnerung kréien.

Non-Knäppchen Element Knäppchen

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

Verschidden Elementer

Adress

D' <address>Element gëtt aktualiséiert fir de Browser Standard font-stylevun italicop normal. line-heightass och elo ierflecher, a margin-bottom: 1remgouf dobäi. <address>s si fir d'Presentatioun vun Kontaktinformatioune fir den nooste Vorfahren (oder e ganze Kierper vun der Aarbecht). Erhaalen d'Formatéierung andeems d'Linnen mat <br>.

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

Voll Numm
[email protected]

Blockquote

De Standard marginop Blockquotes ass 1em 40px, sou datt mir dat zrécksetzen 0 0 1remfir eppes méi konsequent mat aneren Elementer.

E bekannten Zitat, an engem Blockquote Element enthale.

Een berühmten am Source Titel

Inline Elementer

D' <abbr>Element kritt Basis Styling fir et ënner Paragraftext erauszestellen.

Nulla attr vitae elit libero, a pharetra augue.

Resumé

De Standard cursoram Resumé ass text, sou datt mir dat zrécksetzen fir pointerze vermëttelen datt mat dem Element interagéiert ka ginn andeems Dir op klickt.

E puer Detailer

Méi Informatioun iwwer d'Detailer.

Nach méi Detailer

Hei sinn nach méi Detailer iwwer d'Detailer.

HTML5 `[hidden]`Attribut

HTML5 füügt en neit globalt Attribut mam Numm[hidden] , deen als display: noneStandard stiléiert ass. Eng Iddi vu PureCSS léinen , mir verbesseren dës Default andeems [hidden] { display: none !important; }mir hëllefen ze verhënneren displaydatt et zoufälleg iwwerschratt gëtt. Och wann [hidden]et net nativ vun IE10 ënnerstëtzt gëtt, kritt déi explizit Deklaratioun an eiser CSS dëse Problem ëm.

<input type="text" hidden>

jQuery Inkompatibilitéit

[hidden]ass net kompatibel mat jQuery's $(...).hide()a $(...).show()Methoden. Dofir ënnerstëtzen mir de Moment net besonnesch [hidden]aner Technike fir d' displayElementer ze managen.

Fir nëmmen d'Visibilitéit vun engem Element ze wiesselen, dat heescht datt displayet net geännert gëtt an d'Element kann nach ëmmer de Flux vum Dokument beaflossen, benotzt d' .invisibleKlass amplaz.