Cómo agregar bootstrap a un proyecto angular-cli


234

Queremos usar bootstrap 4 (4.0.0-alpha.2) en nuestra aplicación generada con angular-cli 1.0.0-beta.5 (con nodo v6.1.0).

Después de obtener bootstrap y sus dependencias con npm, nuestro primer enfoque consistió en agregarlos en angular-cli-build.js:

'bootstrap/dist/**/*.min.+(js|css)',  
'jquery/dist/jquery.min.+(js|map)',  
'tether/dist/**/*.min.+(js|css)',

e importarlos en nuestro index.html

<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="vendor/tether/dist/js/tether.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

Esto funcionó bien, ng servepero tan pronto como produjimos una compilación con -prodbandera, todas estas dependencias desaparecieron dist/vendor(¡sorpresa!).

¿Cómo estamos destinados a manejar tal escenario (es decir, cargar scripts de bootstrap) en un proyecto generado con angular-cli?

Teníamos los siguientes pensamientos, pero realmente no sabemos qué camino tomar ...

  • usa un CDN? pero preferimos servir estos archivos para garantizar que estarán disponibles

  • copiar dependencias a dist/vendordespués de nuestro ng build -prod? Pero eso parece algo angular-cli debería proporcionar, ya que 'se encarga' de la parte de construcción.

  • agregando jquery, bootstrap y src/system-config.tsatado y de alguna manera los incorporamos a nuestro paquete main.ts? Pero eso parecía incorrecto teniendo en cuenta que no los vamos a usar explícitamente en el código de nuestra aplicación (a diferencia de moment.js o algo así como lodash, por ejemplo).


¿Los tiene en su archivo system-config.ts? tienes que mapearlos.
mjwrazor

1
Muchas de las respuestas a continuación recomiendan el uso de ngx-bootstrap. Descubrí que no es un reemplazo completo de los complementos jquery de Bootstrap y, a veces, aún necesita usar esos complementos jquery "nativos", como la funcionalidad de colapso en las tablas. En ese caso, busque una de las respuestas a continuación que expliquen cómo importar explícitamente el script jquery desde el archivo .angular-cli.json.
Christoph


Solo use ng-bootstrap ng-bootstrap.github.io/#/home
Liam

Respuestas:


299

ACTUALIZACIÓN IMPORTANTE: ng2-bootstrap ahora se reemplaza por ngx-bootstrap

ngx-bootstrap es compatible con Angular 3 y 4.

Actualización: 1.0.0-beta.11-webpack o versiones superiores

Antes que nada, verifique su versión angular-cli con el siguiente comando en la terminal:

ng -v

Si su versión angular-cli es mayor que 1.0.0-beta.11-webpack , entonces debe seguir estos pasos:

  1. Instale ngx-bootstrap y bootstrap :

    npm install ngx-bootstrap bootstrap --save

Esta línea instala Bootstrap 3 hoy en día, pero puede instalar Bootstrap 4 en el futuro. Tenga en cuenta que ngx-bootstrap es compatible con ambas versiones.

  1. Abra src / app / app.module.ts y agregue:

    import { AlertModule } from 'ngx-bootstrap';
    ...
    @NgModule({
    ...
    imports: [AlertModule.forRoot(), ... ],
    ... 
    })
  2. Abra angular-cli.json (para angular6 y el nombre de archivo posterior cambiado a angular.json ) e inserte una nueva entrada en la stylesmatriz:

    "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
  3. Abra src / app / app.component.html y agregue:

    <alert type="success">hello</alert>

1.0.0-beta.10 o versiones inferiores:

Y, si su versión angular-cli es 1.0.0-beta.10 o inferior, puede usar los pasos a continuación.

Primero, vaya al directorio del proyecto y escriba:

npm install ngx-bootstrap --save

Luego, abra su angular-cli-build.js y agregue esta línea:

vendorNpmFiles: [
   ...
   'ngx-bootstrap/**/*.js',
   ...
]

Ahora, abra su src / system-config.ts y luego escriba:

const map:any = {
   ...
   'ngx-bootstrap': 'vendor/ngx-bootstrap',
   ...
}

...y:

const packages: any = {
  'ngx-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ngx-bootstrap.js'
  }
};

66
¿Qué es exactamente ng2-bootstrap? ¿Qué significa agregar bootstrap nativo a angular 2? Lo siento, estoy confundido y lo he buscado, pero todavía estoy confundido. ¿por qué no puedo seguir estos mismos pasos para descargar bootstrap en lugar de usar un ng2-bootstrap de terceros?
mjwrazor

