Naar de inhoud
Gratis naslagwerk over HTML
HTML leren en naslaan
Bootstrap 5.2 / Inhoud

Reboot

Reboot, een verzameling element-specifieke CSS-aanpassingen in één bestand, geeft Bootstrap een vliegende start met een elegante, consistente en eenvoudige basis om op voort te bouwen.

Aanpak

Reboot bouwt voort op Normalize en geeft veel HTML-elementen enigszins uitgesproken stijlen met alleen element-selectors. Aanvullende styling gebeurt uitsluitend met klassen. Zo rebooten we bijvoorbeeld een aantal <table>-stijlen voor een eenvoudiger uitgangspunt, en bieden we daarna .table, .table-bordered en meer.

Dit zijn onze richtlijnen en redenen om te bepalen wat we in Reboot overschrijven:

  • Sommige browserstandaardwaarden bijwerken zodat ze rems in plaats van ems gebruiken voor schaalbare componentruimte.
  • margin-top vermijden. Verticale marges kunnen samenvallen, wat onverwachte resultaten oplevert. Belangrijker nog: één richting voor margin is een eenvoudiger mentaal model.
  • Voor makkelijker schalen over apparaatformaten heen zouden block-elementen rems moeten gebruiken voor margins.
  • Declaraties van font-gerelateerde eigenschappen tot een minimum beperken en waar mogelijk inherit gebruiken.

CSS-variabelen

Nieuw in v5.2.0

Met v5.1.1 hebben we onze verplichte @imports in al onze CSS-bundels (waaronder bootstrap.css, bootstrap-reboot.css en bootstrap-grid.css) gestandaardiseerd zodat ze _root.scss bevatten. Daardoor worden aan alle bundels CSS-variabelen op :root-niveau toegevoegd, ongeacht hoeveel ervan in die bundel worden gebruikt. Uiteindelijk zal Bootstrap 5 in de loop van de tijd steeds meer CSS-variabelen krijgen, om meer aanpassingen in realtime mogelijk te maken zonder dat je telkens Sass hoeft te hercompileren. Onze aanpak is om onze Sass-bronvariabelen om te zetten naar CSS-variabelen. Zo houd je, ook als je geen CSS-variabelen gebruikt, alle kracht van Sass. Dit is nog in ontwikkeling en volledige implementatie kost tijd.

Bekijk bijvoorbeeld deze :root-CSS-variabelen voor gangbare <body>-stijlen:

Standaardwaarden: zie scss/_root.scss in de Bootstrap-broncode.

In de praktijk worden die variabelen in Reboot als volgt toegepast:

Standaardwaarden: zie scss/_reboot.scss in de Bootstrap-broncode.

Waardoor je naar believen aanpassingen in realtime kunt doen:

HTML
<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

Paginastandaarden

De elementen <html> en <body> zijn aangepast om betere paginabrede standaarden te bieden. Meer specifiek:

  • De box-sizing wordt globaal op elk element gezet — inclusief *::before en *::after — op border-box. Dat zorgt ervoor dat de gedeclareerde breedte van een element nooit wordt overschreden door padding of border.
    • Er wordt geen basis-font-size op de <html> gedeclareerd, maar er wordt uitgegaan van 16px (de browserstandaard). Op de <body> wordt font-size: 1rem toegepast, voor eenvoudige responsieve typografische schaling via media queries, met respect voor gebruikersvoorkeuren en een toegankelijkere aanpak. Deze browserstandaard kan worden overschreven door de variabele $font-size-root aan te passen.
  • De <body> stelt ook een globale font-family, font-weight, line-height en color in. Die worden later door sommige formulierelementen geërfd om inconsistenties in lettertypen te voorkomen.
  • Voor de zekerheid heeft de <body> een gedeclareerde background-color, standaard #fff.

Native font stack

Bootstrap gebruikt een "native font stack" oftewel "system font stack" voor optimale tekstweergave op elk apparaat en besturingssysteem. Deze systeemlettertypen zijn specifiek ontworpen met de apparaten van vandaag in gedachten, met verbeterde weergave op schermen, ondersteuning voor variabele fonts en meer. Lees meer over native font stacks in dit artikel van Smashing Magazine.

