Angular 4: ¿Cómo incluir Bootstrap?


113

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í?



Respuestas:


179
npm install --save bootstrap

luego, dentro de angular-cli.json (dentro de la carpeta raíz del proyecto), busque stylesy agregue el archivo bootstrap css como este:

"styles": [
   "../node_modules/bootstrap/dist/css/bootstrap.min.css",
   "styles.css"
],

ACTUALIZACIÓN:
en angular 6+ angular-cli.json se cambió a angular.json.


2
Eso también funciona, pero supongo que stackoverflow.com/questions/37649164/… es con el que tendría que ir. ¡Gracias por su respuesta!
Joschi

4
¿Cómo agregar bootstarp js y jquery js?
Ravi Ji

6
Para poner el js debes ir a angular-cli.json y poner "scripts": ["../node_modules/bootstrap/dist/js/bootstrap.min.js"], y tienes el js
D4IVT3

2
¿Podrías explicarme por qué ../node_modules [...]? Para mí debería ser justo /node_modules [...].
Vinicius Brasil

2
@vnbrs esta es una ruta relativa a index.html. Si crea una aplicación usando angular cli, su index.html se encuentra en ./srcrelación con la raíz de la aplicación. Si su configuración es diferente, puede ajustar la ruta según corresponda.
Egor Stambakio

100

Ver video o seguir 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 un enlace CDN en el archivo index.html
2) Instale bootstrap usando npm y establezca la ruta en angular.json Recomendado
3) Instale bootstrap usando npm y establezca la ruta en el archivo index.html

Le recomendé seguir 2 métodos que se instalan bootstrap usando npm porque está instalado en el directorio de su proyecto y puede acceder fácilmente a él

Método 1

Agregue Bootstrap, Jquery y popper.js CDN path 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) Instale bootstrap usando npm

npm install bootstrap --save

después de la instalación de Bootstrap 4, necesitamos dos paquetes más de javascript que son Jquery y Popper.js sin estos dos paquetes bootstrap no está completo porque Bootstrap 4 usa el paquete Jquery y popper.js, así que tenemos que instalarlo también

2) Instale JQUERY

npm install jquery --save

3) Instale Popper.js

npm install popper.js --save

Ahora Bootstrap está instalado 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 los archivos bootstrap, jquery y popper.js dentro de los estilos [] y scripts [] ruta vea 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, simplemente 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


8
Angular6: el archivo .angular-cli.json ahora se llama angular.json. Y la ruta ya no es "../ node_modules ...", sino: "node_modules / ..." Saludos
Karthik Prabuddha

Me olvidé por completo de agregar los scripts en angular.json y me preguntaba por qué los componentes de jquery no estaban haciendo sus cosas. ¡Gracias por recordarme!
AdminAffe

1
¿Qué hace la adición de bootstrap a los scripts en angular.json? ¿Aún tienes que incluirlo a través de "<link rel ..." en todos los lugares donde quieras usarlo?
Jens Mander

Gracias, es increíble la cantidad de fuentes que carecen de esta información, especialmente la parte sobre popper
Avi E. Koenig

42

Para configurar / integrar / usar Bootstrap en angular, primero necesitamos instalar el paquete Bootstrap usando npm.

Paquete de instalación

$ npm install bootstrap@4.0.0-alpha.6 --save   // for specific version
or
$ npm install bootstrap --save   // for latest version

Nota: el comando --save guardará la dependencia en nuestra aplicación angular dentro del archivo package.json.

Ahora que tenemos el paquete instalado con el paso anterior, ahora podemos decirle a Angular CLI que necesita cargar estos estilos usando cualquiera de las siguientes opciones o ambas:

opción 1) Agregar en el 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 se encuentra 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"
]

Quería publicar una respuesta como esta, pero como ya está aquí, la votaré a favor. Bien hecho señor. Solo agregaría que en la última versión de angular 7 no hay angular-cli.json sino angular.json.
Игор Рајачић