1
@mjwrazor es porque bootstrap no se trata solo de estilos. Es un marco de front-end. para ser claro, consulte el componente de calificación con ng2-bootstrap y piense en los códigos que escribiría para implementarlo.
Ali Ghanavatian

55
Solo un pequeño aviso para futuros lectores: Angular CLI ha cambiado de SystemJS a WebPack con beta.14. Esta respuesta ahora está desactualizada, ya que proporciona una solución basada en SystemJS.
jbandi

2
Gracias por la idea de usar ng2-bootstrap, aquí encontré un manual de instalación para cli angular, en la página de github. github.com/valor-software/ng2-bootstrap/blob/development/docs/… En mi caso, faltaba la llamada AlertModule.forRoot () sobre las importaciones.
bruno.bologna

1
Tuve el mismo problema con angular-cli@1.1.3& ngx-bootstrap@1.7.1. Siguiendo estos pasos con la diferencia de app.module.tsno referirse a ngx-bootstrap por 'ngx-bootstrap / ngx-bootstrap' sino por 'ngx-bootstrap' como en este ejemplo en github soluciono mi problema.
Edmond

123

Buscando la palabra clave> Instalación de la Biblioteca Global en https://github.com/angular/angular-cli ayuda a encontrar la respuesta.

Según su documento, puede seguir los siguientes pasos para agregar la biblioteca Bootstrap.

Primero instale Bootstrap desde npm:

npm install bootstrap@next

Luego agregue los archivos de script necesarios a las aplicaciones [0] .scripts en el archivo angular-cli.json:

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

Finalmente agregue el CSS Bootstrap a la matriz de aplicaciones [0] .styles:

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

Reinicie ng serve si lo está ejecutando, y Bootstrap 4 debería estar funcionando en su aplicación.

Esta es la mejor solución. Pero si no reinicia ng serve, nunca funciona. Se recomienda encarecidamente hacer esta última acción.


2
Mientras escribo, esta es la única solución que parece usar la última versión de angular-cli.
freethebees el

1
¡El bootstrap.js seguramente NO es necesario! Como no desea utilizar el bootstrap.js de juqery, debe instalar las directivas ng2 de bootstrap.
Pascal

2
Si quisiera usar el bootstrap javascript en lugar de solo el .css, también necesitaría incluir sus dependencias en la matriz de scripts: "../node_modules/jquery/dist/jquery.slim.js", "../ node_modules / tether / dist / js / tether.js "," ../node/modules/bootstrap/dist/js/bootstrap.js "
Howard Swope

2
Es mejor que use bootstrap.bundle.js en su declaración de scripts que también tiene popper.js.
Dejazmach

1
Para hacer el trabajo no te pierdas el último punto, ejecuta ng servenuevamente. Además, ¿por qué Angular CLI no puede agregar esto automáticamente? Sería bueno si tenemos una opción para ello.
shaijut

58

Haz lo siguiente:

npm i bootstrap@next --save

Esto agregará bootstrap 4 a su proyecto.

A continuación, vaya a su archivo src/style.scsso src/style.css(elija el que esté usando) e importe el bootstrap allí:

Para style.css

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Para style.scss

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

Para las secuencias de comandos, aún tendrá que agregar el archivo en el archivo angular-cli.json de la siguiente manera ( en la versión angular 6, esta edición debe realizarse en el archivo angular.json ) :

"scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
],

55
En mi humilde opinión, esta también es una gran opción, especialmente con las últimas versiones de angular-cli. La gran ventaja es que este método no depende de que las personas actualicen la biblioteca desde el paquete npm mencionado en la respuesta aceptada; Además, esto también nos permite anular posiblemente las variables de arranque utilizando SASS sin apuntar directamente a los archivos CSS compilados.
Martin

2
Sí, es más limpio y más modular, ¡así que lo prefiero!
mahatmanich

Este documento funciona para mí, cualquier requisito previo a seguir, estoy usando la última versión de angular y bootstrap y agregué todos los cambios anteriores, no funcionó de esta manera, pero funcionó al agregar <link rel = "stylesheet" type = "text / css" href = "vendor / bootstrap / dist / css / bootstrap.min.css"> en index.html
har_shit

¡Esto está usando la configuración de cli!
mahatmanich

