Nieuwigheden in Bootstrap 5

Bootstrap is een van de populairste CSS-bibliotheken. Het stelt ontwikkelaars in staat om gemakkelijk mooie stijlen en componenten te gebruiken en responsieve websites te creëren. Het gebruik van Bootstrap kan ontwikkelaars tijd besparen, vooral met componenten die in bijna elk project worden gebruikt.

Bootstrap 5 (de huidige grote versie, uitgebracht in mei 2021) heeft talloze wijzigingen en verbeteringen meegebracht, waaronder de toevoeging van nieuwe componenten, nieuwe klassen, nieuwe stijlen voor oude componenten, bijgewerkte browserondersteuning, het verwijderen van enkele oude componenten, en nog veel meer.

In dit artikel gaan we in op wat er is veranderd in Bootstrap 5, wat is weggelaten, en het meest opwindend, wat er nieuw is.

Wanneer Bootstrap gebruiken (en wanneer niet)

Bootstrap omschrijft zichzelf als “de meest populaire framework ter wereld voor het bouwen van responsieve, mobiele eerst sites” en met 152k sterren op GitHub denk ik niet dat die claim overdreven is. Vooral voor beginners is Bootstrap een uitstekende manier om moderne en schone websites te creëren. Het maakt het gemakkelijk om gecompliceerde, mobiele eerst ontwerpen te realiseren en biedt veel componenten die je waarschijnlijk nodig hebt in meerdere projecten.

Bootstrap heeft een lage leercurve en is goed toepasbaar voor statische websites die geen build-stap vereisen, aangezien je de bibliotheek gewoon kunt aanroepen vanaf de CDN van Bootstrap. Dit staat in contrast met enkele andere populaire CSS-frameworks die misschien zijn geoptimaliseerd voor gebruik met een bundler of taakbeheerder.

Je zou ook moeten beseffen dat Bootstrap niet een wondermiddel is. Voor de onervaren, maakt Bootstrap het gemakkelijk om rommelig en ingewikkeld mark-up te produceren. Het is ook een relatief zware bibliotheek in termen van kilobytes (hoewel dit verbetert met elke release), dus het is misschien niet de beste keuze als je slechts één of twee van zijn functies gebruikt. Net als bij elke abstractie, zal het enorm helpen als je een goed begrip hebt van de onderliggende technologie en kan je een geïnformeerde beslissing nemen over wanneer het te gebruiken.

Opfrissen van Bootstrap 4 naar 5

Opfrissen van Bootstrap 4 naar 5 is over het algemeen vrij eenvoudig. De meeste componenten, hun klassen en hulpklassen die beschikbaar waren in Bootstrap 4, zijn nog steeds beschikbaar in Bootstrap 5. Het belangrijkste waar je op moet focussen bij migreren is of de klassen of componenten die je gebruikt zijn geschrapt. Als ze zijn geschrapt, zijn er vervangingen of manieren om hetzelfde resultaat te bereiken met hulpklassen. Het tweede waar je op moet focussen is het overschakelen van data-* attributen naar data-bs-* in componenten die JavaScript vereisen als onderdeel van hun functionaliteit. (We zullen dit in de volgende sectie meer behandelen.)

Als je Bootstrap’s Sass-bestanden gebruikt, zijn er enkele variabelen en mixins die zijn hernoemd. Bootstrap 5 heeft een uitgebreid en gedetailleerd gedeelte over aanpassing, evenals details over de Sass-variabelen en -mixins voor elk component op hun respectievelijke documentatiepagina’s.

Wat is veranderd

Bootstrap 5 brengt kernveranderingen aan in Bootstrap als een bibliotheek, met wijzigingen in vereiste afhankelijkheden, browserondersteuning en meer. Het brengt ook wijzigingen aan in de componenten en klassen die we altijd gebruikt hebben in eerdere versies.

jQuery niet langer een afhankelijkheid

Als een belangrijke verandering ten opzichte van eerdere versies, is jQuery niet langer een afhankelijkheid van Bootstrap. Nu kun je Bootstrap in al zijn glorie gebruiken zonder het, maar je hebt nog steeds Popper.js nodig. Deze verandering maakt het gemakkelijker om Bootstrap te gebruiken in projecten die jQuery niet vereisen of gebruiken – zoals bij het gebruik van Bootstrap met React.

