Dieses Forum nutzt Cookies
Dieses Forum verwendet Cookies, um deine Login-Informationen zu speichern, wenn du registriert bist, und deinen letzten Besuch, wenn du es nicht bist. Cookies sind kleine Textdokumente, die auf deinem Computer gespeichert sind; Die von diesem Forum gesetzten Cookies düfen nur auf dieser Website verwendet werden und stellen kein Sicherheitsrisiko dar. Cookies auf diesem Forum speichern auch die spezifischen Themen, die du gelesen hast und wann du zum letzten Mal gelesen hast. Bitte bestätige, ob du diese Cookies akzeptierst oder ablehnst.

Ein Cookie wird in deinem Browser unabhängig von der Wahl gespeichert, um zu verhindern, dass dir diese Frage erneut gestellt wird. Du kannst deine Cookie-Einstellungen jederzeit über den Link in der Fußzeile ändern.

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Wie verwende ich Bootstrap richtig in Angular 2++? (Anfängerfrage)
#1
Moin,

ich hab mir grad eine kleine test-app mit Angular 8 (ich glaube) erstellt und will eine Komponente für das Hauptmenü mit Bootstrap 4 responsiv stylen.

Ich bin hier nach folgender Anleitung vorgegangen, nachdem ich vorher schon versucht hatte, Bootstrap direkt in der Angular-CLI zu installieren (Bootstrap-Modul zwar soweit erfolgreich eingebunden, aber das Ergebnis war das gleiche wie nach folgendem Versuch:

https://medium.com/codingthesmartway-com...3c3cee3f4a

Statt dem Jumbotron habe ich den Beispielcode von getbootstrap.com für die navbar (gleich die erste) ausprobiert.

Ergebnis war, das die App beim kompilieren zwar keine Fehler gemeldet hat, aber trotzdem nur einen white-screen zeigt.

Die Zeilen für das css und das javascript habe ich wie in obiger Anleitung beschrieben eingebunden, allerdings die aktuellen Zeilen von getbootstrap.com.

Einfache Sachen wie die Buttons funktionieren allerdings.

Kann mir jemand helfen, ich hab grad keinen Plan wo das Problem ist.
In den <li>-Elementen hab ich die href-Attribute durch den routerLink ersetzt. Ohne diese Änderung würde der Beispielcode zwar laufen, aber bringt mir natürlich nichts.

  1. <nav class="navbar navbar-expand-lg navbar-light bg-light">    <a class="navbar-brand" href="#">Navbar</a>    <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 class="nav-item active">          <a class="nav-link" routerLink="/home">Home<span class="sr-only">(current)</span></a>        </li>        <li class="nav-item">          <a class="nav-link" routerLink="/beispiele">Beispiele</a>        </li>        <li class="nav-item">            <a class="nav-link" routerLink="/ueberuns">Über uns</a>        </li>        <li class="nav-item">            <a class="nav-link" routerLink="/kontakt">Kontakt</a>        </li>
Vielen Dank!
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
[-]
Willkommen im ersten deutschen Bootstrap-Forum
You have to register before you can post on our site.

Benutzername/E-Mail:


Passwort:





[-]
Letzte Beiträge
div Container bei col-sm nicht anzeigen.
Last Post: Franziska1993
Heute 18:18
» Replies: 2
» Views: 16
Modal mit autoload
Last Post: The-Error
12.09.2019 08:26
» Replies: 3
» Views: 158
Wie verwende ich Bootstrap richtig in An...
Last Post: noop
10.09.2019 20:52
» Replies: 0
» Views: 76

[-]
Private Messages
Please login or register to use this functionality.

[-]
Statistics
» Members: 291
» Latest member: Neocrypton
» Forum threads: 248
» Forum posts: 989

Full Statistics

[-]
Tutorials
Get Started
Text/Typography
Gridsystem
Dropdowns
Navigation Bar
Modal
Farben
Jumpotron
Popover
Formulare
Carousel (Slider)
Die Höhe von Elementen mit Klassen h-*
Flip Cards
Bild Overlay-Hover-Effekt
Google Fonts einbinden
Flexbox Bootstrap 4
Responsive Breakpoints

[-]
Wer ist online
There are currently no members online.

>