77
un método más limpio sería @import '~ bootstrap / dist / css / bootstrap'; Usando el signo ~ para importar como un módulo directamente desde la carpeta node_modules. Encontré una explicación aquí: stackoverflow.com/questions/39535760/…
AI

32

Al principio, debes instalar tether, jquery y bootstrap con estos comandos

npm i -S tether
npm i -S jquery
npm i -S bootstrap@4.0.0-alpha.4 

Después de agregar estas líneas en su archivo angular-cli.json (angular.json desde la versión 6 en adelante)

  "styles": [
    "styles.scss",
    "../node_modules/bootstrap/scss/bootstrap-flex.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

2
¿quiso decir $ projectRoot / .angular-cli.json?

21

Como nadie se refirió a la historia oficial (equipo angular-cli) sobre cómo incluir Bootstrap todavía: https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

Incluir Bootstrap

Oreja es un marco CSS popular que se puede usar dentro de un proyecto angular. Esta guía lo guiará a través de la adición de bootstrap a su proyecto CLI angular y su configuración para usar bootstrap.

Usando CSS

Empezando

Crear un nuevo proyecto y navegar dentro del proyecto.

ng new my-app
cd my-app

Instalar Bootstrap

Con el nuevo proyecto creado y listo, deberá instalar Bootstrap en su proyecto como una dependencia. Usando la --saveopción, la dependencia se guardará en package.json

# version 3.x
npm install bootstrap --save

# version 4.x
npm install bootstrap@next --save

Configurando Proyecto

Ahora que el proyecto está configurado, debe configurarse para incluir el CSS de arranque.

  • Abra el archivo .angular-cli.jsondesde la raíz de su proyecto.
  • Debajo de la propiedad, appsel primer elemento de esa matriz es la aplicación predeterminada.
  • Hay una propiedad stylesque permite aplicar estilos globales externos a su aplicación.
  • Especifique la ruta a bootstrap.min.css

Debería tener el siguiente aspecto cuando haya terminado:

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

Nota: Cuando realice cambios .angular-cli.json, deberá reiniciar ng servepara recoger los cambios de configuración.

Proyecto de prueba

Abra app.component.htmly agregue el siguiente marcado:

<button class="btn btn-primary">Test Button</button>

Con la aplicación configurada, ejecute ng servepara ejecutar su aplicación en modo de desarrollo. En su navegador navegue a la aplicaciónlocalhost:4200 . Verifique que aparezca el botón de estilo bootstrap.

Usando SASS

Empezando

Crear un nuevo proyecto y navegar dentro del proyecto.

ng new my-app --style=scss
cd my-app

Instalar Bootstrap

# version 3.x
npm install bootstrap-sass --save

# version 4.x
npm install bootstrap@next --save

Configurando Proyecto

Crea un archivo vacío _variables.scssen src/.

Si está utilizando bootstrap-sass, agregue lo siguiente a _variables.scss:

$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';

En styles.scssagregar lo siguiente:

// version 3
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

// version 4
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

Proyecto de prueba

Abra app.component.htmly agregue el siguiente marcado:

<button class="btn btn-primary">Test Button</button>

Con la aplicación configurada, ejecute ng servepara ejecutar su aplicación en modo de desarrollo. En su navegador navegue a la aplicación localhost:4200. Verifique que aparezca el botón de estilo bootstrap. Para asegurarse de que sus variables se usan, abra _variables.scssy agregue lo siguiente:

$brand-primary: red;

Regrese el navegador para ver el color de fuente cambiado.


44
Esta solución no agrega los archivos javascript para bootstrap, solo el CSS
Robin van der Knaap

Vea esta otra historia: github.com/angular/angular-cli/wiki/stories-global-lib . Describe agregar archivos de script, tomando bootstrap 4 como ejemplo.
Robin van der Knaap

$brand-primary: red;no funciono para mi Sin embargo, lo $primary: red;hizo!
Johan Frick el

Gracias por explicar la diferencia entre bootstrap y boostrap @ next :-)
Venkatesh Muniyandi

17

Actualización v1.0.0-beta.26

Puedes ver en el documento la nueva forma de importar bootstrap aquí

Si aún no funciona, reinicie con el comando ng serve

1.0.0 o versiones inferiores:

En su archivo index.html solo necesita el enlace bootstrap css (no necesita scripts js)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

Y

npm install ng2-bootstrap --save
npm install moment --save

