Para ver los pasos detallados a continuación y el ejemplo de trabajo, puede visitar
https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/
Pasos muy detallados con una explicación adecuada.
Pasos:
instalar Bootstrap desde NPM
A continuación, necesitamos instalar Bootstrap. Cambie el directorio al proyecto que creamos (cd angular-bootstrap-example) y ejecute el siguiente comando:
Para Bootstrap 3:
npm install bootstrap --save
Para Bootstrap 4 (actualmente en versión beta):
npm install bootstrap@next --save
O
Alternativa: Bootstrap CSS local
Como alternativa, también puede descargar Bootstrap CSS y agregarlo localmente a su proyecto. Descargué Bootstrap del sitio web y creé estilos de carpeta (mismo nivel que styles.css):
Nota:
No coloque sus archivos CSS locales en la carpeta de activos. Cuando hacemos la compilación de producción con Angular CLI, los archivos CSS declarados en .angular-cli.json se reducirán y todos los estilos se agruparán en un solo styles.css. La carpeta de activos se copia en la carpeta dist durante el proceso de compilación (el código CSS se duplicará). Solo coloque sus archivos CSS locales debajo de los activos en caso de que los importe directamente en index.html.
Importación del CSS
1. Tenemos dos opciones para importar el CSS desde Bootstrap que se instaló desde NPM:
texto fuerte 1: Configure .angular-cli.json:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
2: Importe directamente en src / style.css o src / style.scss:
@import '~bootstrap/dist/css/bootstrap.min.css';
Personalmente prefiero importar todos mis estilos en src / style.css ya que ya se ha declarado en .angular-cli.json.
3.1 Alternativa: CSS Bootstrap local
Si agregó el archivo CSS Bootstrap localmente, simplemente impórtelo en .angular-cli.json
"styles": [
"styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
"styles.scss"
],
o
src / style.css
@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';
4: Componentes JavaScript Bootstrap con ngx-bootstrap (Opción 1)
En caso de que no necesite utilizar componentes JavaScript Bootstrap (que requieren JQuery), esta es toda la configuración que necesita. Pero si necesita usar modales, acordeón, selector de fechas, información sobre herramientas o cualquier otro componente, ¿cómo podemos usar estos componentes sin instalar jQuery?
Existe una biblioteca contenedora angular para Bootstrap llamada ngx-bootstrap que también podemos instalar desde NPM:
npm install ngx-bootstrap --save
Tenga en cuenta que ng2-bootstrap y ngx-bootstrap son el mismo paquete. ng2-bootstrap se renombró a ngx-bootstrap después de #itsJustAngular.
En caso de que desee instalar Bootstrap y ngx-bootstrap al mismo tiempo cuando crea su proyecto CLI de Angular:
npm install bootstrap ngx-bootstrap --save
4.1: Agregar los módulos Bootstrap requeridos en app.module.ts
Siga el ngx-bootstrap y agregue los módulos necesarios en su app.module.ts. Por ejemplo, supongamos que queremos usar los componentes desplegable, descripción emergente y modal:
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 {}
Debido a que llamamos al método .forRoot () para cada módulo (debido a los proveedores de módulos ngx-bootstrap), las funcionalidades estarán disponibles en todos los componentes y módulos de su proyecto (alcance global).
Como alternativa, si desea organizar el ngx-bootstrap en un módulo diferente (solo con fines de organización en caso de que necesite importar muchos módulos bs y no desee saturar su módulo de aplicación), puede crear un módulo app-bootstrap.module.ts, importe los módulos Bootstrap (usando forRoot ()) y también declarelos en la sección de exportaciones (para que también estén disponibles para otros módulos).
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 {}
Por último, no olvide importar su módulo de arranque en su app.module.ts.
importar {AppBootstrapModule} desde './app-bootstrap/app-bootstrap.module';
@NgModule({
imports: [BrowserModule, AppBootstrapModule],
// ...
})
export class AppModule {}
ngx-bootstrap funciona con Bootstrap 3 y 4. Y también hice algunas pruebas y la mayoría de las funcionalidades también funcionan con Bootstrap 2.x (sí, todavía tengo algo de código heredado que mantener).
¡Espero que esto ayude a alguien!
