migrate bootstrap 4 to 5 - gluehloch/java-examples GitHub Wiki

Migrationsleitfaden für Bootstrap 4 zu 5

Script und CSS Updates

Kann aus der Bootstrap Anleitung 1:1 übernommen werden.

<!doctype html>
<html lang="de">
<head>
    <title>andre-winkler it</title>
    <base href="/">
    <meta charset="utf-8">
    <meta name="author" content="Andre Winkler">
    <meta name="description" content="Andre Winkler IT">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    ...
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
    <app-root>
        <div class="loader">Loading...</div>
    </app-root>
</body>
</html>

Navbar

Hier tauchen die ersten schwierigen Anpassungen auf, die nicht direkt aus dem Bootstrap eigenen Migrationsleitfaden zu entnehmen sind:

  • data-toggle zu data-bs-toggle
  • data-target zu data-bs-target

TODO: Mit Bootstrap 5 fehlt der 'navbar' etwas 'padding' auf der linken Seite. Das könne man mit

<nav class="navbar navbar-expand-md navbar-dark fixed-top" style="padding-left: 1em;">

beheben. Vermutlich sitzt meine 'navbar' aber im falschen Container?

<nav class="navbar navbar-expand-md navbar-dark mb-4 fixed-top">
    <button class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse" 
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show" class="nav-item">
                <a class="nav-link" routerLink="/home"><span class="sr-only"></span> Start</a>
            </li>
            <li data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show" class="nav-item">
                <a class="nav-link" routerLink="/projekte">Projekte</a>
            </li>
            <li data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show" class="nav-item">
                <a class="nav-link" routerLink="/download">Download</a>
            </li>
            <li data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show" class="nav-item">
                <a class="nav-link" routerLink="/impressum">Impressum</a>
            </li>
            <li data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show" class="nav-item">
                <a class="nav-link" routerLink="/zitate">Zitate</a>
            </li>
        </ul>
    </div>
</nav>

Modale Dialoge

  • Statt data-dismiss wird zu data-bs-dismiss.

Forms

  • form-group entfällt. Wird wahlweise durch class="mb-3" ersetzt. Bzw. eine beliebige andere Größenvereinbarung.
  • <label> werden um class="form-label" ergänzt.

Links

by Andre Winkler 2021, Hamburg

⚠️ **GitHub.com Fallback** ⚠️