angle-uparrow-clockwisearrow-counterclockwisearrow-down-uparrow-leftatcalendarcard-listchatcheckenvelopefolderhouseinfo-circlepencilpeoplepersonperson-fillperson-plusphoneplusquestion-circlesearchtagtrashx

Migreren van Bootstrap 4 naar Bootstrap 5

In december 2020 werd Bootstrap 5 Beta 1 vrijgegeven. Na het lezen van alle wijzigingen en aanvullingen kan men alleen maar concluderen dat dit weer een grote stap voorwaarts is.

17 januari 2021
post main image
https://unsplash.com/@davidboca

Tegenwoordig gebruiken websites veel CSS en Javascript. Als je websites bouwt, kun je ze niet altijd testen met de grote browsers. In plaats daarvan heeft u een framework nodig die alle grote browsers ondersteunt. Deze framework moet goed worden ondersteund en dat betekent dat er maar een paar overblijven.

Voor deze site heb ik gekozen voor Bootstrap 4. Dit is geen toeval. Een paar jaar geleden was ik op zoek naar de beste framework voor een groot aantal websites voor een klant. Na een uitgebreide selectie kwam Bootstrap als nummer één uit de bus.

Ik vind Bootstrap erg leuk. Ik ben geen expert, maar een backend ontwikkelaar die het gebruikt voor de frontend. Dit betekent dat ik Bootstrap vooral vanuit een technisch perspectief bekijk. Ik ben ook geen grafisch ontwerper, maar ik ken wel grafisch ontwerpers die het ook leuk vinden.

Waarom zou ik upgraden naar Bootstrap 5?

In december 2020 werd Bootstrap 5 Beta 1 uitgebracht. Na het lezen van alle wijzigingen en aanvullingen kan men alleen maar concluderen dat dit weer een grote stap voorwaarts is. Bootstrap 5 Beta vervangt Bootstrap 4 op de website van Bootstrap , wat betekent dat ze het in ieder geval geschikt achten voor nieuwe ontwerpen.

Waarom wilde ik Bootstrap 4 upgraden naar Bootstrap 5? Afgelopen weekend heb ik mijn ontwikkelings-PC en laptop geüpgraded van Ubuntu 18.04 naar Ubuntu 20.04. Dus ik dacht, nu ik nog in de upgrade-modus zit, waarom zou ik Bootstrap ook niet upgraden, ik wil dit waarschijnlijk ergens dit jaar toch doen.

RTL, van rechts naar links talen

Velen zullen dit niet nodig hebben, maar het is een geweldige zaak als je de rechtse-tot-linkse talen wilt ondersteunen. Er zijn ongeveer 300 miljoen native speakers van deze talen. Om dit te activeren hoef je alleen maar dir="rtl" toe te voegen aan het <html> element. Je kunt dit zelf proberen.

To enable  RTL  add '?rtl=on' to the url

To disable  RTL  add '?rtl=off' to the url

Moet je upgraden?

Zoals veel mensen gebruik ik Bootstrap zoals het is, dus vanaf een CDN host ik het alleen op mijn eigen webserver. Als je veel maatwerk gebruikt, SCSS, kan het moeilijk worden. In deze post deel ik mijn aantekeningen over het upgraden van deze website.

Enkele vragen en antwoorden:

  • Was de migratie succesvol?
    Ja. Deze website draait nu met Bootstrap 5.
  • Was de upgrade moeilijk?
    Nee.
  • Hoeveel tijd heeft het geduurd?
    Vijf dagen. De meeste tijd werd besteed aan het omzetten van de formuliervelden. Ik moest ook de formuliergeneratiefuncties aanpassen.
  • Waren er problemen?
    Ja, er waren wat problemen. Op dit moment is er tenminste nog één onopgelost. In Bootstrap 4 verandert de toggler (hamburger icoon) in een 'X' en vice versa. Ik heb geen idee hoe ik dit moet doen in Bootstrap 5.
  • Moet je upgraden?
    Het is aan jou. Ik stel voor dat je eerst kijkt naar de moeilijke onderdelen zoals het dropdown menu. Lees de rest van dit bericht en kijk naar de problemen op Github.
  • Wat kostte de meeste tijd?
    Het herschikken van de formuliervelden.

