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
rem
amplazem
s fir skalierbar Komponentabstand. - Vermeiden
margin-top
. Vertikal Margen kënnen zesummeklappen, onerwaart Resultater ginn. Méi wichteg awer, eng eenzeg Richtungmargin
ass e méi einfache mentale Modell. - Fir méi einfach Skaléieren iwwer Apparatgréissten, solle Blockelementer
rem
s firmargin
s benotzen. - Halt Deklaratioune vun
font
-relatéierten Eegeschafte op e Minimum, benotztinherit
wann ë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-sizing
ass weltwäit op all Element gesat - inklusiv*::before
an*::after
, zuborder-box
. Dëst garantéiert datt d'deklaréiert Breet vum Element ni iwwerschratt gëtt wéinst Padding oder Grenz. - Keng Basis
font-size
gëtt op der deklaréiert<html>
, awer16px
gëtt ugeholl (de Browser Standard).font-size: 1rem
ass 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 globalfont-family
,line-height
, antext-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éiertenbackground-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 color
Stiler beaflosst.
Dëst font-family
gëtt op d' <body>
an automatesch ierflecher weltwäit uechter Bootstrap applizéiert. Fir de globalen ze wiesselen font-family
, aktualiséieren $font-family-base
an nei kompiléieren Bootstrap.
Rubriken an Abschnitter
All Rubrik Elementer - zB - a ginn <h1>
zréckgesat <p>
fir hir margin-top
ewechzehuelen. Rubriken hunn margin-bottom: .5rem
bäigefüügt a Paragrafen margin-bottom: 1rem
fir 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-top
ewechgeholl 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 margin
s. <dd>
s zréckgesat margin-left
an 0
addé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-top
an rem
Eenheeten 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-align
uechter. Zousätzlech Ännerungen fir Grenzen, Polsterung a méi kommen mat der .table
Klass .
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 agestalltdisplay: inline-block
fir ze erlabenmargin
applizéiert ginn.<input>
s,<select>
s,<textarea>
s, an<button>
s gi meeschtens vun Normalize adresséiert, awer Reboot läscht hirmargin
a setztline-height: inherit
och.<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 hunncursor: pointer
wann: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.
<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-style
vun italic
op normal
. line-height
ass och elo ierflecher, a margin-bottom: 1rem
gouf 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>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Voll Numm
[email protected]
Blockquote
De Standard margin
op Blockquotes ass 1em 40px
, sou datt mir dat zrécksetzen 0 0 1rem
fir eppes méi konsequent mat aneren Elementer.
E bekannten Zitat, an engem Blockquote Element enthale.
Inline Elementer
D' <abbr>
Element kritt Basis Styling fir et ënner Paragraftext erauszestellen.
Resumé
De Standard cursor
am Resumé ass text
, sou datt mir dat zrécksetzen fir pointer
ze 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: none
Standard 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 display
datt 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' display
Elementer ze managen.
Fir nëmmen d'Visibilitéit vun engem Element ze wiesselen, dat heescht datt display
et net geännert gëtt an d'Element kann nach ëmmer de Flux vum Dokument beaflossen, benotzt d' .invisible
Klass amplaz.