Fehlerbehebung zu :
Bootstrap funktioniert nicht in Angular
Problem: Bootstrap schein nicht in Angular zu funktionieren
So sollte Bootstrap in html Seiten von Angular aussehen: die Standard Input und Buttons haben Farben und besseres Aussehen.
Bootstrap in Angular installieren
Wie installiert man Bootstrap in einer Angular Anwendung:
Man wechselt zum Verzeichnis in welches man die bootstrap installiert haben möchten
PS C:\WINDOWS\system32> cd D:\Programmierung\Angular\Kurs\myapp02 |
Und gibt dann npm install bootstrap@4 –save ein
PS D:\Programmierung\Angular\Kurs\myapp02> npm install -save bootstrap@4 |
Oder man kann den Link in die Head Bereich einfügen
Bootstrap Version prüfen
Prüfen, welche Bootstrap Version installiert ist
Die aktuelle Version in dem Angular Projekt findet man unter
Projekt ->node_modules/bootstrap/dist/css/bootstrap.min.css
Hier müsste die Nummer stehen im Kommentarbereich wie
* Bootstrap v4.5.3 (https://getbootstrap.com/)
Bootstrap mit link-Stylesheet einbinden
Man kann auch die aktuelle Bootstrap Version einbinden, indem man einen <head> Bereich in die Angular Componente einfügt
Und dort mit
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
Einfach die originale Version verlinkt
<head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head>
|
Bootstrap Beispiel Input + Buttons
Angezeigter Beispiel- Code für Input Felder und Buttons
Unter Bootstrap Version 4
Test Angular Variablen
<br> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1">@</span> </div> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"> </div>
<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>
<label for="basic-url">Your vanity URL</label> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon3">https://example.com/users/</span> </div> <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"> </div>
<div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">$</span> </div> <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> <div class="input-group-append"> <span class="input-group-text">.00</span> </div> </div>
<div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">With textarea</span> </div> <textarea class="form-control" aria-label="With textarea"></textarea> </div>
<br> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
|