Bootstrap 5 gedumpt jQuery, maar ik kan niet leven zonder....

Bootstrap 5 gebruikt geen jQuery meer. Ik kan me dit voorstellen. Ze hadden slechts een deel ervan nodig en kunnen nu zelf problemen, incompatibiliteiten, oplossen. Eén afhankelijkheid minder.

Ik gebruik jQuery overal en ik ga zeker niet al mijn code voor gewone Javascript vervangen. De belangrijkste reden is dat ik geen tijd heb om problemen met de browser op te lossen, veiligheidsproblemen. Betekent dit dat je meer Javascript moet laden? Niet echt. Bootstrap nam ook de nodige code van popper.js en bundelde die met hun eigen code.

Tool om Bootstrap klassen te converteren

Ik kon geen tool vinden om Bootstrap klassen om te zetten, dus gebruikte ik Rexxer, een algemeen zoek- en vervangingshulpmiddel voor Linux. Dit werkte prima, maar was soms erg traag vanwege alle bestanden die het moest zoeken. Maar ik klaag niet. Ik had ook een tool kunnen schrijven in Python, maar dat zou nog eens vier uur duren. Misschien wilt u wachten tot er meer upgrades beschikbaar zijn.

Stap 1: Controleer de Bootstrap migratiedocumenten.

Op de website van Bootstrap staat een pagina genaamd 'Migreren naar v5'. Hoewel niet alles hier vermeld staat, keerde ik vaak terug naar deze pagina om bijvoorbeeld veranderingen in bepaalde klassen te zien. De Bootstrap website heeft nu ook (eindelijk) een fantastisch zoekveld met autocompletion.

Stap 2: Wijzig het basissjabloon

Het verplaatsen van uw basissjabloon naar Bootstrap 5 is niets bijzonders. Het meest interessante onderdeel is het verwijderen van popper.js. De code staat nu in bootstrap.bundle.min.js. Na het uitvoeren van deze stap denk je misschien: wat is er met mijn mooie website gebeurd? Wanhoop niet!

Bootstrap 4 basis template:

<!DOCTYPE html>
<html lang="en">
<head>
<meta  charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="/static/vendor/bootstrap/4.5.0-dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" rel="stylesheet">
</head>
<body>
	
<header>
</header>

<main>
</main>

<footer>
</footer>

<script src="/static/vendor/jquery/3.5.1/jquery-3.5.1.min.js"></script>
<script src="/static/vendor/popper/1.16.0/umd/popper.min.js"></script>
<script src="/static/vendor/bootstrap/4.5.0-dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

</body>
</html>

Bootstrap 5 basissjabloon:

<!DOCTYPE html>
<html lang="en">
<head>
<meta  charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="/static/vendor/bootstrap/5.0.0-beta1-dist/css/bootstrap.min.css" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" rel="stylesheet">

<body>

<header>
</header>

<main>
</main>

<footer>
</footer>

<script src="/static/vendor/jquery/3.5.1/jquery-3.5.1.min.js"></script>
<script src="/static/vendor/bootstrap/5.0.0-beta1-dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

</body>
</html>

Stap 2: Hernoem Bootstrap klassen

Vervolgens moeten de klassen Bootstrap worden hernoemd. Na het wijzigen van het basissjabloon zie je een site met veel problemen. Als u de pagina 'Migreren naar v5' op de Bootstrap website heeft aangevinkt, zult u merken dat veel Bootstrap klassen een andere naam hebben gekregen. Er staat geen mooie lijst op deze pagina, dus ik heb de wijzigingen die voor mij belangrijk waren geschraapt:

Components
---
Rename .dropleft and .dropright to .dropstart and dropend.
Rename .dropdown-menu-*-left and .dropdown-menu-*-right to .dropdown-menu-*-start and .dropdown-menu-*-end.
Rename .bs-popover-left and .bs-popover-right to .bs-popover-start and .bs-popover-end.
Rename .bs-tooltip-left and .bs-tooltip-right to .bs-tooltip-start and .bs-tooltip-end.
Rename .carousel-item-left and .carousel-item-right to .carousel-item-start and .carousel-item-end.
Rename .close to .btn-close for a less generic name.

