Como utilizar o bootstrap 4 no angular 2?
o pacote npm "ng2-bootstrap" não está a funcionar porque não me permite usar as classes css do bootstrap, em vez disso fornece componentes personalizados. ([4]} http://github.com/valor-software/ng2-bootstrap)
no meu projecto angular 2 estou a usar o sass, seria possível construir o bootstrap 4 a partir do código-fonte como também é usar o sass para o estilo?
8 answers
Para usar qualquer biblioteca visual que precise de JQuery, basta fazer o seguinte:
- Adicione o css da biblioteca ao índice;
- Adicionar o ficheiro jquery js ao índice;
- Adicionar os ficheiros js da biblioteca no índice;
- Instalar os ficheiros de definição da biblioteca (D. ts);
- Instalar ficheiros de definições jquery (D. ts);
Se a biblioteca não tiver ficheiros de definição, você pode:
- cria tu a definição;
- Criar um global qualquer variável com o o mesmo nome do objeto da Biblioteca, apenas para não obter erros de compilador;
- Usar com erros ( esta é a pior opção);
Agora você pode usar a biblioteca dentro do Typescript;
Bootstrap4 alpha para Angular2 CLI (também funciona para Angular4 CLI)
Se estiver a utilizar o angular2 cli/angular 4 cli faça o seguinte:
npm i bootstrap@next --save
Isto irá adicionar bootstrap 4 ao seu projecto.
Em seguida, vá para o seu ficheiro src/style.scss
ou src/style.css
e importação de 'bootstrap' para lá:
Pelo estilo.css
/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
Pelo estilo.scss
/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";
Se estiver a utilizar scss, certifique-se que muda o seu estilo por omissão para scss em .angular-cli.json
:
"defaults": {
"styleExt": "scss",
"component": {}
}
Componentes de JS de inicialização
Para os componentes de JS Bootstrap funcionarem, terá de importar bootstrap.js
para .angular-cli.json
em scripts
(isto deve acontecer automaticamente):
...
"scripts": ["../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"],
...
Actualizar 2017/09/13: Boostrap 4 Beta está agora a usar popper.js em vez de amarra.js. Então, dependendo da versão que você está usando importar qualquer um dos cabos.js (alpha) ou popper.js (beta) em seus scripts.Obrigado pelo aviso. @MinorThreat
As opções acima irão funcionar, no entanto, Uso esta abordagem através do NPM:
- navegar para: Bootstrap 4 e obter o comando npm
-
Execute o comando NPM obtido do Passo 1 do seu projecto I. e
npm install [email protected] --save
Depois de instalar a dependência acima, execute o seguinte comando npm que irá instalar o módulo de inicialização
npm install --save @ng-bootstrap/ng-bootstrap
Você pode ler mais sobre isso aqui- adicionar a seguinte importação em app.Módulo
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
e adicionarNgbModule
aoimports
-
O teu módulo de aplicações será assim:
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; @NgModule({ declarations: [ AppComponent, WeatherComponent ], imports: [ BrowserModule, FormsModule, HttpModule, NgbModule.forRoot(), // Add Bootstrap module here. ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
-
Abrir angular-cli.JSON e inserir um novo item na lista de estilos:
"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ],
-
Abrir src/app / app.componente.html e adicionar
<alert type="success">hello</alert>
Ou se gostaria de utilizar a indicação ng coloque o seguinte na sua
app.component.html page
<ngb-alert [dismissible]="true">I'm a dismissible alert :) </ngb-alert>
Agora execute o seu projecto e deverá ver a mensagem de alerta de inicialização no navegador.
Nota: pode ler mais sobre os Componentes aqui
- incluindo simplesmente uma ligação ao ficheiro CSS do Bootstrap na sua
index.html
Página - utilizando ng-bootstrap - um conjunto específico de directivas angulares 2 para as partes em que é necessário um comportamento dinâmico. Desta forma, você não precisa importar / configurar jQuery nem se importar com o JavaScript do Bootstrap.
Pode usar o MPN para instalar a versão mais recente do bootstrap. Isto pode ser feito usando o comando:
npm install [email protected]
E depois disto você pode ter que importar bootstrap.css no seu ficheiro css principal. Que serão estilos.css, se estiver a usar o angular-cli.
@import '~bootstrap/dist/css/bootstrap.min.css';
Se quiser saber mais, por favor use o link: http://technobytz.com/install-bootstrap-4-using-npm.html
Primeiro vai para o directório do seu projecto e segue os passos abaixo indicados.
1) npm install --save @ng-bootstrap/ng-bootstrap
(Execute este comando na linha de comandos js prompt)
2)npm install [email protected]
(Próxima execução isto)
3)import {NgbModule} from '@ng-bootstrap/ng-bootstrap'
(escreva isto no módulo app.ts)
4) Se o módulo for o seu módulo root, inclua este
`@NgModule({
declarations: [AppComponent, ...],
imports: [NgbModule.forRoot(), ...],
bootstrap: [AppComponent]
})`
(or)
Se não for o módulo root
`@NgModule({
declarations: [OtherComponent, ...],
imports: [NgbModule, ...]
})`
5) escreva isto no sistema.configuracao.js
`map: {
'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-
bootstrap/bundles/ng-bootstrap.js',
}`
6) Adicionar ao índice.html
`<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css"
href="../node_modules/bootstrap/dist/css/bootstrap.min.css" />`
ng add
foi introduzido com Angular 6. Para instalar Bootstrap 4 (ng-bootstrap 2.0.0)
ng add @ng-bootstrap/schematics
Não se esqueça de reiniciar a sua aplicação com ng serve
.
No angular 6 não use npm I bootstrap@next -- save may iria funcionar, mas às vezes não seria melhor adicionar estes:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script>