Ankündigung

Einklappen
Keine Ankündigung bisher.

Angular 9 + Bootstrap + Navbar

Einklappen

Neue Werbung 2019

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

  • Angular 9 + Bootstrap + Navbar

    Ich habe mir eine Navbar in Angular 9 mit Bootstrap 4 erstellt:
    header.component.html
    <nav class="navbar navbar-inverse" id="header">
    <div class="container-fluid">
    <ul class="nav navbar-nav white_color">
    <li class="active"><a href="/">Home</a></li>
    <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" routerLink="#">Users<span class="caret"></span></a>
    <ul class="dropdown-menu">
    <li><a routerLink="/users">List</a></li>
    <li><a routerLink="/user">Add User</a></li>
    </ul>
    </li>
    <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" routerLink="#">Projects<span class="caret"></span></a>
    <ul class="dropdown-menu">
    <li><a routerLink="/projects">List</a></li>
    <li><a routerLink="/project">Add Project</a></li>
    </ul>
    </li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
    <li><a routerLink="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
    <li><a routerLink="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>
    </div>
    </nav>
    Wenn ich es direkt über index.html die Bootstrap und JQuery lade wird es korrekt dargestellt.
    index.html
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0w wj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

    <!-- Popper.js -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3Uk sdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmST sz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2b WYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mG CD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </head>
    <body>
    <app-root></app-root>
    <button type="button" class="btn btn-primary">Primary</button>
    </body>
    </html>
    Binde ich es aber über
    npm install bootstrap --save npm install jquery --save npm install popper.js --save und natürlich mit setzen der angular.json
    ...
    "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ]
    Werden die Menüpunkte nicht nebeneinander sondern untereinander angezeigt. Das Bootstrap geladen wird, erkenne ich an dem Button in der index.html Könnt mir bitte jemand sagen was hier gerade schiefläuft

  • #2
    Warum um Himmels Willen vermischt man Angular mit jQuery? Das sind doch zwei komplett gegensätzliche Ansätze. Das ist so, als würde man einen veganen Burger machen und dann eine Scheibe Speck rein legen.

    Kommentar


    • #3
      Sorry, aber das ist eine völlig fehlerhafter und sinnlose Aussage. Genauso gut hättest du auch schreiben können, warum benötigst du bootstrap für angular. Oder warum benötigt man für PHP einen Webserver? (Wobei letzters noch gehen würde)

      Kommentar


      • #4
        Die Sinnhaftigkeit von Bootstrap zweifle ich eh generell an Mir würde bis jetzt kein einziger Anwendungsfall dafür einfallen.

        Aber egal, wenn du willst, dass man dein Problem nachvollziehen kann, solltest du es so posten, dass man es selber nachstellen kann. Und zwar als Minimalbeispiel mit richtigen Code und keine Zitat-Blöcke.

        Kommentar


        • #5
          Zitat von hellbringer Beitrag anzeigen
          Die Sinnhaftigkeit von Bootstrap zweifle ich eh generell an Mir würde bis jetzt kein einziger Anwendungsfall dafür einfallen.

          Aber egal, wenn du willst, dass man dein Problem nachvollziehen kann, solltest du es so posten, dass man es selber nachstellen kann. Und zwar als Minimalbeispiel mit richtigen Code und keine Zitat-Blöcke.
          Sorry ich merke schon mit Bootstrap und Angular hast du noch nicht viel gearbeitet, oder? Es ist richtiger Code. Oder wie schreibst du deine HTML-Seiten? Mit Bleistift auf Paperware?

          Kommentar


          • #6
            Zitat von 7-it Beitrag anzeigen

            Sorry ich merke schon mit Bootstrap und Angular hast du noch nicht viel gearbeitet, oder? Es ist richtiger Code. Oder wie schreibst du deine HTML-Seiten? Mit Bleistift auf Paperware?
            Mit Code-Blöcken, die das Forum zur Verfügung stellt. Jemand, der Webanwendungen schreibt, sollt auch ein WYSIWYG-Editor bedienen können, IMHO. Das wirkt sonst so wie ein Autobauer, der keine Kupplung bedienen kann.

            Und mit richtigem Code meine ich, dass das unvollständiger, nicht funktionsfähiger Code ist.

            Kommentar


            • #7
              Was schieflaufen könnte ist, dass du oben Code für Bootstrap 3.3.7 hast aber mit npm natürlich bootstrap 4 einbindest. Nur so als Vermutung.

              Wenn man Bootstrap für Angular benötigt => https://ng-bootstrap.github.io/#/home

              Kommentar


              • #8
                Zitat von 7-it Beitrag anzeigen
                Sorry, aber das ist eine völlig fehlerhafter und sinnlose Aussage. Genauso gut hättest du auch schreiben können, warum benötigst du bootstrap für angular. Oder warum benötigt man für PHP einen Webserver? (Wobei letzters noch gehen würde)
                Eigentlich war die Frage richtig. Man sollte sich entscheiden ob man Angular oder jQuery verwenden möchte. Für Bootstrap gibt es, hier im Thread bereits verlinkt, Portierungen welche die Bootstrap Komponente korrekt für Angular wrappen. Wenn man anfängt den Dom mit jQuery oder Plain Javascript zu verändern, kann der virtuelle DOM von Agnular dies mit unter nicht mitbekommen und du bekommst unschöne Seiteneffekte.

                Kommentar

                Lädt...
                X