Source

Neistarten

Reboot, 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 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;

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.

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

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

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

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

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

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

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.