Je kunt nog steeds jQuery gebruiken met Bootstrap als het onderdeel is van je website. Als Bootstrap jQuery detecteert in het window object, voegt het automatisch alle componenten toe aan jQuery’s plugin-systeem. Dus, als je migreert van v4 naar v5, hoef je je geen zorgen te maken over deze verandering en kun je nog steeds jQuery gebruiken met Bootstrap indien nodig.

Maar wat als je jQuery gebruikt in je website, maar je wilt niet dat Bootstrap jQuery gebruikt? Dat kun je doen door de attribuut data-bs-no-jquery toe te voegen aan het body-element van het document:

<body data-bs-no-jquery="true">
</body>

Hoe werkt Bootstrap zonder jQuery? Bijvoorbeeld, in v4 zou je de volgende code in JavaScript gebruiken om een Toast element te maken:

$('.toast').toast()

In Bootstrap 5 kun je diezelfde code gebruiken om een Toast-element te maken als je website al jQuery gebruikt. Zonder jQuery moet je iets als de volgende code gebruiken om een Toast-element te maken:

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

Dit gebruikt gewoon Vanilla JavaScript om het document te doorzoeken op elementen met een .toast klasse, en initialiseert vervolgens een Toast-component op het element met behulp van new bootstrap.Toast().

Wijziging in browserondersteuning

Tot en met v4, ondersteunde Bootstrap Internet Explorer (IE) 10 en 11. Vanaf Bootstrap 5 is de ondersteuning voor IE volledig opgeheven. Dus als je IE in je website wilt ondersteunen, moet je waarschijnlijk voorzichtig zijn bij de migratie naar v5.

Andere wijzigingen in browserondersteuning omvatten:

• Firefox en Chrome-ondersteuning nu vanaf versie 60
• Safari en iOS-ondersteuning nu vanaf versie 12
• Android Browser en WebView-ondersteuning nu vanaf versie 6

Wijziging in data-attributen

Bootstrap 5 heeft de naamgeving van de data-attributen gewijzigd die algemeen worden gebruikt door zijn componenten die JavaScript als onderdeel van hun functionaliteit gebruiken. Voordat, de meeste componenten die afhankelijk waren van enige JavaScript-functionaliteiten, hadden data-attributen die begonnen met data-. Bijvoorbeeld, om een Tooltip-component te creëren in Bootstrap 4:

<button 
  type="button" 
  class="btn btn-secondary" 
  data-toggle="tooltip" 
  data-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

Let op het gebruik van data-toggle en data-placement. In Bootstrap 5 beginnen de data-attributen voor deze componenten nu met data-bs om Bootstrap-attributen gemakkelijk te kunnen namespaceren. Bijvoorbeeld, om een Tooltip-component te creëren in Bootstrap 5:

<button 
  type="button" 
  class="btn btn-secondary" 
  data-bs-toggle="tooltip" 
  data-bs-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

In plaats van data-toggle en data-placement gebruiken we data-bs-toggle en data-bs-placement. Als je JavaScript gebruikt om componenten in Bootstrap te creëren, is er waarschijnlijk geen behoefte aan veranderingen. Echter, als je componenten alleen afhankelijk zijn van data-attributen om te functioneren, moet je alle data-attributen die beginnen met data aanpassen om te beginnen met data-bs.

Fouten opgelost

In de documentatie van Bootstrap 4 onder Browsers en apparaten staat een lijst met fouten die optreden op sommige browsers. Deze fouten staan niet langer in dezelfde lijst voor Bootstrap 5. De lijst omvat het volgende:

• Overzichtsstijlen werden toegepast op elementen bij aanraakgebeurtenissen op iOS, wat ongewenst was omdat het als onverwacht gedrag werd beschouwd.
• Het gebruik van .container in Safari 8 en hoger veroorzaakte een kleine lettergrootte bij afdrukken.
• Border radius werd overschreven door validatiefeedback (maar kon worden opgelost door een extra .has-validation klasse toe te voegen).

De lijst met fouten en problemen in de documentatie van Bootstrap 4 vermeldt ook fouten die optraden op browserversies die niet langer worden ondersteund.

Andere wijzigingen

Er zijn nog veel meer wijzigingen die ofwel klein zijn of geen drastische, merkbare verandering veroorzaken. Deze wijzigingen zijn:

