Angular 4: ¿Cómo incluir Bootstrap?

npm install --save bootstrap

Después, dentro de angular-cli.json (dentro de la carpeta raíz del proyecto), busque styles y agregue el archivo css de bootstrap de la siguiente manera:

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

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

Ver vídeo o Seguir el paso

Instalar bootstrap 4 en angular 2 / angular 4 / angular 5 / angular 6

Hay tres formas de incluir bootstrap en tu proyecto
1) Añadir enlace CDN en el índice.archivo html
2) Instale bootstrap usando npm y establezca la ruta en .angular-cli.json Recomendado
3) Instale bootstrap usando npm y establezca la ruta en index.archivo html

Te recomendé seguir 2 métodos que están instalados bootstrap usando npm porque está instalado en el directorio de tu proyecto y puedes acceder fácilmente a él

Método 1

Añadir Bootstrap, Jquery y popper.ruta js CDN al índice de proyecto angular.archivo html

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 son Jquery y Popper.js sin estos dos paquetes bootstrap no está completo porque Bootstrap 4 está usando Jquery y popper.js paquete así que tenemos que instalar también

2) Instalar JQUERY

npm install jquery --save

3) Instalar Popper.js

npm install popper.js --save

Ahora Bootstrap se Instala en el directorio del proyecto dentro de node_modules Carpeta

Abrir .angular-cli.json este archivo está disponible en su directorio angular abra ese archivo y agregue la ruta de bootstrap, jquery y popper.archivos js dentro de estilos [] y scripts [] ruta ver a continuación 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

Install bootstrap using npm follow Method 2 en el método 3 simplemente establecemos path inside index.archivo html en lugar de .angular-cli.json file

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

Agregar y configurar las dependencias de Bootstrap y FontAwesome Cuando tenemos nuestra aplicación creada ejecutamos el siguiente comando para instalar nuestro dependencias usando npm.

$ npm install --save [email protected] font-awesome

Ahora que tenemos las dependencias en su lugar, podemos decir Angular CLI que necesita cargar estos estilos abriendo el archivo
src / styles.css
y añadiendo las siguientes dos declaraciones.

@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~font-awesome/css/font-awesome.css";

Para más detalles visitar https://medium.com/@beeman/tutorial-add-bootstrap-to-angular-cli-apps-b0a652f2eb2

Angular 4-Bootstrap / @ng-bootstrap setup

Primero instale bootstrap en su proyecto usando el siguiente comando:

npm install --save bootstrap

Luego agrega esta línea "../node_modules/bootstrap/dist/css/bootstrap.min.css" a angular-cli.archivo 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 todo el Bootstrap widgets (ex. carrusel, modal, popovers, tooltips, pestañas, etc.) y varias golosinas adicionales ( datepicker, rating, timepicker, typeahead).

En Angular4 al tratar con el sistema @types, debe hacer las siguientes cosas,

Do,

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

Tsconfig.json

Busque tipos de de la matriz y agrega jquery y bootstrap entradas,

"types": [
      "jquery",
      "bootstrap",  
      "node"
]

Índice.html

En la sección head añadir 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 empezar a usar jquery y bootstrap ambos.

Por favor, 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.

Para 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 la explicación adecuada.

Pasos: Instalando 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 beta):

npm install bootstrap@next --save

O Alternativa: CSS de arranque local Como alternativa, también puede descargar el CSS Bootstrap y agregarlo localmente a su proyecto. Me donwloaded Bootstrap desde el sitio web y creado una carpeta de estilos (mismo nivel que los estilos.css):

Nota: No coloque sus archivos CSS locales en la carpeta assets. Cuando hacemos la compilación de producción con Angular CLI, los archivos CSS declarados en el .angular-cli.json será minificado y todos los estilos serán agrupados en un solo estilo.css. La carpeta assets se copia en la carpeta dist durante el proceso de compilación (el código CSS se duplicará). Solo coloque sus archivos CSS locales en assets en caso de que los esté importando directamente en el índice.HTML.

Importando el CSS 1.Tenemos dos opciones para importar el CSS desde Bootstrap que se instaló desde NPM:

Texto fuerte1: 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 desde que se ha declarado en .angular-cli.json ya.

3.1 Alternativa: Local Bootstrap CSS Si agregaste el archivo CSS Bootstrap localmente, simplemente impórtalo .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 de JavaScript Bootstrap con ngx-bootstrap (Opción 1) En caso de que no necesite usar componentes de JavaScript Bootstrap (que requieren jQuery), esta es toda la configuración que necesita. Pero si necesita usar modales, acordeón, datepicker, tooltips o cualquier otro componente, ¿cómo podemos usar estos componentes sin instalar jQuery?

Existe una librería Angular wrapper para Bootstrap llamada ngx-bootstrap que también podemos instalar desde NPM:

npm install ngx-bootstrap --save

Notang2-bootstrap y ngx-bootstrap son lo mismo paquete. ng2-bootstrap fue renombrado a ngx-bootstrap después de # itsJustAngular.

En caso de que desee instalar Bootstrap y ngx-bootstrap al mismo tiempo cuando cree su proyecto de CLI Angular:

npm install bootstrap ngx-bootstrap --save

4.1: Agregar los módulos de Bootstrap necesarios en la aplicación.módulo.ts

Vaya a través del ngx-bootstrap y agregue los módulos necesarios en su aplicación.módulo.ts. Por ejemplo, supongamos que queremos usar los componentes Desplegable, Tooltip 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 {}

Porque llama 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 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 desordenar su aplicación.módulo), puede crear un módulo app-bootstrap.módulo.ts, importar los módulos Bootstrap (usando forRoot ()) y también declararlos en la sección de exportaciones (para que estén disponibles para otros módulos también).

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 fin, no olvides importar tu módulo bootstrap en tu aplicación.módulo.ts.

Importa { AppBootstrapModule } desde './ app-bootstrap / app-bootstrap.módulo";

@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 para mantener).

Espero que esto ayude a alguien!

Si está utilizando Sass/Scss, entonces siga esto,

Instalar npm

npm install bootstrap --save

Y agregue import declaración a su archivo sass/scss,

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

For bootstrap 4.0.0-alph.6

npm install [email protected] jquery tether --save

Luego, después de esto, ejecute:

npm install

Ahora. Abrir .angular-cli.json archivo e importación de 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.

Ejecute el siguiente comando en su proyecto, es decir instalación de npm [email protected] save guardar

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

Mira esto para la referencia - https://github.com/ng-bootstrap/ng-bootstrap

Agregue la siguiente importación a la aplicación.module import {NgbModule} from '@ng-bootstrap/ ng-bootstrap'; and add NgbModule a las importaciones

En tu orzuelo.css @importar "../node_modules/bootstrap/dist/css / bootstrap.min.css";

Añadir a 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 comprobé.

Como puedo ver, ya tienes muchas respuestas, pero puedes probar este método .

Su mejor práctica para 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 el componente bootstrap js que depende de jquery.

npm install ngx-bootstrap bootstrap --save

Mantenga su código jquery libre en angular

Si desea utilizar 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 tu estilo principal.archivo 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.

Angular 6 CLI, solo haz:

Ng add @ ng-bootstrap / schematics

Para instalar el último uso use npm i save save bootstrap@next

Primero instale bootstrap en su proyecto usando npm npm i bootstrap después de ese estilo abierto ur.archivo css en su proyecto y añadir esta línea

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

Y eso es todo bootstrap añadido en su 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 appropiate

Https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a