SCSS
$font-family-sans-serif:
  // Platformonafhankelijke generieke lettertypefamilie (standaard user-interfacelettertype)
  system-ui,
  // Safari voor macOS en iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // oudere macOS en iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basale webfallback
  Arial,
  // Schreefloze fallback
  sans-serif,
  // Emoji-lettertypen
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Let op: omdat de font stack emoji-lettertypen bevat, worden veel gangbare symbool-/dingbat-Unicodetekens als meerkleurige pictogrammen weergegeven. Hun uiterlijk verschilt, afhankelijk van de stijl van het native emoji-lettertype van de browser of het platform, en ze worden niet beïnvloed door CSS-color-stijlen.

Deze font-family wordt toegepast op de <body> en automatisch globaal geërfd binnen heel Bootstrap. Om de globale font-family te wijzigen, pas je $font-family-base aan en compileer je Bootstrap opnieuw.

Koppen en alinea's

Bij alle kop-elementen — bijv. <h1> — en bij <p> is de margin-top verwijderd. Koppen krijgen margin-bottom: .5rem en alinea's margin-bottom: 1rem voor eenvoudige tussenruimte.

Kop 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

Horizontale scheidingslijnen

Het <hr>-element is vereenvoudigd. Net als bij browserstandaarden worden <hr>s opgemaakt via border-top, hebben ze standaard opacity: .25 en erven ze hun border-color automatisch via color, ook wanneer color op het bovenliggende element is ingesteld. Ze kunnen worden aangepast met tekst-, border- en opacity-utilities.

HTML
<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

Lijsten

Bij alle lijsten — <ul>, <ol> en <dl> — is de margin-top verwijderd en is er een margin-bottom: 1rem toegevoegd. Geneste lijsten hebben geen margin-bottom. We hebben ook de padding-left op <ul>- en <ol>-elementen gereset.

  • Bij alle lijsten is de bovenmarge verwijderd
  • En is de ondermarge genormaliseerd
  • Geneste lijsten hebben geen ondermarge
    • Zo krijgen ze een gelijkmatiger uiterlijk
    • Vooral wanneer er nog meer lijstitems volgen
  • Ook de linkerpadding is gereset
  1. Dit is een genummerde lijst
  2. Met een paar lijstitems
  3. Hij heeft hetzelfde algehele uiterlijk
  4. Als de vorige ongenummerde lijst

Voor eenvoudigere styling, een duidelijke hiërarchie en betere tussenruimte hebben definitielijsten aangepaste margins. <dd>s zetten margin-left terug op 0 en voegen margin-bottom: .5rem toe. <dt>s zijn vetgedrukt.

Definitielijsten
Een definitielijst is perfect om termen te definiëren.
Term
Definitie van de term.
Een tweede definitie van dezelfde term.
Nog een term
Definitie van deze andere term.

Inline code

Wikkel korte inline codefragmenten in <code>. Zorg dat je HTML-punthaken escapet.

HTML
Zo hoort <code>&lt;section&gt;</code> bijvoorbeeld inline te worden gewikkeld.

Codeblokken

Gebruik <pre>s voor meerdere regels code. Ook hier geldt: escape alle punthaken in de code voor een correcte weergave. Bij het <pre>-element is de margin-top verwijderd en worden rem-eenheden gebruikt voor de margin-bottom.

HTML
<pre><code>&lt;p&gt;Hier wat voorbeeldtekst...&lt;/p&gt;
&lt;p&gt;En hier nog een regel voorbeeldtekst...&lt;/p&gt;
</code></pre>

Variabelen

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

HTML
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Invoer van de gebruiker

Gebruik <kbd> om invoer aan te duiden die doorgaans via het toetsenbord wordt ingevoerd.

HTML
Typ <kbd>cd</kbd> gevolgd door de naam van de map om van map te wisselen.<br>
Druk op <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> om instellingen te bewerken

Voorbeelduitvoer

Gebruik de <samp>-tag om voorbeelduitvoer van een programma aan te duiden.

HTML
<samp>Deze tekst is bedoeld om behandeld te worden als voorbeelduitvoer van een computerprogramma.</samp>

Tabellen

Tabellen zijn licht aangepast om <caption>s op te maken, randen samen te voegen en overal een consistente text-align te garanderen. Aanvullende wijzigingen voor randen, padding en meer komen met de .table-klasse.

