Ankündigung

Einklappen
Keine Ankündigung bisher.

Bootstrap 4 Navbar

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Bootstrap 4 Navbar

    Ich würde gerne eine Bootstrap 4 Navbar in meiner Anwendung einfügen.

    So sieht momentan meine Navbar aus:
    HTML-Code:
    <nav class="navbar navbar-expand-md bg-dark navbar-dark" id="header">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">MyApp</a>
        </div>
        <ul class="nav navbar-nav">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
              File
            </a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">New</a>
              <a class="dropdown-item" href="#">Load</a>
              <a class="dropdown-item" href="#">Save</a>
            </div>
          </li>    
          <li class="nav-link active"><a href="#">Link 1</a></li>
          <li class="nav-link"><a href="#">Link 2</a></li>
          <li class="nav-link"><a href="#">Link 3</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
          <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
        </ul>
      </div>
    </nav>
    so wie hier "Right-Aligned Navigation Bar"
    https://www.w3schools.com/bootstrap/...rap_navbar.asp

    (erweitert um einen Colapse-Menu) soll sie aussehen.

    Ich binde folgendes ein:
    HTML-Code:
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    Aber die Ansicht entspricht nicht der, was ich erhalte. Es liegt an den beiden Unterschiedlichen Bootstrap - Versionen.

    HTML-Code:
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    Und bevor jetzt wieder von einem unserer Moderatorn ein Spruch kommt, in die Richtung: "Dann mache es doch auf Bootstrap 4" kommt (weil es nervt echt, und führt zu keiner Lösung, außer zu Frustration). Hier nochmal: "ich würde diese gerne auf Bootstrap 4 haben".

    Allen anderen schon mal recht herzlichen Dank für eure Hilfe.


  • #2
    Was ist denn die konkrete Frage? Ist ja irgendwie nachvollziehbar, dass Bootstrap sich entwickelt und Sachen, welche mit älteren Versionen erstellt wurden mit neuen Versionen nicht mehr gleich aussehen.

    Kommentar

    Lädt...
    X