Utilities
---
Rename .left-* and .right-* to .start-* and .end-*.
Rename .float-left and .float-right to .float-start and .float-end.
Rename .border-left and .border-right to .border-start and .border-end.
Rename .rounded-left and .rounded-right to .rounded-start and .rounded-end.
Rename .ml-* and .mr-* to .ms-* and .me-*.
Rename .pl-* and .pr-* to .ps-* and .pe-*.
Rename .text-left and .text-right to .text-start and .text-end.

Text utilities
---
Rename .font-weight-* utilities as .fw-* for brevity and consistency.
Rename .font-style-* utilities as .fst-* for brevity and consistency.

Data utilities
---
Rename data-toggle to data-bs-toggle
Rename data-target to data-bs-target
Rename data-parent to data-bs-parent
Rename data-dismiss to data-bs-dismiss
Rename data-offset to data-bs-offset
Rename data-interval to data-bs-interval
Rename data-ride to data-bs-ride

Helpers
---
Rename .sr-only and .sr-only-focusable to .visually-hidden and .visually-hidden-focusable

Stap 3: Repareer kapot

De volgende stap is het repareren van alle dingen die kapot zijn. Ik houd twee extra CSS-bestanden bij:

  • default.css
    Kan worden gewijzigd voor een ander thema.
  • custom.css
    Bevat de CSS die altijd aanwezig moet zijn.

Hieronder staan mijn aantekeningen. Niet alles wat ik heb gedaan staat hier vermeld. Ik heb wat vormveldconversies weggelaten.

Alle links zijn nu standaard onderstreept. Vreselijk!

Fix: Toevoegen aan default.css:

a, ... {
	color: #000000;
	text-decoration: none;
}

Koppen te vet

Weet niet of dit echt een verandering was.
Fix: Toevoegen aan default.css:

h1, h2, h3, h4, h5, h6 {
	font-weight: 400!important;
}

Navbar toggler (hamburger) problemen (onopgelost)

Dit werkt nu anders. In Bootstrap 4 schakel ik van hamburger naar X en omgekeerd. Dit werkt niet meer in Bootstrap 5 en ik heb daar op dit moment geen oplossing voor. Ik heb de 'X' moeten verwijderen.

Kolombestelling, linkerkolom en rechterkolom werden verwisseld op mobiel

Fix: Ik moest een beetje spelen met de bestelklassen om dit op te lossen.

Tags visueel verdwenen

De tags maakten gebruik van de badgeklasse. Er waren enkele wijzigingen met de badgeklasse.
Fix: Ik heb de badgeklasse vervangen door de buttonklasse. Beter toch.

Sluit de knop voor waarschuwingen en modaliteiten

Vastzetten: Verwijder de '&times' symboolregel.

Waarschuwingen. In Bootstrap 4 heb je zoiets als:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

In Bootstrap 5 wordt dit:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Dezelfde fix voor modals.

Ingestort navbar merk en hamburger verschoven naar links en rechts van de pagina.

Met Bootstrap 4 moest ik dit aanpassen.

Vastzetten: Verwijder px-0 in de containerklasse.

Van:

<div class="sticky-top z-index-30">
  <nav class="navbar   navbar-expand-md {{  navbar_main_extra_class }} sticky-top z-index-30">
    <div class="container  px-0  mx-auto max-width-site">

Tot:

<div class="sticky-top z-index-30">
  <nav class="navbar   navbar-expand-md {{  navbar_main_extra_class }} sticky-top z-index-30">
    <div class="container mx-auto max-width-site">

Verhoogde marge links en rechts op XS en SM

Vastzetten: Verlaag de marge door px-0 en px-md-2 toe te voegen.

Van:

<main role="main" class="container-fluid  px-0  px-sm-3 pb-3 pt-5">
  <div class="row no-gutters mx-auto max-width-site">
    <div class="col">

