Zakładając, że używasz Angular-CLI do generowania nowych projektów, istnieje inny sposób na udostępnienie bootstrapu w Angular 2/4 .
- Poprzez interfejs wiersza poleceń przejdź do folderu projektu. Następnie użyj npm zainstalować bootstrap:
$ npm install --save bootstrap
. Ta --save
opcja spowoduje, że bootstrap pojawi się w zależnościach.
- Edytuj plik .angular-cli.json, który konfiguruje Twój projekt. Znajduje się w katalogu projektu. Dodaj odwołanie do
"styles"
tablicy. Odwołanie musi być ścieżką względną do pliku ładowania początkowego pobranego za pomocą npm. W moim przypadku jest to:"../node_modules/bootstrap/dist/css/bootstrap.min.css",
Mój przykład .angular-cli.json:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "bootstrap-test"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
Teraz bootstrap powinien być częścią twoich ustawień domyślnych.
Integracja z Angular2 jest również dostępna poprzez projekt ng2-bootstrap : https://github.com/valor-software/ng2-bootstrap .
Aby go zainstalować, po prostu umieść te pliki na swojej głównej stronie HTML:
Następnie możesz użyć go w swoich komponentach w ten sposób:
źródło
Wszystko, co musisz zrobić, to umieścić boostrap css w pliku index.html.
źródło
app.component.html
. Proszę powiedzieć.Inną bardzo dobrą (lepszą?) Alternatywą jest użycie zestawu widżetów stworzonych przez zespół angular-ui: https://ng-bootstrap.github.io
źródło
Jeśli planujesz używać Bootstrap 4, który jest wymagany z ng-bootstrap zespołu angular-ui, o którym mowa w tym wątku, będziesz chciał użyć tego zamiast tego (UWAGA: nie musisz dołączać pliku JS):
Możesz również odwołać się do tego lokalnie po uruchomieniu
npm install [email protected] --save
, wskazując plik wstyles.scss
pliku, zakładając, że używasz SASS:źródło
@import
umieścić to w swoim pliku SASS. Jeśli nie, możesz spróbować dodać go do swojegovendor.ts
pliku, ale nie używam tego w moim kodzie.Najpopularniejszą opcją jest użycie biblioteki innej firmy dystrybuowanej jako pakiet npm, np. Projekt ng2-bootstrap https://github.com/valor-software/ng2-bootstrap lub biblioteka Angular UI Bootstrap.
Osobiście używam ng2-bootstrap. Istnieje wiele sposobów, aby to skonfigurować, ponieważ konfiguracja zależy od tego, jak jest budowany projekt Angular. Poniżej zamieszczam przykładową konfigurację opartą na projekcie Angular 2 QuickStart https://github.com/angular/quickstart
Najpierw dodajemy zależności w naszym package.json
Następnie musimy odwzorować nazwy na odpowiednie adresy URL w systemjs.config.js
Musimy zaimportować plik bootstrap .css do pliku index.html. Możemy go pobrać z katalogu / node_modules / bootstrap na naszym dysku twardym (ponieważ dodaliśmy zależność bootstrap 3.3.7) lub z sieci. Tam otrzymujemy go z sieci:
Powinniśmy edytować nasz plik app.module.ts z katalogu / app
I wreszcie nasz plik app.component.ts z katalogu / app
Następnie musimy zainstalować nasze zależności bootstrap i ng2-bootstrap przed uruchomieniem naszej aplikacji. Powinniśmy przejść do katalogu naszego projektu i wpisać
Wreszcie możemy uruchomić naszą aplikację
Istnieje wiele przykładów kodu na github projektu ng2-bootstrap pokazujących, jak zaimportować ng2-bootstrap do różnych kompilacji projektów Angular 2. Jest nawet próbka plnkr. Istnieje również dokumentacja API na stronie Valor-software (autorów biblioteki).
źródło
W środowisku angular-cli najprostszy sposób, jaki znalazłem, jest następujący:
1. Rozwiązanie w środowisku z arkuszami stylów s̲c̲s̲
W style.scss:
Uwaga 1:
~
Znak jest odniesieniem do folderu nodes_modules .Uwaga 2: Ponieważ używamy scss, możemy dostosować wszystkie potrzebne zmienne boostrap.
2. Rozwiązanie w środowisku z arkuszami stylów c̲s̲
W style.css:
źródło
Istnieje kilka sposobów konfiguracji angular2 z Bootstrapem, jednym z najbardziej kompletnych sposobów, aby jak najlepiej go wykorzystać, jest użycie ng-bootstrap, używając tej konfiguracji dajemy algular2 pełną kontrolę nad naszym DOM, unikając potrzeby używania JQuery i Boostrap .js.
1-Weź za punkt wyjścia nowy projekt utworzony za pomocą Angular-CLI i używając wiersza poleceń, zainstaluj ng-bootstrap:
Uwaga: więcej informacji na https://ng-bootstrap.github.io/#/getting-started
2-Następnie musimy zainstalować bootstrap dla css i systemu grid.
Uwaga: Więcej informacji na https://getbootstrap.com/docs/4.0/getting-started/download/
Teraz mamy skonfigurowane środowisko iw tym celu musimy zmienić plik .angular-cli.json, dodając do stylu:
Oto przykład:
Następnym krokiem jest dodanie modułu ng-boostrap do naszego projektu, w tym celu musimy dodać moduł app.module.ts:
Następnie dodaj nowy moduł do aplikacji aplikacji: NgbModule.forRoot ()
Przykład:
Teraz możemy zacząć używać bootstrap4 w naszym projekcie angular2 / 5.
źródło
Miałem to samo pytanie i znalazłem ten artykuł z naprawdę czystym rozwiązaniem:
http://leon.radley.se/2017/01/angular-cli-and-bootstrap-4/
Oto instrukcje, ale z moim uproszczonym rozwiązaniem:
Zainstaluj Bootstrap 4 ( instrukcje ):
W razie potrzeby zmień nazwę pliku src / styles.css na styles.scss i zaktualizuj plik .angular-cli.json, aby odzwierciedlić zmianę:
Następnie dodaj tę linię do styles.scss :
źródło
po prostu sprawdź swój plik package.json i dodaj zależności dla bootstrap
następnie dodaj poniższy kod do
.angular-cli.json
plikuNa koniec po prostu aktualizujesz swój npm lokalnie za pomocą terminala
źródło
przejdź do -> plik angular-cli.json , znajdź właściwości stylów i po prostu dodaj następne żądło: "../node_modules/bootstrap/dist/css/bootstrap.min.css", Może to wyglądać tak:
źródło
Procedura z Angular 6+ i Bootstrap 4+:
npm install --save [email protected]
npm install --save jquery 1.9.1
npm audit fix
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
LUB
Dodaj tę linię do swojego głównego pliku index.html:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
źródło
Szukałem tej samej odpowiedzi i wreszcie znalazłem ten link. Możesz znaleźć wyjaśnione trzy różne sposoby dodawania bootstrap css do projektu angular 2. Pomogło mi.
Oto link: http://codingthesmartway.com/using-bootstrap-with-angular/
źródło
Moją rekomendacją byłoby zamiast deklarowania tego w rysiku json, aby umieścić go w scss, aby wszystko było skompilowane i w jednym miejscu.
1) zainstaluj bootstrap z npm
2) Zadeklaruj bootstrap npm w css z naszymi stylami
Utwórz
_bootstrap-custom.scss
:3) W plikach styles.scss wstawiamy
więc będziemy mieć skompilowany cały rdzeń w jednym miejscu
źródło
Możesz spróbować użyć biblioteki interfejsu użytkownika Prettyfox http://ng.prettyfox.org
Ta biblioteka używa stylów bootstrap 4 i nie potrzebuje jquery.
źródło
dodaj następujące wiersze do swojej strony html
źródło
Jeśli używasz angular cli, po dodaniu bootstrap do package.json i zainstalowaniu pakietu, wszystko czego potrzebujesz to dodać boostrap.min.css do sekcji "styles" .angular-cli.json.
Jedną ważną rzeczą jest to, że „Kiedy wprowadzasz zmiany w .angular-cli.json, będziesz musiał ponownie uruchomić program ng służący do pobierania zmian w konfiguracji”.
Odniesienie:
https://github.com/angular/angular-cli/wiki/stories-include-bootstrap
źródło
Inną bardzo dobrą alternatywą jest użycie szkieletu Angular 2/4 + Bootstrap 4
1) Pobierz ZIP i wypakuj folder zip
2) ng służyć
źródło