Angular 4: Jak dołączyć Bootstrap?

Jestem programistą backendu i po prostu bawię się Angular4. Zrobiłem więc ten samouczek instalacji: https://www.youtube.com/watch?v=cdlbFEsAGXo .

Biorąc to pod uwagę, jak mogę dodać bootstrap do aplikacji, abym mógł użyć klasy „container-fluid” lub „col-md-6” i tym podobnych?

npm install --save bootstrap

następnie, wewnątrz angular-cli.json (wewnątrz katalogu głównego projektu), znajdź stylesi dodaj plik bootstrap css w następujący sposób:

"styles": [
   "../node_modules/bootstrap/dist/css/bootstrap.min.css",
   "styles.css"
],

UPDATE:
w kątowej 6+ angular-cli.json została zmieniona na angular.json.

Obejrzyj wideo lub postępuj zgodnie z instrukcjami

Zamontuj pasek bootstrap 4 w kątowej 2 / kątowej 4 / kątowej 5 / kątowej 6

Istnieją trzy sposoby włączenia bootstrapa do twojego projektu
1) Dodaj łącze CDN do pliku index.html
2) Zainstaluj bootstrap używając npm i ustaw ścieżkę w angular.json Zalecane
3) Zainstaluj bootstrap używając npm i ustaw ścieżkę w pliku index.html

Zalecam skorzystanie z 2 metod, które są instalowane przez bootstrap przy użyciu npm, ponieważ jest zainstalowany w katalogu twojego projektu i możesz łatwo uzyskać do niego dostęp

Metoda 1

Dodaj ścieżkę CDN Bootstrap, Jquery i popper.js do pliku angular project index.html

Bootstrap.css
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css "
Bootstrap.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap. min.js "
Jquery.js
https://code.jquery.com/jquery-3.2.1.slim.min.js
Popper.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12 .9 / umd / popper.min.js

Metoda 2

1) Zainstaluj bootstrap przy użyciu npm

npm install bootstrap --save

po instalacji Bootstrap 4 potrzebujemy dwóch dodatkowych pakietów javascript, czyli Jquery i Popper.js bez tych dwóch pakietów bootstrap nie jest kompletny, ponieważ Bootstrap 4 używa pakietu Jquery i popper.js, więc musimy również zainstalować

2) Zainstaluj JQUERY

npm install jquery --save

3) Zainstaluj Popper.js

npm install popper.js --save

Teraz Bootstrap jest instalowany w katalogu projektu w folderze node_modules

otwórz angular.json ten plik jest dostępny w twoim katalogu angular otwórz ten plik i dodaj ścieżkę do plików bootstrap, jquery i popper.js wewnątrz ścieżki styles [] i scripts [] patrz poniższy przykład

"styles": [   
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "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"
  ],

Uwaga: nie zmieniaj sekwencji pliku js, powinno to wyglądać tak

Metoda 3

Zainstaluj bootstrap za pomocą npm Postępuj zgodnie z metodą 2 w metodzie 3, po prostu ustawiamy ścieżkę w pliku index.html zamiast angular.json pliku

bootstrap.css

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css">

Jquery.js

<script src="node_modules/jquery/dist/jquery.min.js"><br>

Bootstrap.js

<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"><br>

Popper.js

<script src="node_modules/popper.js/dist/umd/popper.min.js"><br>

Teraz Bootstrap działa dobrze Teraz

Aby skonfigurować / zintegrować / używać Bootstrap w trybie angular, najpierw musimy zainstalować pakiet Bootstrap za pomocą npm.

Zainstaluj pakiet

$ npm install bootstrap@4.0.0-alpha.6 --save   // for specific version
or
$ npm install bootstrap --save   // for latest version

Uwaga: polecenie --save zapisze zależność w naszej aplikacji kątowej w pliku package.json.

Teraz, gdy mamy zainstalowany pakiet z powyższym krokiem, możemy teraz powiedzieć Angular CLI, że musi załadować te style, używając dowolnej z poniższych opcji lub obu:

opcja 1) Dodanie do pliku src / styles.css