• Bootstrap 5 maakt nu gebruik van Popper v2. Zorg ervoor dat je je versie van Popper bijwerkt. Popper v1 werkt niet meer, aangezien Bootstrap 5 @popperjs/core vereist in plaats van de vorige popper.js.

• Bootstrap 5 kan nu als module in de browser worden gebruikt met een versie van Bootstrap gebouwd als een ECMAScript module.

• Aangezien Libsass en Node Sass (die werden gebruikt in Bootstrap 4) nu zijn afgeschreven, gebruikt Bootstrap 5 Dart Sass om de bron Sass-bestanden te compileren naar CSS.

• Er zijn wijzigingen aangebracht in waarden van sommige Sass-variabelen, zoals $zindex-modal die veranderde van 1050 naar 1060, $zindex-popover van 1060 naar 1070, en meer. Daarom wordt aanbevolen de Sass-variabelen van elke component of hulpklassen in de documentatie van Bootstrap 5 te controleren.

• Voorheen werd de klasse .sr-only gebruikt om een element verborgen te maken, maar het wel zichtbaar te houden voor hulptechnologieën. Deze klasse is nu vervangen door .visually-hidden.

• Eerder moest je om een interactief element verborgen te houden maar toch zichtbaar te houden voor hulptechnologieën, zowel de .sr-only als de .sr-only-focusable klassen gebruiken. In Bootstrap 5 heb je alleen de .visually-hidden-focusable nodig zonder .visually-hidden.

• Blockquotes met een genoemde bron worden nu omgeven door een <figure> element.

  Hier is een voorbeeld van hoe Blockquotes er nu uitzien in Bootstrap 5:

• In eerdere versies werden tabelstijlen geërfd. Dit betekent dat als een tabel ingesloten zit in een andere tabel, de ingesloten tabel de stijlen van de oudertabel zal erven. In Bootstrap 5 zijn tabelstijlen onafhankelijk van elkaar, zelfs als ze ingesloten zijn.

• Rand utiliteiten ondersteunen nu tabellen. Dit betekent dat je nu de randkleur van een tabel kunt wijzigen met behulp van de randkleur utiliteiten.

  Hier is een voorbeeld van het gebruik van randutiliteiten met tabellen in Bootstrap 5:

• De standaardstijl van broodkruimels is gewijzigd, waarbij de standaard grijze achtergrond, opvul en straal van de rand die in eerdere versies was, is verwijderd.

  Hier is een voorbeeld van de stijl van Breadcrumbs in Bootstrap 5:

• De benaming van klassen die left en right gebruikten om naar de positie te verwijzen, is gewijzigd in start en end. Bijvoorbeeld, .dropleft en .dropright in dropdowns zijn vervangen door .dropstart en .dropend respectievelijk.

• Net als bij het vorige punt, gebruiken hulpklassen die l voor left en r voor right gebruikten nu s voor start en e voor end respectievelijk. Bijvoorbeeld, .mr-* is nu .me-*.

• De .form-control-range klasse die werd gebruikt voor range invoer is nu .form-range.

• Gutters worden nu ingesteld in rems in plaats van de vorige px.

• .no-gutters is hernoemd naar .g-0 als onderdeel van de nieuwe gutter klassen die zijn toegevoegd (meer daarover in latere secties).

• Links zijn nu standaard onderstreept, zelfs wanneer ze niet worden overgehouden.

• Aangepaste formulierelement-klassenamen zijn gewijzigd van .custom-* om deel uit te maken van de formuliercomponentklassen. Bijvoorbeeld, .custom-check is vervangen door .form-check, .custom-select is vervangen door .form-select, enzovoort.

• Het toevoegen van .form-label aan labels is nu vereist.

• Waarschuwingen, broodkruimen, kaarten, vervolgkeuzemenu’s, lijsten, modals, popovers en tooltips gebruiken nu dezelfde spatie-waarden met behulp van de $spacer variabele.

• Standaard spatie in badge-elementen is nu gewijzigd van .25em/.5em naar .35em/.65em.

• Om schakelknoppen te gebruiken met selectievakjes en keuzerondes, worden omhulsels gebruikt. De markering is ook vereenvoudigd. In Bootstrap 4 werd een schakelknop selectievakje bereikt met de volgende markering:

  <div class="btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary active">
      <input type="checkbox" checked> Checked
    </label>
  </div>
  

  In Bootstrap 5 kan dit op een eenvoudigere manier:

  <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
  <label class="btn btn-primary" for="btn-check">Checked</label>
  

