ngbtooltip ngbmodule ngbdatepicker modal cli bootstrap twitter-bootstrap angular

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).

Angular 6 CLI, solo haz:

ng add @ ng-bootstrap / schematics

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é.

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

| * | 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" ] ... }]

Paso 1: npm install bootstrap --save

Paso: 2: pegue el siguiente código en angular.json node_modules / bootstrap / dist / css / bootstrap.min.css

Paso 3: ng servir

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 .