Tot:

<main role="main" class="container-fluid  px-0  px-sm-3 pb-3 pt-5">
  <div class="row no-gutters mx-auto max-width-site">
    <div class="col  px-0  px-md-2">

Vorm - geen marge onder de formuliervelden

De vormverzamelklas werd verwijderd.

Fix: toevoegen aan custom.css:

.form-group {
	margin-bottom: 1rem;
}

Formulieren - Invoergroep

De zoekbalk in navbar werd lelijk. Dit is een Input groep. Bootstrap 5 liet .input-group-append en .input-group-prepend vallen.

Fix: Gebruik Bootstrap documentatie voor de ingangsgroep.

In Bootstrap 4 hebt u:

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's  username" aria-label="Recipient's  username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">@example.com</span>
  </div>
</div>

In Bootstrap 5 wordt dit:

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's  username" aria-label="Recipient's  username" aria-describedby="basic-addon2">
  <span class="input-group-text" id="basic-addon2">@example.com</span>
</div>

Formulieren - Formulierveldlabels vereisen nu de klasse .form-label

Fix: Voeg een formulier-etiket klasse toe.

In Bootstrap 4 hebt u:

  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
  </div>

In Bootstrap 5 wordt dit:

<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>

Formulieren - Aangepaste selectie werd verwijderd

Fix: verander de klasse.

In Bootstrap 4 heb je:

<select class="custom-select">
...

In Bootstrap 5 wordt dit:

<select class="form-select" aria-label="Default select example">

Formulieren - Aangepast aanvinkvakje is verwijderd

Het is nu identiek aan het selectievakje Bootstrap 4 .

In Bootstrap 4 heeft u een selectievakje:

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">
    Check this custom checkbox
  </label>
</div>

In Bootstrap 5 wordt dit:

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>

Sommige dingen vind ik leuk en sommige dingen wens ik nog steeds

Zoals:

  • Meer controle over de indeling
  • Enkele tegenstrijdigheden verwijderd
  • Nieuw standaardlettertype
  • Reactieve lettertypen
  • Grenzen met breedtes
  • Dakgootcontrole
    Nu is het mogelijk om de dakgootruimte heel eenvoudig te veranderen. Ik heb de gx-3-klasse direct toegepast!

Wens:

  • Meer breedteklassen, zoals w-10, w-40
  • Reactieve breedteklassen, zoals w-md-25
  • Reactieve grenzen, bijv. slootkanten op mobiel

Samenvatting

De migratie van Bootstrap 4 naar Bootstrap 5 nam veel tijd in beslag. Het is gedaan voor ongeveer 90%. En ik gebruik slechts een beperkte set. De meeste tijd werd besteed aan het omzetten van de formuliervelden. Ik genereer formulieren met velden met een Jinja script en moest veel wijzigingen aanbrengen. Maar goed dat Bootstrap 5 de aangepaste velden heeft verwijderd.
Als je een website hebt die nog een paar jaar draait dan is de migratie naar Bootstrap 5 zeker de moeite waard. U kunt ook een paar maanden wachten, dan zijn de meeste van uw problemen waarschijnlijk al door anderen opgelost.

Links / credits

Bootstrap 5 Beta 1
https://blog.getbootstrap.com/2020/12/07/bootstrap-5-beta-1/

Build fast, responsive sites with Bootstrap
https://getbootstrap.com/

Migrating to v5
https://getbootstrap.com/docs/5.0/migration/

Reboot
https://getbootstrap.com/docs/5.0/content/reboot/

twbs / bootstrap
https://github.com/twbs/bootstrap

Lees meer

Bootstrap

Laat een reactie achter

Reageer anoniem of log in om commentaar te geven.

Opmerkingen (1)

Laat een antwoord achter

Antwoord anoniem of log in om te antwoorden.

avatar

I created a really cool tool to help on this. What do you think?
It works pretty good, and can help. I put a live version of my script, which is available on the webpage downloadable or usable. It is licensed under the GNU, so please feel free to modify it.
https://properprogramming.com/tools/converters/bootstrap-4-to-bootstrap-5-converter/