• De active en hover toestanden van knoppen hebben nu een vergrote kleurcontrast.

• Carousel pijlpictogrammen gebruiken nu SVG van Bootstrap Icons.

• De sluitknopklasse is nu hernoemd van .close naar .btn-close, en gebruikt een SVG-pictogram in plaats van ×.

• Dropdown-scheidingstekens zijn nu donkerder voor beter contrast.

• Navigatiebalk inhoud moet nu worden ingepakt in een container-element. Bijvoorbeeld in Bootstrap 4:

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navigatiebalk</a>
    ...
  </nav>
  

  Wordt in Bootstrap 5:

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navigatiebalk</a>
      ...
    </div>
  </nav>
  

• De .arrow klasse in popover componenten is nu vervangen door .popover-arrow, en de klasse .arrow in Tooltip componenten is nu vervangen door .tooltip-arrow.

• De popover-optie whiteList is hernoemd naar allowList.

• De standaard Toast duur is gewijzigd in 5 seconden.

• De standaardwaarde voor fallbackPlacements in tooltip, dropdown en popover componenten is gewijzigd in de array ['top', 'right', 'bottom', 'left'].

• .text-monospace is hernoemd naar .font-monospace.

• .font-weight-* is hernoemd naar .fw-* en .font-style-* naar .fst-*.

• .rounded-sm en .rounded-lg zijn nu vervangen door een reeks afgeronde klassen .rounded-* van 0 tot 3.

Wat Is Verwijderd

Verandering kan ten koste gaan. Als er een nieuwe versie uitkomt die wijzigingen en verbeteringen brengt, worden ook enkele oude functies die het eerder ondersteunde verwijderd. Met deze nieuwe release zijn enkele van Bootstrap’s componenten, hulpklassen of andere functies verwijderd.

De meeste items die zijn geschrapt in Bootstrap 5 zijn weggegooid omdat dezelfde effecten kunnen worden bereikt door gebruik te maken van utiliteit klassen in plaats van ze als een standalone component te maken. Bovendien waren sommige geschrapte items bewezen ongebruikt of overbodig.

Hier is een lijst van wat is geschrapt uit Bootstrap 5:

• Zoals vermeld in de vorige sectie, is ondersteuning voor IE volledig geschrapt.

• Kleur klassen voor badges (bijvoorbeeld .badge-primary) zijn geschrapt ten gunste van het gebruik van de kleur utiliteit klassen (bijvoorbeeld .bg-primary).

• De .badge-pill badge klasse, die een badge een pill stijl gaf, is geschrapt ten gunste van het gebruik van .rounded-pill, wat hetzelfde resultaat bereikt.

• De .btn-block knopklasse is verwijderd, omdat hetzelfde resultaat kan worden bereikt door gebruik te maken van display utility klassen zoals .d-block.

• De Masonry .card-columns kaartindeling die eerder beschikbaar was, is geschrapt, omdat het veel neveneffecten had.

• De flip optie voor dropdown-componenten is verwijderd, ten gunste van Popper’s configuraties.

• De Jumbotron-component is geschrapt, omdat hetzelfde resultaat kan worden bereikt door gebruik te maken van utility klassen.

• Een aantal van de bestel utiliteitsklassen (.order-*) zijn geschrapt, omdat ze eerder liepen van 1 tot 12. Nu lopen ze van 1 tot 5.

• Het media-component is geschrapt, omdat hetzelfde resultaat kan worden bereikt met utiliteitsklassen.

• De .thead-light en .thead-dark klassen zijn geschrapt, omdat .table-* variantklassen kunnen worden toegepast op alle tabelelementen.

• De .pre-scrollable klasse is geschrapt, omdat deze niet veel wordt gebruikt.

• De .text-justify klasse is geschrapt, vanwege responsiviteitsproblemen, net als de .text-hide klasse, omdat de methode oud is en niet meer gebruikt zou moeten worden. En de .text-* klassen voegen geen hover- of focusstatussen meer toe aan links. Die .text-* klassen moeten worden vervangen door .link-* klassen.