HTML
<table>
  <caption>
    Dit is een voorbeeldtabel, en dit is het bijschrift dat de inhoud beschrijft.
  </caption>
  <thead>
    <tr>
      <th>Tabelkop</th>
      <th>Tabelkop</th>
      <th>Tabelkop</th>
      <th>Tabelkop</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tabelcel</td>
      <td>Tabelcel</td>
      <td>Tabelcel</td>
      <td>Tabelcel</td>
    </tr>
    <tr>
      <td>Tabelcel</td>
      <td>Tabelcel</td>
      <td>Tabelcel</td>
      <td>Tabelcel</td>
    </tr>
    <tr>
      <td>Tabelcel</td>
      <td>Tabelcel</td>
      <td>Tabelcel</td>
      <td>Tabelcel</td>
    </tr>
  </tbody>
</table>

Formulieren

Diverse formulierelementen zijn gereboot voor eenvoudigere basisstijlen. Dit zijn enkele van de opvallendste wijzigingen:

  • <fieldset>s hebben geen randen, padding of marge, zodat ze eenvoudig als wrapper voor losse inputs of groepen inputs kunnen worden gebruikt.
  • <legend>s zijn, net als fieldsets, opnieuw opgemaakt zodat ze als een soort kop worden weergegeven.
  • <label>s staan op display: inline-block, zodat margin kan worden toegepast.
  • <input>s, <select>s, <textarea>s en <button>s worden grotendeels door Normalize afgehandeld, maar Reboot verwijdert ook hun margin en zet line-height: inherit.
  • <textarea>s zijn zo aangepast dat ze alleen verticaal in grootte kunnen worden aangepast, omdat horizontaal vergroten de paginalayout vaak "breekt".
  • <button>s en <input>-knopelementen hebben cursor: pointer wanneer :not(:disabled).

Deze en meer wijzigingen worden hieronder gedemonstreerd.

Voorbeeld-legend

<textarea id="textarea" rows="3"></textarea>

100

Let op

De opmaak van formuliervelden verschilt licht per browser en besturingssysteem; test dit onderdeel in de browsers die je bezoekers gebruiken.

Cursors op knoppen

Reboot bevat een verbetering voor role="button" die de standaardcursor in pointer verandert. Voeg dit attribuut aan elementen toe om aan te geven dat ze interactief zijn. Deze rol is niet nodig voor <button>-elementen, die hun eigen cursor-wijziging krijgen.

HTML
<span role="button" tabindex="0">Knop die geen button-element is</span>

Diverse elementen

Address

Het <address>-element is aangepast om de standaard-font-style van de browser terug te zetten van italic naar normal. Ook wordt line-height nu geërfd en is margin-bottom: 1rem toegevoegd. <address>-elementen zijn bedoeld om contactgegevens van de dichtstbijzijnde voorouder (of van een heel werk) te presenteren. Behoud de opmaak door regels met <br> af te sluiten.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
T: (123) 456-7890
Volledige naam
first.last@example.com

Blockquote

De standaard-margin op blockquotes is 1em 40px, dus die zetten we terug naar 0 0 1rem voor iets dat consistenter is met andere elementen.

Een bekend citaat, opgenomen in een blockquote-element.

Iemand beroemds in Brontitel

Inline-elementen

Het <abbr>-element krijgt basisstyling zodat het opvalt tussen de tekst van een alinea.

Het afkortingselement HTML.

Summary

De standaard-cursor op summary is text, dus die zetten we terug op pointer om aan te geven dat je met het element kunt interacteren door erop te klikken.

Wat details

Meer informatie over de details.

Nog meer details

Hier staan nog meer details over de details.

HTML5-attribuut [hidden]

HTML5 voegt een nieuw globaal attribuut met de naam [hidden] toe, dat standaard als display: none wordt opgemaakt. We lenen een idee van PureCSS en verbeteren deze standaard door [hidden] { display: none !important; } te maken, om te voorkomen dat de display per ongeluk wordt overschreven.

HTML
<input type="text" hidden>
Let op
Incompatibiliteit met jQuery

[hidden] is niet compatibel met de methodes $(...).hide() en $(...).show() van jQuery. Daarom bevelen we [hidden] momenteel niet uitdrukkelijk aan boven andere technieken om de display van elementen te beheren.

Wil je alleen de zichtbaarheid van een element schakelen — dus zonder de display aan te passen, zodat het element de flow van het document nog steeds kan beïnvloeden — gebruik dan de klasse .invisible.