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.
CSS-variabelen
Toegevoegd in v5.1.1
Met v5.1.1 hebben we onze vereiste @import
s gestandaardiseerd voor al onze CSS-bundels (inclusief bootstrap.css
, bootstrap-reboot.css
, en bootstrap-grid.css
om _root.scss
. Dit voegt :root
niveau-CSS-variabelen toe aan alle bundels, ongeacht hoeveel ervan in die bundel worden gebruikt. Uiteindelijk zal Bootstrap 5 doorgaan met zie meer CSS-variabelen die in de loop van de tijd zijn toegevoegd.
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. Deze browserstandaard kan worden overschreven door de$font-size-root
variabele te wijzigen.
- Er wordt geen basis
- Het
<body>
stelt ook een globalefont-family
,font-weight
,line-height
encolor
. 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
Bootstrap maakt gebruik van een "native font stack" of "system font stack" voor optimale tekstweergave op elk apparaat en besturingssysteem. Deze systeemlettertypen zijn speciaal ontworpen met de huidige apparaten in gedachten, met verbeterde weergave op schermen, ondersteuning voor variabele lettertypen en meer. Lees meer over native font-stacks in dit Smashing Magazine- artikel .
$font-family-sans-serif:
// Cross-platform generic font family (default user interface font)
system-ui,
// Safari for macOS and iOS (San Francisco)
-apple-system,
// 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 veelvoorkomende symbool-/dingbat-unicode-tekens 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.
CSS-variabelen
Naarmate Bootstrap 5 volwassener wordt, zullen er steeds meer stijlen worden gebouwd met CSS -variabelen als een middel om meer realtime aanpassingen te bieden zonder dat Sass altijd opnieuw moet worden gecompileerd. Onze aanpak is om onze Sass-bronvariabelen te nemen en deze om te zetten in CSS-variabelen. Op die manier, zelfs als je geen CSS-variabelen gebruikt, heb je nog steeds alle kracht van Sass. Dit is nog in volle gang en zal enige tijd vergen om volledig te implementeren.
Overweeg bijvoorbeeld deze :root
CSS-variabelen voor veelvoorkomende <body>
stijlen:
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};
In de praktijk worden die variabelen dan als volgt in Reboot toegepast:
body {
margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
}
Hiermee kunt u realtime aanpassingen maken zoals u dat wilt:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
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
. We hebben ook de padding-left
aan <ul>
en <ol>
elementen gereset.
- 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.
Inline-code
Wikkel inline codefragmenten in met <code>
. Zorg ervoor dat u HTML-hoekhaken ontwijkt.
<section>
als inline worden verpakt.
For example, <code><section></code> should be wrapped as inline.
Codeblokken
Gebruik <pre>
s voor meerdere regels code. Nogmaals, zorg ervoor dat u eventuele punthaken in de code ontwijkt voor een juiste weergave. Het <pre>
element wordt gereset om zijn te verwijderen margin-top
en rem
eenheden te gebruiken voor zijn margin-bottom
.
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
Variabelen
Gebruik de <var>
tag om variabelen aan te duiden.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Gebruikers invoer
Gebruik de <kbd>
om invoer aan te geven die doorgaans via het toetsenbord wordt ingevoerd.
Om instellingen te bewerken, druk op ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
Voorbeelduitvoer
Gebruik de <samp>
tag om voorbeelduitvoer van een programma aan te geven.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
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 formulierelementen 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 aangepast zodat ze alleen verticaal 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.
Ondersteuning voor datum- en kleurinvoer
Houd er rekening mee dat datuminvoer niet volledig wordt ondersteund door alle browsers, namelijk Safari.
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 wordt 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 bekend citaat, vervat in een blockquote-element.
Iemand die beroemd is in Brontitel
Inline-elementen
De<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.
<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 .