• Input groepen met meerdere invoervelden of componenten hoeven niet langer .input-group-append en .input-group-prepend te gebruiken. Elementen die tot de groep behoren, kunnen gewoon allemaal direct worden toegevoegd als kinderen van de .input-group.

  Hier is een voorbeeld van het gebruik van input groepen met meerdere invoervelden:

• .form-group, .form-row, en .form-inline zijn allemaal verwijderd ten gunste van lay-outklassen.

• .form-text heeft geen ingesteld display eigenschap meer. Het element zal afhangen van of het element zelf een blok of inline element is.

• Validatie-icoontjes zijn verwijderd voor <select> elementen met multiple.

• De .card-deck klasse is verwijderd ten gunste van gridklassen.

• Negatieve marges zijn standaard uitgeschakeld.

• .embed-responsive-item elementen zijn nu verwijderd ten gunste van het toepassen van de stijl op alle kinderen van verhoudingen, wat eerder Responsive embeds was (meer daarover in de volgende sectie).

Wat is nieuw

Eindelijk brengt Bootstrap in versie 5 veel spannende toevoegingen aan in zijn bibliotheek. Sommige van deze wijzigingen omvatten nieuwe functies, nieuw ondersteunde concepten, nieuwe componenten, nieuwe utiliteitsklassen en meer.

Responsive Font Sizes is nu standaard ingeschakeld

Responsive Font Sizes (RFS) was in eerdere versies van Bootstrap, maar was standaard uitgeschakeld. Bootstrap 5 schakelt RFS standaard in, waardoor lettertypen in Bootstrap responsiever worden. RFS is een bijproject gecreëerd door Bootstrap om aanvankelijk lettertypen responsief te schalen en te vergroten. Nu is het in staat om hetzelfde te doen voor eigenschappen zoals marge, opvulling, box-shadow en meer.

Wat het doet, is in feite de meest passende waarden berekenen op basis van de browserafmetingen, en deze berekeningen worden omgezet in calc functies wanneer het wordt gecompileerd. Het gebruik van RFS stoot ook het eerdere gebruik van px af om rem te gebruiken, aangezien dit helpt om betere responsiviteit te bereiken.

Als u de Sass-bestanden voor Bootstrap gebruikt, kunt u nu mixins gemaakt door RFS gebruiken, inclusief font-size, margin, padding, en meer, die u in staat stellen ervoor te zorgen dat uw componenten en stijlen responsief zijn.

Ondersteuning van rechts naar links

Bootstrap 5 voegt rechts-naar-links (RTL) ondersteuning toe met behulp van RTLCSS. Aangezien Bootstrap over de hele wereld wordt gebruikt, is het een grote en belangrijke stap om RTL-ondersteuning standaard beschikbaar te stellen. Daarom heeft Bootstrap 5 specifieke naamgeving voor richtingen afgeschaft (bijvoorbeeld het gebruik van left en right) ten gunste van start en end. Dit maakt Bootstrap flexibel genoeg om zowel links-naar-rechts (LTR) als RTL-websites te ondersteunen. Bijvoorbeeld, .dropleft is nu .dropstart, .ml-* is nu .ms-*, en meer.

Om Bootstrap te laten herkennen en RTL-stylings toe te passen op uw website, moet u de dir van <html> instellen op rtl en een lang attribuut toevoegen met de RTL-taal van de website. Bijvoorbeeld, lang="ar".

Tot slot moet u Bootstrap’s RTL CSS-bestand opnemen:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

En daarmee ondersteunt uw website RTL.

Nieuw breakpoint

Bootstrap 5 biedt ondersteuning voor het nieuwe breakpoint xxl dat devices met een breedte van groter dan of gelijk aan 1400px aanspreekt. Voordien was het hoogste breakpoint xl, dat devices met een breedte van groter dan of gelijk aan 1200px aansprak. Deze wijziging maakt betere responsiviteit mogelijk voor devices met grotere schermen, aangezien het xl breakpoint onvoldoende was.

Het gebruik van de nieuwe breakpoint is vergelijkbaar met alle andere breakpoints. Als voorbeeld, om padding toe te passen voor apparaten met een breedte groter dan of gelijk aan 1400px, kun je dat doen met de klasse .p-xxl-2.

Verbeterde documentatie