możemy dodać zależności, jak pokazano poniżej:

@import "~bootstrap/dist/css/bootstrap.min.css";

Opcja 2) Dodanie do angular-cli.json lub angular.json

Możemy dodać pliki stylów css do pliku angular-cli.json lub angular.json, który znajduje się w folderze głównym naszej aplikacji kątowej, jak pokazano poniżej:

"styles": [
   "../node_modules/bootstrap/dist/css/bootstrap.min.css",
   "styles.css"
]

Angular 4 - Konfiguracja Bootstrap / @ ng-bootstrap

Najpierw zainstaluj bootstrap w swoim projekcie za pomocą poniższego polecenia:

npm install --save bootstrap

Następnie dodaj tę linię "../node_modules/bootstrap/dist/css/bootstrap.min.css" do pliku angular-cli.json (folder główny) w stylach

"styles": [
   "../node_modules/bootstrap/dist/css/bootstrap.min.css",
   "styles.css"
],

Po zainstalowaniu powyższych zależności zainstaluj ng-bootstrap przez:

npm install --save @ng-bootstrap/ng-bootstrap

Po zainstalowaniu musisz zaimportować główny moduł.

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

Następnie możesz użyć wszystkich widżetów Bootstrap (np. Karuzela, modal, popover, podpowiedzi, zakładki itp.) I kilku dodatkowych gadżetów (wybór daty, ocena, znacznik czasu, typ naprzód).

W Angular4, gdy masz do czynienia z systemem @types , powinieneś zrobić następujące rzeczy:

Robić,

1) npm install --save @types/jquery
2) npm install --save @types/bootstrap

tsconfig.json

poszukaj tablicy typów i dodaj wpisy jquery i bootstrap ,

"types": [
      "jquery",
      "bootstrap",  
      "node"
]

Index.html

w sekcji nagłówkowej dodaj następujące wpisy,

  <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="node_modules/jquery/dist/jquery.min.js "></script>
  <script src="node_modules/bootstrap/dist/js/bootstrap.js "></script>

I zacznij używać jquery i bootstrap obu.

Jeśli używasz Sass / Scss, postępuj zgodnie z tym,

Zrób npm install

npm install bootstrap --save

i dodaj importoświadczenie do swojego pliku sass / scss,

@import '~bootstrap/dist/css/bootstrap.css'

Poniżej szczegółowe kroki i działający przykład można znaleźć na stronie https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/

Bardzo szczegółowe kroki z odpowiednim wyjaśnieniem.

Kroki: Instalowanie Bootstrap z NPM

Następnie musimy zainstalować Bootstrap. Zmień katalog na projekt, który stworzyliśmy (przykład cd angular-bootstrap) i wykonaj następujące polecenie:

W przypadku Bootstrap 3:

npm install bootstrap --save

Dla Bootstrap 4 (obecnie w wersji beta):

npm install bootstrap@next --save

LUB Alternatywa: Lokalny Bootstrap CSS Alternatywnie możesz również pobrać Bootstrap CSS i dodać go lokalnie do swojego projektu. Nie załadowałem Bootstrap ze strony internetowej i utworzyłem folder styles (ten sam poziom co styles.css):

Uwaga: nie umieszczaj lokalnych plików CSS w folderze zasobów. Kiedy tworzymy wersję produkcyjną za pomocą Angular CLI, pliki CSS zadeklarowane w .angular-cli.json zostaną zminimalizowane, a wszystkie style zostaną zgrupowane w jednym styles.css. Folder zasobów jest kopiowany do folderu dist podczas procesu budowania (kod CSS zostanie zduplikowany). Lokalne pliki CSS umieszczaj pod zasobami tylko w przypadku, gdy importujesz je bezpośrednio do pliku index.html.

Importowanie CSS 1. Mamy dwie opcje importowania CSS z Bootstrap, który został zainstalowany z NPM:

mocny tekst 1: Skonfiguruj .angular-cli.json:

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  "styles.scss"
]

2: Importuj bezpośrednio do src / style.css lub src / style.scss:

@import '~bootstrap/dist/css/bootstrap.min.css';

