Como usar o Bootstrap num projecto Angular?
estou a começar a minha primeira aplicação Angular e a minha configuração básica está feita.
Como posso adicionar 'Bootstrap' à minha aplicação?
Se puder dar um exemplo, seria uma grande ajuda.17 answers
Desde que use o Angular-CLI para gerar novos projectos, existe outra forma de tornar o bootstrap acessível em Angular 2/4.
- através da interface da linha de comandos, navegue para a pasta do projecto. Em seguida, use npm para instalar o bootstrap:
$ npm install --save bootstrap
. A opção--save
fará com que o bootstrap apareça nas dependências. - edite o .angular-cli.ficheiro json, que configura o seu projecto. Está dentro do directório do projecto. Adicionar uma referência ao
"styles"
matriz. A referência tem de ser a localização relativa do ficheiro bootstrap obtido com o npm. No meu caso é:
O meu exemplo .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": {}
}
}
Agora o 'bootstrap' deve fazer parte da sua configuração predefinida.
, Uma integração com o Angular2 também está disponível através do ng2-bootstrap projeto : https://github.com/valor-software/ng2-bootstrap.
Para o instalar, basta colocar estes ficheiros na sua página HTML principal:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
Depois pode usá-lo nos seus componentes desta forma:
import {Component} from 'angular2/core';
import {Alert} from 'ng2-bootstrap/ng2-bootstrap';
@Component({
selector: 'my-app',
directives: [Alert],
template: `<alert type="info">ng2-bootstrap hello world!</alert>`
})
export class AppComponent {
}
Tudo o que precisas de fazer é incluir o CSS boostrap no teu índice.ficheiro html.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
Se planeia usar o Bootstrap 4, que é necessário com a equipa angular-ui ng-bootstrap que é mencionada neste tópico, irá querer usar isto em alternativa (nota: não precisa de incluir o ficheiro JS):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
Você também pode referenciar isto localmente depois de executar npm install [email protected] --save
apontando para o ficheiro no seu ficheiro styles.scss
, assumindo que está a usar o SASS:
@import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
A opção mais popular é usar uma biblioteca de terceiros distribuída como pacote npm, como o projecto ng2-bootstrap https://github.com/valor-software/ng2-bootstrap {[10] } ou biblioteca de inicialização Angular UI.
Uso pessoalmente o ng2-bootstrap. Existem muitas maneiras de configurá-lo, porque a configuração depende de como o seu projeto Angular é construído. Por baixo do ' I ' postar a configuração do exemplo com base no projecto de arranque rápido Angular 2 https://github.com/angular/quickstart
Primeiro adicionamos dependências no nosso pacote.json
{ ...
"dependencies": {
"@angular/common": "~2.4.0",
"@angular/compiler": "~2.4.0",
"@angular/core": "~2.4.0",
...
"bootstrap": "^3.3.7",
"ng2-bootstrap": "1.1.16-11"
},
... }
Então temos que mapear os nomes para URL ' s próprios no systemjs.configuracao.js
(function (global) {
System.config({
...
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
//bootstrap
'moment': 'npm:moment/bundles/moment.umd.js',
'ng2-bootstrap': 'npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
...
});
})(this);
Temos de importar presilha.ficheiro css no índice.galeria. Nós podemos obtê-lo a partir de /node_ modules/Bootstrap diretório em nosso disco rígido (porque adicionamos Bootstrap 3.3.7 dependência) ou da web. Lá estamos obtendo-o da web:
<!DOCTYPE html>
<html>
<head>
...
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
...
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
Devíamos editar a nossa aplicação.modulo.TS ficheiro de /app directório
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//bootstrap alert import part 1
import {AlertModule} from 'ng2-bootstrap';
import { AppComponent } from './app.component';
@NgModule({
//bootstrap alert import part 2
imports: [ BrowserModule, AlertModule.forRoot() ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
E finalmente a nossa aplicação.componente.ts ficheiro da pasta /app
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<alert type="success">
Well done!
</alert>
`
})
export class AppComponent {
constructor() { }
}
Depois temos de instalar as nossas dependências de bootstrap e ng2-bootstrap antes de executarmos a nossa aplicação. Devemos ir para o nosso diretório de projeto e tipo
npm install
Finalmente podemos começar a nossa aplicação.
npm start
Existem muitas amostras de código no GitHub do projecto ng2-bootstrap que mostram como importar o ng2-bootstrap para várias compilações de projectos angulares 2. Há até uma amostra de plnkr. Há também API documentation on Valor-software (authors of the library) website.
1. Solução num ambiente com folhas de estilo scss
npm install bootstrap-sass —save
em grande estilo.scss:
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';
Note1:o carácter ~
é uma referência à pasta nodes_ modules.
Note2: como estamos usando scss, podemos personalizar todas as variáveis boostrap que queremos.
2. Solução num ambiente com css folhas de estilo
npm install bootstrap —save
em grande estilo.css:
@import '~bootstrap/dist/css/bootstrap.css';
Existem várias formas de configurar o angular2 com o Bootstrap, uma das formas mais completas de tirar o máximo partido dele é usar o ng-bootstrap, usando esta configuração damos ao algular2 controlo completo sobre o nosso DOM, evitando a necessidade de usar o JQuery e o Boostrap.js.
1-Tome como ponto de partida um novo projecto criado com o Angular-CLI e usando a linha de comandos, instale ng-bootstrap:
npm install @ng-bootstrap/ng-bootstrap --save
Nota: mais informações em https://ng-bootstrap.github.io/#/getting-started
2-então precisamos instalar bootstrap para o css e o sistema de grade.
npm install [email protected] --save
Nota: mais informações em https://getbootstrap.com/docs/4.0/getting-started/download/
Agora temos a configuração do ambiente e para isso temos de mudar o .angular-cli.JSON adicionando ao estilo:"../node_modules/bootstrap/dist/css/bootstrap.min.css"
Aqui está um exemplo:
"apps": [
{
"root": "src",
...
],
"index": "index.html",
...
"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"
}
}
]
O próximo passo é adicionar o módulo ng-boostrap ao nosso projecto, para fazer por isso, temos de adicionar à aplicação.modulo.ts:
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
Depois adicione o novo módulo à aplicação: NgbModule.forRoot ()
Exemplo:
@NgModule({
declarations: [
AppComponent,
AppNavbarComponent
],
imports: [
BrowserModule,
NgbModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
Agora podemos começar a usar o bootstrap4 no nosso projecto angular2/5.
Eu tinha a mesma pergunta e encontrei este artigo com uma solução realmente limpa:
Http://leon.radley.se/2017/01/angular-cli-and-bootstrap-4/
Aqui estão as instruções, mas com a minha solução simplificada:
Instalar Bootstrap 4 (instruções):
npm install --save [email protected]
Se necessário, mude o nome do seu src/estilos.estilos css a .scss e update .angular-cli.json para reflectir a mudança:
"styles": [
"styles.scss"
],
Depois adicionar esta linha a styles.scss:
@import '~bootstrap/scss/bootstrap';
"dependencies": {
"bootstrap": "^3.3.7",
}
Depois adicionar o código abaixo no ficheiro .angular-cli.json
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],
Finalmente basta actualizar o seu npm localmente usando o terminal
$ npm update
- npm install --save bootstrap
-
Ir para - > angular-cli.JSON file, find styles properties e just add next sting:"../node_ modules/bootstrap/dist/css / bootstrap.minuto.css", pode ser assim:
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ],
Aqui está a ligação: http://codingthesmartway.com/using-bootstrap-with-angular/
Pode tentar usar a Biblioteca Ui Prettyfox http://ng.prettyfox.org
Esta biblioteca usa estilos de bootstrap 4 e não precisa de jquery.
Adicione as seguintes linhas na sua página html
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
Se usar um cli angular, depois de adicionar o bootstrap na embalagem.json e instalar o pacote, tudo que você precisa é adicionar boostrap.minuto.css em .angular-cli.json's" styles " section.
Uma coisa importante é " quando se faz mudanças .angular-cli.json terá de reiniciar o ng serve para obter as alterações de configuração."Ref:
Https://github.com/angular/angular-cli/wiki/stories-include-bootstrap
Outra boa alternativa é usar o esqueleto Angular 2/4 + Bootstrap 4
1) transferir o ZIP e extrair a pasta zip
2) já
Procedimento Angular 6+ & Bootstrap 4+:
- Abra uma linha de comandos na pasta do seu projecto
- instalar o 'bootstrap' com o comando:
npm install --save [email protected]
- o 'Bootstrap' precisa do 'jQuery' de dependências, por isso, se não o tiver, pode instalá-lo com o comando :
npm install --save jquery 1.9.1
- pode ser necessário corrigir a vulnerabilidade com o comando:
npm audit fix
- no teu estilo principal.ficheiro scss, adicionar a seguinte linha:
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
Ou
Adicione esta linha à sua linha principal indice.ficheiro html: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">