Hoewel dit niet deel uitmaakt van de bibliotheek zelf, is het goed om op te merken dat de documentatie van Bootstrap is verbeterd. De documentatie in Bootstrap 5 heeft betere organisatie van inhoud, aangezien componenten met uitgebreidere details nu hun eigen secties hebben. Bijvoorbeeld, het Form-component in Bootstrap 4 was slechts één pagina met alle componenten opgeborgen. In Bootstrap 5 heeft het Form component’s documentatie een eigen sectie, met subsecties voor verschillende subcomponenten, waaronder Form Control, Select, Input Groups, en meer.

Bovendien is de navigatie in de documentatie nu eenvoudiger via de zijbalk, vooral voor kleinere schermen. In Bootstrap 4 was de inhoudsopgavezijbalk niet zichtbaar op kleinere apparaten, waardoor het moeilijker was om de vereiste sectie op de pagina te vinden. In Bootstrap 5 is de inhoudsopgave altijd zichtbaar op alle schermformaten.

Bovendien kun je in Bootstrap 5 alle Sass variabelen, mixins en functies voor elk component op zijn pagina vinden. Voordien was er slechts een Theming-pagina met enkele details over hoe je de thema-variabelen in Bootstrap kunt aanpassen. Nu heeft het een aanpasbaarheid sectie op zichzelf met meer details over hoe je Bootstrap’s thema kunt aanpassen.

Nieuwe componenten

Bootstrap 5 introduceert enkele nieuwe componenten in de bibliotheek. Sommige van deze componenten maakten eerder deel uit van andere componenten en zijn nu zelfstandige componenten.

Accordion

Voorheen maakte Accordion deel uit van het Collapsible-component, in plaats van een eigen component te zijn. In Bootstrap 5 is Accordion een nieuw component. Met Accordion komt ook een nieuwe klasse, .accordion, die een lijst van accordion-items bevat. Bovendien heeft Accordion een nieuw uiterlijk vergeleken met het vorige uiterlijk in Bootstrap 4. Hier is een voorbeeld van het accordion-component:

Bootstrap 5 voegt ook enkele klassen toe om het uiterlijk van het Accordion te wijzigen. Bijvoorbeeld, .accordion-flush verwijdert enkele van de standaardstijlen van het Accordion, zoals de achtergrond- of randkleuren. Je kunt ook een accordion-item altijd open laten door het data-bs-parent attribuut van zijn .accordion-collapse element te verwijderen.

Offcanvas

Een ander nieuw component is Offcanvas, waarmee je een overlappende zijbalk kunt maken. Het is de zijbalk die meestal op websites wordt gebruikt om het menu te tonen op kleinere apparaten. Je kunt het op elke zijde van de pagina plaatsen door .offcanvas-start te gebruiken voor links in LTR, .offcanvas-top voor boven, .offcanvas-end voor rechts in LTR, en .offcanvas-bottom voor onder. Je kunt ook aangeven of de Offcanvas een achtergrond moet hebben of niet. Hier is een voorbeeld van het gebruik van het Offcanvas-component:

Floating Label

Floating Label is een nieuw onderdeel van de Form componenten. Het stelt je in staat om een invoer te maken waarvan het label er in eerste instantie uitziet als een placeholder, maar wanneer de invoer focus krijgt, zweeft het label naar de bovenkant van de invoer boven de waarde. Het werkt ook op <select> elementen en <textarea> elementen. Hier is een voorbeeld van het gebruik van zwevende labels:

Andere toevoegingen

Naast de nieuwe componenten, zijn er nieuwe klassen voor bestaande componenten, nieuwe hulpprogrammaklassen, nieuwe helperklassen en meer. Hier is een lijst van alle andere nieuwe toevoegingen in Bootstrap 5:

• Klasse .row-cols-auto is toegevoegd, waardoor de kolommen hun natuurlijke breedte kunnen innemen.

• A new utility class has been added to justify content called .justify-content-evenly.

• Voordat werden verticale ruimtes tussen kolommen bereikt met behulp van ruimtehulpprogramma’s. Nu kun je de ruimte tussen kolommen instellen met het nieuwe Gutter layouthulpprogramma. Om een horizontale ruimte in te stellen, gebruik .gx-*. Voor een verticale ruimte, gebruik .gy-*. Voor zowel een horizontale als verticale ruimte, gebruik .g-*.

• A start script has been added to the Bootstrap package when installed with npm or Yarn. The start script compiles the CSS and JavaScript files, builds the documentation, then starts a local server.