Osobiście wolę importować wszystkie moje style do src / style.css, ponieważ zostało już zadeklarowane w .angular-cli.json.

3.1 Alternatywa: lokalny plik Bootstrap CSS Jeśli dodałeś plik Bootstrap CSS lokalnie, po prostu zaimportuj go w formacie .angular-cli.json

"styles": [
  "styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
  "styles.scss"
],

lub src / style.css

@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';

4: Składniki JavaScript Bootstrap z ngx-bootstrap (opcja 1) Jeśli nie musisz używać komponentów JavaScript Bootstrap (które wymagają JQuery), to jest cała konfiguracja, której potrzebujesz. Ale jeśli potrzebujesz użyć modali, akordeonu, datepickera, podpowiedzi lub jakiegokolwiek innego komponentu, jak możemy użyć tych komponentów bez instalowania jQuery?

Istnieje biblioteka Angular wrapper dla Bootstrap o nazwie ngx-bootstrap, którą możemy również zainstalować z NPM:

npm install ngx-bootstrap --save

Uwaga ng2-bootstrap i ngx-bootstrap to ten sam pakiet. nazwa ng2-bootstrap została zmieniona na ngx-bootstrap po #itsJustAngular.

Jeśli chcesz zainstalować Bootstrap i ngx-bootstrap w tym samym czasie, gdy tworzysz projekt Angular CLI:

npm install bootstrap ngx-bootstrap --save

4.1: Dodanie wymaganych modułów Bootstrap w app.module.ts

Przejdź przez ngx-bootstrap i dodaj wymagane moduły w swoim app.module.ts. Na przykład załóżmy, że chcemy użyć składników rozwijanych, podpowiedzi i modalnych:

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [
    BrowserModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  // ...
})
export class AppBootstrapModule {}

Ponieważ wywołujemy metodę .forRoot () dla każdego modułu (ze względu na dostawców modułów ngx-bootstrap), funkcjonalności będą dostępne we wszystkich komponentach i modułach twojego projektu (zasięg globalny).

Alternatywnie, jeśli chcesz zorganizować ngx-bootstrap w innym module (tylko do celów organizacyjnych, w przypadku, gdy musisz zaimportować wiele modułów bs i nie chcesz zaśmiecać swojej aplikacji), możesz utworzyć moduł app-bootstrap.module.ts, zaimportuj moduły Bootstrap (za pomocą forRoot ()), a także zadeklaruj je w sekcji eksportu (aby stały się one również dostępne dla innych modułów).

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [
    CommonModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  exports: [BsDropdownModule, TooltipModule, ModalModule]
})
export class AppBootstrapModule {}

Na koniec nie zapomnij zaimportować modułu bootstrap do pliku app.module.ts.

importuj {AppBootstrapModule} z './app-bootstrap/app-bootstrap.module';

@NgModule({
  imports: [BrowserModule, AppBootstrapModule],
  // ...
})
export class AppModule {}

ngx-bootstrap współpracuje z Bootstrapem 3 i 4. Wykonałem też kilka testów i większość funkcji działa również z Bootstrapem 2.x (tak, wciąż mam trochę starszego kodu do utrzymania).

Mam nadzieję, że to komuś pomoże!

Testowane w Angular 7.0.0

Krok 1 - Zainstaluj wymagane zależności

npm install bootstrap (jeśli chcesz konkretną wersję, podaj numer wersji)

npm zainstaluj popper.js (jeśli chcesz mieć konkretną wersję, podaj numer wersji)

npm zainstaluj jquery

Wersje, które wypróbowałem:

"bootstrap": "^4.1.3",
"popper.js": "^1.14.5",
"jquery": "^3.3.1",

Krok 2: Określ biblioteki w poniższej kolejności w angular.json. W najnowszym oprogramowaniu angular nazwa pliku konfiguracyjnego to angular.json, a nie angular-cli.json

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/client",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
             "node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.scss"
            ],
            "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"
            ]
          },

Dla programu bootstrap 4.0.0-alph.6

