twitter bootstrap - ngbmodule - Angular 4: ¿Cómo incluir Bootstrap?
ngbdatepicker (21)
Para configurar la dependencia de Bootstrap, necesitamos instalar la dependencia de Bootstrap usando npm.
$ npm install [email protected] --save
Nota: el comando --save guardará la dependencia en nuestra aplicación angular dentro del archivo package.json.
Ahora que tenemos las dependencias en su lugar, podemos decirle a Angular CLI que necesita cargar estos estilos usando cualquiera de las siguientes opciones o ambas:
opción 1) Agregar al archivo src / styles.css
podemos agregar las dependencias como se muestra a continuación:
@import "~bootstrap/dist/css/bootstrap.min.css";
Opción 2) Agregar en angular-cli.json o angular.json
Podemos agregar los archivos css de estilo en el archivo angular-cli.json o angular.json que está en la carpeta raíz de nuestra aplicación angular como se muestra a continuación:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
]
Soy un desarrollador de backend y solo estoy jugando con Angular4. Así que hice este tutorial de instalación: https://www.youtube.com/watch?v=cdlbFEsAGXo .
Dado esto, ¿cómo puedo agregar bootstrap a la aplicación para poder usar la clase "container-fluid" o "col-md-6" y cosas así?
Angular 4 - Configuración Bootstrap / @ ng-bootstrap
Primero instale bootstrap en su proyecto usando el siguiente comando:
npm install --save bootstrap
Luego agregue esta línea
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
al archivo angular-cli.json (carpeta raíz) en estilos
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
Después de instalar las dependencias anteriores, instale ng-bootstrap a través de:
npm install --save @ng-bootstrap/ng-bootstrap
Una vez instalado, debe importar el módulo principal.
import {NgbModule} from ''@ng-bootstrap/ng-bootstrap'';
Después de esto, puede usar Todos los widgets de Bootstrap (por ejemplo, carrusel, modal, popovers, información sobre herramientas, pestañas, etc.) y varias cosas adicionales (datepicker, rating, timepicker, typeahead).
A medida que esta obtenga más y más respuestas, marcaré la que me ayudó:
Angular 6 CLI, solo haz:
ng add @ ng-bootstrap / schematics
Como puedo ver, ya tienes muchas respuestas, pero puedes probar este método.
Su mejor práctica es no usar jquery en angular, prefiero https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/ng-cli.md método para instalar bootstrap sin usar bootstrap componente js que depende de jquery.
npm install ngx-bootstrap bootstrap --save
or
ng add ngx-bootstrap (Preferred)
Mantenga su código libre de jquery en angular
Ejecute el siguiente comando en su proyecto, es decir, npm install [email protected] --save
Después de instalar la dependencia anterior, ejecute el siguiente comando npm que instalará el módulo bootstrap npm install --save @ ng-bootstrap / ng-bootstrap
Mira esto para la referencia: https://github.com/ng-bootstrap/ng-bootstrap
Agregue la siguiente importación en app.module import {NgbModule} desde ''@ ng-bootstrap / ng-bootstrap''; y agregue NgbModule a las importaciones
En su stye.css @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
En Angular4 al tratar con el sistema @types , debe hacer lo siguiente,
Hacer,
1) npm install --save @types/jquery
2) npm install --save @types/bootstrap
tsconfig.json
busque la matriz de tipos y agregue entradas jquery y bootstrap ,
"types": [
"jquery",
"bootstrap",
"node"
]
Index.html
en la sección de cabecera agregue las siguientes entradas
<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>
Y comience a usar jquery y bootstrap ambos.
Mira el video o sigue el paso
Instale bootstrap 4 en angular 2 / angular 4 / angular 5 / angular 6
Hay tres formas de incluir bootstrap en su proyecto
1) Agregue el enlace CDN en el archivo index.html
2) Instale bootstrap usando npm y configure la ruta en
angular.json
Recomendado
3) Instale bootstrap usando npm y configure la ruta en el archivo index.html
Te recomendé que sigas 2 métodos que están instalados bootstrap usando npm porque está instalado en tu directorio de proyecto y puedes acceder fácilmente
Método 1
Agregue la ruta CDN Bootstrap, Jquery y popper.js a su archivo angular index.html del proyecto
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
Método 2
1) Instalar bootstrap usando npm
npm install bootstrap --save
después de la instalación de Bootstrap 4, necesitamos dos paquetes javascript más que sean Jquery y Popper.js sin estos dos paquetes bootstrap no está completo porque Bootstrap 4 está usando el paquete Jquery y popper.js, por lo que también tenemos que instalar
2) Instalar JQUERY
npm install jquery --save
3) Instalar Popper.js
npm install popper.js --save
Ahora Bootstrap se instala en su directorio de proyectos dentro de la carpeta node_modules
abra angular.json, este archivo está disponible en su directorio angular, abra ese archivo y agregue la ruta de arranque, jquery y archivos popper.js dentro de la ruta de estilos [] y scripts [] , consulte el siguiente ejemplo
"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"
],
Nota: No cambie una secuencia de archivo js, debería ser así
Método 3
Instale bootstrap usando npm, siga el
Método 2
en el método 3, solo establecemos la ruta dentro del archivo index.html en lugar del archivo
angular.json
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>
Ahora Bootstrap funciona bien ahora
Para bootstrap 4.0.0-alph.6
npm install [email protected] jquery tether --save
Luego, una vez hecho esto, ejecute:
npm install
Ahora. Abra el archivo .angular-cli.json e importe bootstrap, jquery y 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"
]
Y ahora. Estás listo para ir
Para instalar el último uso $ npm i --save bootstrap @ next
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/
Detalles muy detallados con la explicación adecuada.
Pasos: Instalación de 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: CSS Bootstrap local Como alternativa, también puede descargar el CSS Bootstrap y agregarlo localmente a su proyecto. Descargué Bootstrap del sitio web y creé una carpeta de estilos (el 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 minimizarán y todos los estilos se agruparán en un único 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 bajo activos en caso de que los importe directamente en index.html.
Importar el CSS 1.Tenemos dos opciones para importar el CSS de Bootstrap que se instaló desde NPM:
texto seguro 1: Configurar .angular-cli.json:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
2: Importar 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 usar componentes JavaScript Bootstrap (que requieren JQuery), esta es toda la configuración que necesita. Pero si necesita usar modales, acordeón, selector de fecha, información sobre herramientas o cualquier otro componente, ¿cómo podemos usar estos componentes sin instalar jQuery?
Hay una biblioteca de contenedor angular para Bootstrap llamada ngx-bootstrap que también podemos instalar desde NPM:
npm install ngx-bootstrap --save
Nota: 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 cree su proyecto CLI angular:
npm install bootstrap ngx-bootstrap --save
4.1: Agregar los módulos Bootstrap necesarios en app.module.ts
Ve a través de ngx-bootstrap y agrega los módulos necesarios en tu app.module.ts. Por ejemplo, supongamos que queremos usar los componentes desplegable, información sobre herramientas 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 para fines de organización en caso de que necesite importar muchos módulos bs y no desee saturar su app.module), puede crear un módulo app-bootstrap.module.ts, importa los módulos Bootstrap (usando forRoot ()) y también los declara 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 olvides importar tu módulo bootstrap en tu 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!
Probado en angular 7.0.0
Paso 1 - Instalar las dependencias requeridas
npm install bootstrap (si desea una versión específica, especifique el número de versión)
npm install popper.js (si desea una versión específica, especifique el número de versión)
npm install jquery
Versiones que he probado:
"bootstrap": "^4.1.3",
"popper.js": "^1.14.5",
"jquery": "^3.3.1",
Paso 2: especifique las bibliotecas en el siguiente orden en angular.json. En el último angular, el nombre del archivo de configuración es angular.json no 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"
]
},
Si desea usar bootstrap en línea y su aplicación tiene acceso a Internet, puede agregar
@import url(''https://unpkg.com/[email protected]/dist/css/bootstrap.min.css'');
En su archivo principal style.css. Y es la forma más sencilla.
Referencia: angular.io
Nota. Esta solución carga bootstrap desde el sitio web de unpkg y necesita tener acceso a internet.
Si está utilizando Sass / Scss, siga esto,
Instalar npm
npm install bootstrap --save
y agregue la declaración de
import
a su archivo sass / scss,
@import ''~bootstrap/dist/css/bootstrap.css''
agregar en angular-cli.json
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
Será trabajo, lo revisé.
consulte este enlace https://github.com/angular/angular-cli/wiki/stories-include-bootstrap .
proporciona instrucciones paso a paso sobre cómo incluir el último bootstrap en su angular 4 usando angular-cli.
primero instale bootstrap en su proyecto usando npm
npm i bootstrap
después de eso abra su archivo style.css en su proyecto y agregue esta línea
@import "~bootstrap/dist/css/bootstrap.css";
y eso es todo bootstrap agregado en tu proyecto
trabaja con cdn para bootstrap y jquery o instala bootstarp directamente en la aplicación con:
npm install ngx-bootstrap --save
también use https://ng-bootstrap.github.io/#/home , pero esto no es apropiado
https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a
| * | Instalación de Bootstrap 4 para Angular 2, 4, 5, 6 +:
| +> Instalar Bootstrap con npm
npm install bootstrap --save
npm install popper.js --save
| +> Agregar estilos y scripts a 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"
]
...
}]
npm install --save bootstrap
luego, dentro de angular-cli.json (dentro de la carpeta raíz del proyecto), encuentre
styles
y agregue el archivo bootstrap css de esta manera:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
ACTUALIZAR:
en angular 6+
angular-cli.json
se cambió
a
angular.json
.