Después de haber instalado ng2-bootstrap en my_project / src / system-config.ts:

/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment/moment.js',
  'ng2-bootstrap': 'vendor/ng2-bootstrap'
};

/** User packages configuration. */
const packages: any = {
  'ng2-bootstrap': {
    defaultExtension: 'js'
  },
  'moment':{
     format: 'cjs'
  }
};

Y en my_project / angular-cli-build.js:

module.exports = function (defaults) {
return new Angular2App(defaults, {
    vendorNpmFiles: [
        'ng2-bootstrap/**/*',
        'moment/moment.js'
    ]
});
};

No olvide este comando para poner su módulo en el proveedor:

ng build

importar desde otro módulo que es el mismo principio.


1
¿Cómo hace esto que Bootstrap pueda usar jquery? He hecho esto y esto no funciona.
mjwrazor

ejemplo finalmente encontró esto y funcionó. No pude resolver esto por un tiempo.
mjwrazor

8

Supongo que los métodos anteriores han cambiado después del lanzamiento, mira este enlace

https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md

iniciar proyecto

npm i -g angular-cli
ng new my-app
cd my-app
ng serve
npm install --save @ng-bootstrap/ng-bootstrap

instalar ng-bootstrap y bootstrap

npm install ng2-bootstrap bootstrap --save

abra src / app / app.module.ts y agregue

import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
...

@NgModule({
   ...
   imports: [AlertModule, ... ],
    ... 
})

abra angular-cli.json e inserte una nueva entrada en la matriz de estilos

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

abra src / app / app.component.html y pruebe todos los trabajos agregando

<alert type="success">hello</alert>

1
El método de Ahmed Hamdy funciona, aparentemente se produjo una actualización del código ahora. Actualizó su mensaje con solución.
PeterH

1
si desea utilizar Bootstrap 4, debe cambiar "npm install ng2-bootstrap bootstrap --save" TO BE "npm install ng2-bootstrap bootstrap@4.0.0-alpha.6 --save" .... no del todo obvio en la documentación (haga una búsqueda de 'card-' en bootstrap.css para saber si ha funcionado) ... tenga en cuenta que actualmente es Alpha 6, esto cambiará sin duda ... consulte el sitio de bootstrap para obtener instrucciones actuales de npm
72GM

8

Pasos para Bootstrap 4 en Angular 5

  1. Crear proyecto Angular 5

    ng new AngularBootstrapTest

  2. Mover al directorio del proyecto

    cd AngularBootstrapTest

  3. Descargar bootstrap

    npm install bootstrap

  4. Agregar Bootstrap al proyecto

    4.1 abrir .angular-cli.json

    4.2 encontrar la sección "estilos" en el json

    4.3 agregue la ruta css bootstrap como se muestra a continuación

    .

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

Ahora ha agregado con éxito el bootstrap css en el proyecto angular 5

Prueba de arranque

  1. abierto src/app/app.component.html
  2. agregar componente de botón de arranque

.

<button type="button" class="btn btn-primary">Primary</button>

Puede consultar los estilos de los botones aquí ( https://getbootstrap.com/docs/4.0/components/buttons/ )

  1. guarda el archivo

  2. ejecutar el proyecto

    ng servir --abrir

Ahora verá el botón de estilo de arranque en la página

Nota: si agregó la ruta de arranque después de ng serve , debe detener y volver a ejecutar el ng serve para reflejar los cambios


6

Dado que esto se volvió tan confuso y las respuestas aquí son totalmente mixtas, solo sugeriré ir con el equipo ui oficial para el repositorio BS4 (sí, hay muchos de esos repositorios para NG-Bootstrap.

Simplemente siga las instrucciones aquí https://github.com/ng-bootstrap/ng-bootstrap para obtener BS4.

Citando de la biblioteca:

Esta biblioteca está siendo construida desde cero por el equipo ui-bootstrap. Estamos utilizando TypeScript y apuntamos al marco CSS Bootstrap 4.

Al igual que con Bootstrap 4, esta biblioteca es un trabajo en progreso. Consulte nuestra lista de problemas para ver todas las cosas que estamos implementando. Siéntase libre de hacer comentarios allí.

Simplemente copie y pegue lo que está allí por el bien de esto:

npm install --save @ng-bootstrap/ng-bootstrap

Una vez instalado, debe importar nuestro módulo principal:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

La única parte restante es listar el módulo importado en su módulo de aplicación. El método exacto será ligeramente diferente para el módulo raíz (nivel superior) para el que debe terminar con el código similar a (observe NgbModule.forRoot ()):

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Otros módulos en su aplicación simplemente pueden importar NgbModule:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...], 
})
export class OtherModule {
}