npm install bootstrap@4.0.0-alpha.6 jquery tether --save

Następnie po zakończeniu uruchom:

npm install

Teraz. Otwórz plik .angular-cli.json i zaimportuj bootstrap, jquery i tether:

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

I teraz. Gotowy do drogi.

Jak widzę, masz już wiele odpowiedzi, ale możesz wypróbować tę metodę.

Najlepszą praktyką jest nie używanie jquery w angular, wolę https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/ng-cli.md , aby zainstalować metodę bootstrap bez użycia bootstrapa js, który zależy od jquery.

npm install ngx-bootstrap bootstrap --save

or

ng add ngx-bootstrap   (Preferred)

Utrzymuj swój kod jquery wolny w kątowej

Uruchom w swoim projekcie następującą komendę, npm install [email protected] --save

Po zainstalowaniu powyższej zależności uruchom następującą komendę npm, która zainstaluje moduł bootstrap npm install --save @ ng-bootstrap / ng-bootstrap

Sprawdź to w celach informacyjnych - https://github.com/ng-bootstrap/ng-bootstrap

Dodaj następujący import do app.module import {NgbModule} z '@ ng-bootstrap / ng-bootstrap'; i dodaj NgbModule do importu

W swoim stye.css @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Krok 1 : npm install bootstrap --save

Krok 2 : Wklej poniższy kod w angular.json node_modules / bootstrap / dist / css / bootstrap.min.css

Etap 3: NG służyć

dodaj do angular-cli.json

   "styles": [
         "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [ 
         "../node_modules/bootstrap/dist/js/bootstrap.js"
      ],

Będzie działać, sprawdziłem to.

Jeśli chcesz korzystać z bootstrapu online, a Twoja aplikacja ma dostęp do internetu, możesz dodać

@import url('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css');

Do głównego pliku style.css. i to najprostszy sposób.

Odniesienie: angular.io

Uwaga. To rozwiązanie ładuje bootstrap ze strony unpkg i musi mieć dostęp do internetu.

Angular 6 CLI, po prostu wykonaj:

ng add @ ng-bootstrap / schemics 

Aby zainstalować najnowszą wersję, użyj $ npm i --save bootstrap @ next

najpierw zainstaluj bootstrap w swoim projekcie przy użyciu npm npm i bootstrap , a następnie otwórz plik ur style.css w swoim projekcie i dodaj tę linię

@import "~bootstrap/dist/css/bootstrap.css";

i to jest to, że bootstrap został dodany do twojego projektu

| * | Instalowanie Bootstrap 4 dla Angular 2, 4, 5, 6 +:

| +> Zainstaluj Bootstrap za pomocą npm

npm install bootstrap --save

npm install popper.js --save

| +> Dodaj style i skrypty do angular.json

"architect": [{
    ...
    "styles": [
        "node_modules/bootstrap/dist/css/bootstrap.min.css",
        "src/styles.scss"
    ],
    "scripts": [
        "node_modules/jquery/dist/jquery.js",
        "node_modules/popper.js/dist/umd/popper.min.js",
        "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ]
    ...
}]

Jeśli korzystasz z Angular 6+, dodaj do angular.json :

"styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
          ],

Dodanie bootrap-a obecnej wersji 4 do angulara:

1 / Najpierw musisz zainstalować te:

npm install jquery --save
npm install popper.js --save
npm install bootstrap --save

2 / Następnie dodaj potrzebne pliki skryptów do skryptów w angular.json:

"scripts": [
  "node_modules/jquery/dist/jquery.slim.js",
  "node_modules/popper.js/dist/umd/popper.js",
  "node_modules/bootstrap/dist/js/bootstrap.js"
],
enter code here

3 / Na koniec dodaj Bootstrap CSS do tablicy stylów w angular.json:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.css",
  "src/styles.css"
],`

sprawdź ten link

pracujesz z cdn dla bootstrap i jquery lub instalujesz bootstarp bezpośrednio w aplikacji za pomocą:

npm install ngx-bootstrap --save

użyj również https://ng-bootstrap.github.io/#/home , ale to nie jest właściwe

https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a