#

Bootstrap funktioniert nicht in Angular.

 Date 17.12.2020 Views 938

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>

 

 

Mobile

.