Este parece ser el comportamiento más consistente por mucho


6
  1. Instalar bootstrap

    npm install bootstrap@next
  2. Agregue código a .angular-cli.json:

    "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"
    ],
  3. Último agregue bootstrap.css a su código style.scss

    @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
  4. Reinicia tu servidor local


Si bien ngx-bootstrap es bueno para los componentes que admite, a veces aún necesita usar complementos jquery "nativos", como la funcionalidad de colapso en las tablas. Entonces aún necesita importar explícitamente el script jquery, que muestra esta respuesta.
Christoph

Votó a favor del punto 4 (reinicie su servidor local) Estoy usando ---> npm install ngx-bootstrap bootstrap --save
Palanikumar

5

Haz los siguientes pasos:

  1. npm install --save bootstrap

  2. Y en su .angular-cli.json, agregue a la sección de estilos:

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

Después de eso, debe reiniciar su ng serve

Disfrutar


4
  1. Instalar Bootstrap usando npm

    npm install bootstrap

2.Instale Popper.js

npm install --save popper.js

3.Vaya a angular.json en Angular 6 project / .angular-cli.json en Angular 5 y agregue lo siguiente:

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

        "scripts": [
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]



2
  1. Correr en bash npm install ng2-bootstrap bootstrap --save
  2. Agregar / Cambiar lo siguiente en angular-cli.json
    "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],

2

Abra el Terminal / símbolo del sistema en el directorio del proyecto respectivo y escriba el siguiente comando.

npm install --save bootstrap

Luego abra el archivo .angular-cli.json, busque

"styles": [ "styles.css" ],

cambia eso a

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

Todo listo.


2

Ahora con la nueva versión ng-bootstrap 1.0.0-beta.5 es compatible con la mayoría de las directivas angulares nativas basadas en el marcado de Bootstrap y CSS.

La única dependencia requerida para trabajar con esto es bootstrap. No es necesario usar las dependencias jquery y popper.js .

ng-bootstrap es reemplazar completamente la implementación de JavaScript para los componentes. Entonces no necesitas incluirbootstrap.min.js en la sección de scripts en su .angular-cli.json.

siga estos pasos cuando esté integrando bootstrap con el proyecto generado con la última versión de angular-cli.

  • Introdúcete bootstrap.min.cssen tu .angular-cli.json, sección de estilos.

    "styles": [
       "styles.scss",
       "../node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
  • Instale la dependencia ng-bootstrap .

    npm install --save @ng-bootstrap/ng-bootstrap
  • Agregue esto a su clase de módulo principal.

    import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
  • Incluya lo siguiente en la sección de importaciones de su módulo principal.

    @NgModule({
       imports: [NgbModule.forRoot(), ...],
    })
  • Haga lo siguiente también en su (s) submódulo (s) si va a usar componentes ng-bootstrap dentro de esas clases de módulos.

    import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
    
    @NgModule({
       imports: [NgbModule, ...],
    })
  • Ahora su proyecto está listo para usar los componentes ng-bootstrap disponibles.


2
  1. Instalar bootstrap, popper.js

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

  1. En src / styles.css , importe el estilo de bootstrap

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


2

Paso 1:
npm install bootstrap@latest --save-dev Esto instalará la última versión del bootstrap, sin embargo, la versión especificada se puede instalar agregando el número de versión

Paso 2: Abra styles.css y agregue lo siguiente @import "~bootstrap/dist/css/bootstrap.css"


Principalmente la mejor respuesta actual, excepto eliminar --save-dev. Como desea que se inicie bootstrap con su aplicación.
Sydwell

2

Para agregar Bootstrap y Jquery tanto

npm install bootstrap@3 jquery --save

después de ejecutar este comando, continúe y verifique su carpeta node_modules para poder ver bootstrap y jquery agregados.


Genial agregar Jquery también.
Surya R Praveen

1

angular-cliahora tiene una página wiki dedicada donde puedes encontrar todo lo que necesitas. TLDR, instale a bootstraptravés de npmy agregue el enlace de estilos a la sección "estilos" en su .angular-cli.jsonarchivo


1

Ejemplo de trabajo en caso de utilizar angular-cli y css:

1.instalar bootstrap

npm install bootstrap tether jquery --save

2.añadido a .angular-cli.json

  "styles": [
    "../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"
  ],

1

instalar boostrap usando npm

npm install boostrap@next --save

luego revise su carpeta node_modules para el archivo boostrap.css (dentro de dist) normalmente la ruta es

"../node_modules/bootstrap/dist/css/bootstrap.css",

agrega esta ruta | importar boostrap dentro de style.css o style.scss

@import "../node_modules/bootstrap/dist/css/bootstrap.css";  //bootstrap
@import "~@angular/material/prebuilt-themes/indigo-pink.css // angular material theme

Eso es.


¿Qué hay de ponerlo en una variedad de estilos angular-cli.json? ¿No necesariamente?
CodyBugstein

No, no es necesario. ya que incluimos nuestro archivo style.css en esa matriz. podemos importar otros archivos css en nuestro style.css o style.scss "@import" ~@angular/material/prebuilt-themes/indigo-pink.css ";" @import "../node_modules/bootstrap/dist/css /bootstrap.css ";
Chanaka Fernando el

Ah ok ... pero creo que incluirlo angular-cli.jsones probablemente mejor
CodyBugstein

@CodyBugstein No estoy seguro de si es necesariamente "mejor" agregarlo a .angular-cli.json. Aquí hay algunas razones por las que es posible que desee agregar importaciones en su archivo styles.scss: 1) Puede aplicar fácilmente un tema de bootstrap como el ejemplo de Bootswatch aquí: github.com/thomaspark/bootswatch 2) Editar archivos .json es más engorroso que editar archivos .scss porque los archivos .json no permiten comentarios, y 3) los nuevos desarrolladores pueden ver styles.scss como un punto de partida para todos los CSS en lugar de .angular-cli.json.
Keith

