Opnieuw opstarten
Reboot, een verzameling elementspecifieke CSS-wijzigingen in een enkel bestand, kickstart Bootstrap om een elegante, consistente en eenvoudige basislijn te bieden om op voort te bouwen.
Nadering
Reboot bouwt voort op Normalize en biedt veel HTML-elementen met enigszins eigenzinnige stijlen met alleen elementkiezers. Extra styling wordt alleen gedaan met lessen. We herstarten bijvoorbeeld sommige <table>
stijlen voor een eenvoudigere basislijn en bieden later .table
, .table-bordered
, en meer.
Hier zijn onze richtlijnen en redenen om te kiezen wat u wilt overschrijven in Opnieuw opstarten:
- Werk enkele standaardwaarden van de browser bij om
rem
s te gebruiken in plaats vanem
s voor schaalbare afstand tussen componenten. - Vermijd
margin-top
. Verticale marges kunnen instorten, met onverwachte resultaten tot gevolg. Belangrijker is echter dat een enkele richtingmargin
een eenvoudiger mentaal model is. - Voor eenvoudiger schalen tussen apparaatgroottes moeten blokelementen
rem
s voormargin
s gebruiken. - Beperk declaraties van
font
-gerelateerde eigenschappen tot een minimum en gebruikinherit
waar mogelijk.
Standaardinstellingen voor pagina's
De elementen <html>
en <body>
zijn bijgewerkt om betere standaardinstellingen voor de hele pagina te bieden. Specifieker:
- De
box-sizing
is globaal ingesteld op elk element, inclusief*::before
en*::after
, totborder-box
. Dit zorgt ervoor dat de gedeclareerde breedte van het element nooit wordt overschreden vanwege opvulling of rand. - Er wordt geen basis
font-size
gedeclareerd op de<html>
, maar16px
wordt aangenomen (de standaardinstelling van de browser).font-size: 1rem
wordt toegepast op de<body>
voor eenvoudige responsieve type-schaling via mediaquery's met respect voor gebruikersvoorkeuren en een meer toegankelijke benadering. - Het
<body>
stelt ook een globalefont-family
,line-height
, entext-align
. Dit wordt later overgenomen door sommige formulierelementen om inconsistenties in het lettertype te voorkomen. - Voor de veiligheid
<body>
heeft het een gedeclareerdbackground-color
, standaard ingesteld op#fff
.
Native lettertypestapel
De standaard weblettertypen (Helvetica Neue, Helvetica en Arial) zijn in Bootstrap 4 weggelaten en vervangen door een "native font-stack" voor optimale tekstweergave op elk apparaat en besturingssysteem. Lees meer over native font-stacks in dit 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;
Houd er rekening mee dat, omdat de lettertypestapel emoji-lettertypen bevat, veel veelgebruikte Unicode-tekens voor symbolen/dingbats worden weergegeven als veelkleurige pictogrammen. Hun uiterlijk zal variëren, afhankelijk van de stijl die wordt gebruikt in het eigen emoji-lettertype van de browser/het platform, en ze worden niet beïnvloed door CSS- color
stijlen.
Dit font-family
wordt toegepast op de <body>
en wordt automatisch wereldwijd overgenomen door Bootstrap. Om de global te wisselen font-family
, update $font-family-base
en compileer je Bootstrap.
Koppen en alinea's
Alle kopelementen—bijv.— <h1>
en <p>
worden opnieuw ingesteld om te worden margin-top
verwijderd. Koppen zijn margin-bottom: .5rem
toegevoegd en alinea 's margin-bottom: 1rem
voor gemakkelijke spatiëring.
rubriek | Voorbeeld |
---|---|
<h1></h1> |
h1. Bootstrap-kop |
<h2></h2> |
h2. Bootstrap-kop |
<h3></h3> |
h3. Bootstrap-kop |
<h4></h4> |
h4. Bootstrap-kop |
<h5></h5> |
h5. Bootstrap-kop |
<h6></h6> |
h6. Bootstrap-kop |
Lijsten
Alle lijsten <ul>
— , <ol>
, en <dl>
— zijn margin-top
verwijderd en een margin-bottom: 1rem
. Geneste lijsten hebben geen margin-bottom
.
- Van alle lijsten is de bovenste marge verwijderd
- En hun ondermarge normaliseerde
- Geneste lijsten hebben geen ondermarge
- Zo zien ze er egaler uit
- Vooral wanneer gevolgd door meer lijstitems
- De linker padding is ook gereset
- Hier is een geordende lijst
- Met een paar lijstitems
- Het heeft dezelfde algehele uitstraling
- Zoals de vorige ongeordende lijst
Voor een eenvoudigere styling, duidelijke hiërarchie en betere spatiëring hebben beschrijvingslijsten bijgewerkte margin
s. <dd>
s reset margin-left
naar 0
en voeg toe margin-bottom: .5rem
. <dt>
s zijn vetgedrukt .
- Beschrijvingslijsten
- Een beschrijvingslijst is perfect voor het definiëren van termen.
- Termijn
- Definitie voor de term.
- Een tweede definitie voor dezelfde term.
- een andere term
- Definitie voor deze andere term.
Vooraf opgemaakte tekst
Het <pre>
element wordt gereset om zijn te verwijderen margin-top
en rem
eenheden te gebruiken voor zijn margin-bottom
.
.voorbeeldelement { marge-onder: 1rem; }
Tafels
Tabellen zijn enigszins aangepast aan stijlen <caption>
, randen samenvouwen en zorgen voor consistentie text-align
. Extra wijzigingen voor randen, opvulling en meer komen met de .table
klasse .
Tabelkop | Tabelkop | Tabelkop | Tabelkop |
---|---|---|---|
Tabel cel | Tabel cel | Tabel cel | Tabel cel |
Tabel cel | Tabel cel | Tabel cel | Tabel cel |
Tabel cel | Tabel cel | Tabel cel | Tabel cel |
Formulieren
Verschillende vormelementen zijn opnieuw opgestart voor eenvoudigere basisstijlen. Hier zijn enkele van de meest opvallende wijzigingen:
<fieldset>
s hebben geen randen, opvulling of marge, zodat ze gemakkelijk kunnen worden gebruikt als wrappers voor individuele invoer of groepen invoer.<legend>
s, net als veldensets, zijn ook opnieuw gestyled om als een soort kop te worden weergegeven.<label>
s zijn ingesteld omdisplay: inline-block
te kunnenmargin
worden toegepast.<input>
s,<select>
s,<textarea>
s en<button>
s worden meestal geadresseerd door Normalize, maar Reboot verwijdert ook hunmargin
en setsline-height: inherit
.<textarea>
s zijn gewijzigd om alleen verticaal te kunnen worden vergroot of verkleind, aangezien horizontale grootte vaak de paginalay-out "onderbreekt".<button>
s en<input>
knopelementen hebbencursor: pointer
wanneer:not(:disabled)
.
Deze veranderingen, en meer, worden hieronder gedemonstreerd.
Aanwijzers op knoppen
Opnieuw opstarten bevat een verbetering role="button"
om de standaardcursor te wijzigen in pointer
. Voeg dit attribuut toe aan elementen om aan te geven dat elementen interactief zijn. Deze rol is niet nodig voor <button>
elementen, die hun eigen cursor
verandering krijgen.
<span role="button" tabindex="0">Non-button element button</span>
Diverse elementen
Adres
Het <address>
element is bijgewerkt om de browserstandaard te resetten font-style
van italic
naar normal
. line-height
is nu ook geërfd en margin-bottom: 1rem
is toegevoegd. <address>
s zijn voor het presenteren van contactgegevens voor de dichtstbijzijnde voorouder (of een heel oeuvre). Behoud de opmaak door regels te beëindigen met <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Volledige naam
[email protected]
Blokcitaat
De standaardwaarde margin
voor blockquotes is 1em 40px
, dus we stellen dat opnieuw in 0 0 1rem
voor iets dat consistenter is met andere elementen.
Een bekende quote, vervat in een blockquote-element.
Inline-elementen
Het <abbr>
element krijgt een basisstijl om het op te laten vallen tussen alineatekst.
Overzicht
De standaard cursor
op samenvatting is text
, dus we resetten dat naar om aan pointer
te geven dat het element kan worden gebruikt door erop te klikken.
Enkele details
Meer info over de details.
Nog meer details
Hier zijn nog meer details over de details.
HTML5- [hidden]
kenmerk
HTML5 voegt een nieuw globaal attribuut toe met de naam[hidden]
, dat display: none
standaard is gestileerd. Door een idee van PureCSS te lenen , verbeteren we deze standaard door [hidden] { display: none !important; }
ervoor te zorgen dat deze display
niet per ongeluk wordt overschreven. Hoewel [hidden]
het niet standaard wordt ondersteund door IE10, lost de expliciete verklaring in onze CSS dat probleem op.
<input type="text" hidden>
jQuery-incompatibiliteit
[hidden]
is niet compatibel met jQuery's $(...).hide()
en $(...).show()
methoden. Daarom onderschrijven we momenteel niet specifiek [hidden]
andere technieken voor het beheren display
van de elementen.
Als u alleen de zichtbaarheid van een element wilt wijzigen, wat betekent dat het display
niet wordt gewijzigd en het element nog steeds de stroom van het document kan beïnvloeden, gebruikt u in plaats daarvan de .invisible
klasse .