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.

Op deze pagina

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 rems te gebruiken in plaats van ems voor schaalbare afstand tussen componenten.
Vermijd margin-top. Verticale marges kunnen instorten, met onverwachte resultaten tot gevolg. Belangrijker is echter dat een enkele richting margineen eenvoudiger mentaal model is.
Voor eenvoudiger schalen tussen apparaatgroottes moeten blokelementen rems voor margins gebruiken.
Beperk declaraties van font-gerelateerde eigenschappen tot een minimum en gebruik inheritwaar mogelijk.

CSS-variabelen

Toegevoegd in v5.1.1

Met v5.1.1 hebben we onze vereiste @imports gestandaardiseerd voor al onze CSS-bundels (inclusief bootstrap.css, bootstrap-reboot.css, en bootstrap-grid.cssom _root.scss. Dit voegt :rootniveau-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-sizingis globaal ingesteld op elk element, inclusief *::beforeen *::after, tot border-box. Dit zorgt ervoor dat de gedeclareerde breedte van het element nooit wordt overschreden vanwege opvulling of rand.
- Er wordt geen basis font-sizegedeclareerd op de <html>, maar 16pxwordt aangenomen (de standaardinstelling van de browser). font-size: 1remwordt 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-rootvariabele te wijzigen.
Het <body>stelt ook een globale font-family, font-weight, line-heighten color. Dit wordt later overgenomen door sommige formulierelementen om inconsistenties in het lettertype te voorkomen.
Voor de veiligheid <body>heeft het een gedeclareerd background-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- colorstijlen.

Dit font-familywordt toegepast op de <body>en wordt automatisch wereldwijd overgenomen door Bootstrap. Om de global te wisselen font-family, update $font-family-baseen 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 :rootCSS-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-topverwijderd. Koppen zijn margin-bottom: .5remtoegevoegd en alinea 's margin-bottom: 1remvoor 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-topverwijderd en een margin-bottom: 1rem. Geneste lijsten hebben geen margin-bottom. We hebben ook de padding-leftaan <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 margins. <dd>s reset margin-leftnaar 0en 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.

Moet bijvoorbeeld <section>als inline worden verpakt.

For example, <code>&lt;section&gt;</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-topen remeenheden te gebruiken voor zijn margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Variabelen

Gebruik de <var>tag om variabelen aan te duiden.

y = m x + b

<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 van directory te wisselen, typt u cdgevolgd door de naam van de directory.
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.

Deze tekst is bedoeld om te worden behandeld als voorbeelduitvoer van een computerprogramma.

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

Dit is een voorbeeldtabel en dit is het bijschrift om de inhoud te beschrijven.
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 om display: inline-blockte kunnen marginworden toegepast.
<input>s, <select>s, <textarea>s en <button>s worden meestal geadresseerd door Normalize, maar Reboot verwijdert ook hun marginen sets line-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 hebben cursor: pointerwanneer :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 cursorverandering krijgen.

Knop zonder knopelement

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

Diverse elementen

Adres

Het <address>element wordt bijgewerkt om de browserstandaard te resetten font-stylevan italicnaar normal. line-heightis nu ook geërfd en margin-bottom: 1remis 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>.

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

Volledige naam
[email protected]

Blokcitaat

De standaardwaarde marginvoor blockquotes is 1em 40px, dus we stellen dat opnieuw in 0 0 1remvoor 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.

Het HTML- afkortingselement.

Overzicht

De standaard cursorop samenvatting is text, dus we resetten dat naar om aan pointerte 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: nonestandaard is gestileerd. Door een idee van PureCSS te lenen , verbeteren we deze standaard door [hidden] { display: none !important; }ervoor te zorgen dat deze displayniet 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 displayvan de elementen.

Als u alleen de zichtbaarheid van een element wilt wijzigen, wat betekent dat het displayniet wordt gewijzigd en het element nog steeds de stroom van het document kan beïnvloeden, gebruikt u in plaats daarvan de .invisibleklasse .

Opnieuw opstarten

Nadering

CSS-variabelen

Standaardinstellingen voor pagina's

Native lettertypestapel

CSS-variabelen

Koppen en alinea's

Lijsten

Inline-code

Codeblokken

Variabelen

Gebruikers invoer

Voorbeelduitvoer

Tafels

Formulieren

Ondersteuning voor datum- en kleurinvoer

Aanwijzers op knoppen

Diverse elementen

Adres

Blokcitaat

Inline-elementen

Overzicht

HTML5- [hidden]kenmerk

jQuery-incompatibiliteit

HTML5- `[hidden]`kenmerk