1

Ejecute este siguiente comando dentro del proyecto

npm install --save @bootsrap@4

y si recibes una confirmación como esta

+ bootstrap@4.1.3
updated 1 package in 8.245s

Significa que boostrap 4 se instaló con éxito. Sin embargo, para usarlo, debe actualizar la matriz de "estilos" en el archivo angular.json.

Actualícelo de la siguiente manera para que bootstrap pueda anular los estilos existentes

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

Para asegurarse de que todo esté configurado correctamente, ejecute ng serve > open browser at http://localhost:4200/ or a port you run the angular app > right click > inspect > under the head check the styles if you have bootsrap like shown below, entonces es bueno usar boostrap. ingrese la descripción de la imagen aquí


1

No vi este aquí:

@import 'bootstrap/scss/bootstrap.scss';

Acabo de agregar esta línea en style.scss. En mi caso, también quería anular las variables de bootstrap.


1

Si acaba de comenzar con angular y bootstrap, la respuesta simple sería los siguientes pasos: 1. Agregue el paquete de nodo de bootstrap como dependencia de desarrollo

npm install --save bootstrap
  1. importa la hoja de estilo bootstrap en el archivo angular.json.

    "styles": [ "projects/my-app/src/styles.scss", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ],

  2. y está listo para usar bootstrap para estilizar, cuadrícula, etc.

    <div class="container">My first bootstrap div</div>

La mejor parte de esto que encontré fue que estamos dirigiendo el uso de bootstrap sin ninguna dependencia de módulos de terceros. Podemos actualizar bootstrap en cualquier momento simplemente actualizando el comando, npm install --save bootstrap@4.4etc.


1

Tiene muchas formas de agregar Bootstrap 4 en su proyecto Angular :

  • Incluyendo los archivos Bootstrap CSS y JavaScript en la sección del archivo index.html de su proyecto Angular con una y etiquetas,

  • Importar el archivo CSS Bootstrap en el archivo global styles.css de su proyecto Angular con una palabra clave @import.

  • Agregar los archivos Bootstrap CSS y JavaScript en los estilos y las secuencias de comandos del archivo angular.json de su proyecto


1

Ejecute este comando

npm install bootstrap@3

tu Angular.json

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


0

Un ejemplo de trabajo en caso de usar angular-cli:

npm i bootstrap-schematics
ng generate bootstrap-shell -c bootstrap-schematics -v 4
npm install

Funciona para css y scss. Bootstrap v3 y v4 están disponibles.

Más información acerca de arranque-esquemas favor encuentre aquí .

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.