• Verticale uitlijningstoepassingsklassen kunnen nu worden gebruikt met tabellen.

• A new class .caption-top has been added, which allows placing the caption of a table at the top rather than at the bottom.

• Er is nu de mogelijkheid om de scheidingslijn in Breadcrumb te wijzigen met de CSS-variabele --bs-breadcrumb-divider.

  Hier is een voorbeeld van het wijzigen van de scheidingslijn naar >>:

• Er is een nieuwe donkere variant voor carrousels met de klasse .carousel-dark, en een nieuwe donkere variant voor dropdowns met .dropdown-menu-dark.

• Er is een nieuwe optie voor automatisch sluiten in Dropdown die het standaardgedrag van het sluiten van het Dropdown-menu kan wijzigen. Standaard sluiten dropdown-menu’s als je buiten het dropdown of een van de dropdown-items klikt. Je kunt dat wijzigen door de data-bs-auto-close data-attribuut in te stellen op inside, waardoor het dropdown sluit als je op een van de dropdown-items klikt, maar niet als je er buiten klikt. Je kunt het ook instellen op outside, waardoor het dropdown alleen sluit als je er buiten klikt. Ten slotte kun je het instellen op false om het alleen te sluiten als de dropdown-knop opnieuw wordt geklikt. Als je de dropdown initialiseert met JavaScript, kun je de autoClose optie gebruiken in plaats van het data-attribuut. Hier is een voorbeeld van het gebruik ervan:

• Er is nu verbeterde opmaak voor bestandsinputs in formulieren.

• A new color input has been added, using the class .form-control-color.

• A new datalists input type has been added, which simulates a typeahead select field. Here’s an example:

• Nieuwe kleurtinten en schakeringen zijn toegevoegd in Sass-variabelen.

• Er zijn twee nieuwe grootte-opties voor weergavekoppen: .display-5 en .display-6.

• Er is een nieuwe witte variant voor sluitknoppen: .btn-close-white.

• Dropdowns kunnen nu .dropdown-items bevatten die zijn ingepakt in <li>-elementen.

• Items in lijstgroepen kunnen nu genummerd worden met behulp van de nieuwe klasse .list-group-numbered.

• Er zijn transition-eigenschappen toegevoegd aan links in de Paginatie-component, wat de stijl ervan verbetert.

• Er is een nieuwe .bg-body-klasse die de achtergrondkleur van het lichaam in wit stelt.

• Er zijn nieuwe positie-utility-klassen om de top, left, right of bottom-eigenschappen van een element in te stellen. Bijvoorbeeld, .top-0.

• Er zijn nieuwe .translate-middle-x en .translate-middle-y-klassen toegevoegd om absolute elementen gemakkelijk horizontaal en verticaal respectievelijk te center

• Er zijn nieuwe rand breedte utility klassen .border-* die gaan van 1 tot 5.

• Er is een nieuwe display utility .d-grid en een nieuwe gap utility .gap.

• Er zijn nieuwe regellengte utilities .lh-1, .lh-sm, .lh-base en .lh-lg.

• Er zijn nieuwe verhoudings helpers die vervangen wat eerder responsieve embed helpers waren. De klasse namen zijn hernoemd door embed-responsive te vervangen door ratio en by door x. Bijvoorbeeld, wat eerder .embed-responsive-16by9 was, is nu .ratio-16x9.

• A new option popperConfig has been added to Dropdowns, Popovers and Tooltips. This option can be used to make changes to Popper’s configurations.

• Er zijn .fs-* hulpprogramma’s voor lettertypen, aangezien RFS nu standaard is ingeschakeld.

Conclusie

Bootstrap is een van de toonaangevende CSS-bibliotheken gedurende het grootste deel van de afgelopen decennia. Het stelt ontwikkelaars in staat om gemakkelijk responsieve websites te bouwen en een goede gebruikerservaring te bieden. Met de toevoegingen en wijzigingen in Bootstrap 5 zal dit proces nog eenvoudiger zijn en zal het mogelijk maken om de ontwerpen van websites te verbeteren en een goede gebruikerservaring te bieden. Als u Bootstrap 4 gebruikt en u overweegt over te stappen naar Bootstrap 5, is de migratie eenvoudig en heeft u waarschijnlijk niet veel wijzigingen nodig.

Veelgestelde Vragen (FAQs) over Bootstrap 5