En la opción 2, la ruta css que me funcionó fue "./node_modules/bootstrap/dist/css/bootstrap.min.css",
Murtuza

@ ИгорРајачић ¿a qué nivel debo agregarlo en el archivo json? ¿Puede dar un enlace de ejemplo?
Kuldeep Yadav

1
@KuldeepYadav archivo angular-cli.json o angular.json que se encuentra en la carpeta raíz de nuestra aplicación angular
Vishal Biradar

12

Angular 4 - Configuración de 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 ventajas adicionales (selector de fecha, clasificación, selector de tiempo, escritura anticipada).


9

En Angular4, mientras trata con el sistema @types , debe hacer las siguientes cosas,

Hacer,

1) npm install --save @types/jquery
2) npm install --save @types/bootstrap

tsconfig.json

busque la matriz de tipos y agregue las 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.


Después de tomar la compilación en producción, los enlaces arrojan un error en la consola del navegador
Vignesh

@Vignesh necesita ver el problema. es difícil decir algo.
micronyks

Probablemente se deba a que los archivos de la carpeta node_modules no se entregan automáticamente a los clientes. En su lugar, agregue los estilos y scripts al .angular-cli.jsonarchivo, lo que le indica a Angular que los agrupe con el resto y se los sirva a los clientes.
Noxxys

6

Si está utilizando Sass / Scss, siga esto,

Hacer npm install

npm install bootstrap --save

y agregue una importdeclaración a su archivo sass / scss,

@import '~bootstrap/dist/css/bootstrap.css'

6

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!


5

Probado en Angular 7.0.0

Paso 1: instale las dependencias necesarias

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 instalar 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"
            ]
          },

3

Para bootstrap 4.0.0-alph.6

npm install bootstrap@4.0.0-alpha.6 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 irte.



1

Ejecute el siguiente comando en su proyecto, es decir, npm install bootstrap@4.0.0-alpha.5 --save

Después de instalar la dependencia anterior, ejecute el siguiente comando npm que instalará el módulo de arranque npm install --save @ ng-bootstrap / ng-bootstrap

Mira esto para 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";


1

Paso 1: npm install bootstrap --save

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

Paso 3: servir

ingrese la descripción de la imagen aquí


2
Después de agregar bootstrap en el proyecto, reinicie su servidor
Gangani Roshan

0

agregar en angular-cli.json

   "styles": [
         "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [ 
         "../node_modules/bootstrap/dist/js/bootstrap.js"
      ],

Funcionará, lo comprobé.


0

Si desea utilizar bootstrap en línea y su aplicación tiene acceso a Internet, puede agregar

@import url('https://unpkg.com/bootstrap@3.3.7/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 Unkg y necesita tener acceso a Internet.


0

CLI de Angular 6, solo haz lo siguiente:

ng agregar @ ng-bootstrap / schematics 



0

primero instale bootstrap en su proyecto usando npm npm i bootstrap después de que abra el archivo ur style.css en su proyecto y agregue esta línea

@import "~bootstrap/dist/css/bootstrap.css";

y eso es todo bootstrap agregado en su proyecto


0

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

0

Si está en Angular 6+, agregue lo siguiente a angular.json :

"styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
          ],

0

Añadiendo la versión actual 4 de bootsrap a angular:

1 / Primero tienes que instalar estos:

npm install jquery --save
npm install popper.js --save
npm install bootstrap --save

2 / Luego agregue los archivos de script necesarios a los scripts en angular.json:

"scripts": [
  "node_modules/jquery/dist/jquery.slim.js",
  "node_modules/popper.js/dist/umd/popper.js",
  "node_modules/bootstrap/dist/js/bootstrap.js"
],
enter code here

3 / Finalmente agregue Bootstrap CSS a la matriz de estilos en angular.json:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.css",
  "src/styles.css"
],`

revisa este enlace


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.