Bootstrap es el marco HTML y CSS más popular para crear diseños receptivos con facilidad y sin tener un conocimiento profundo de CSS (pero se requiere CSS personalizado para personalizar su diseño y hacer que sea diferente de los otros sitios web con estilo Bootstrap a menos que esté usando un BS tema desarrollado específicamente para ti).
Bootstrap 4 es la última versión de BS que trae muchas características nuevas y potentes al marco más importante, Flexbox, que ahora es el sistema de visualización predeterminado para el diseño de cuadrícula BS (una de las características más importantes de BS).
En este tutorial veremos cómo usar Bootstrap para diseñar sitios web creados con el marco Angular 5. Veremos cómo podemos integrarlos fácilmente, usando los paquetes ng-bootstrap vs. ngx-bootstrap y usando la CLI angular para generar un nuevo proyecto.
Entonces, comencemos instalando la CLI angular en caso de que aún no esté instalada en su sistema.
Diríjase a su terminal o símbolo del sistema y luego ejecute el siguiente comando para instalar la última versión de la CLI
$ npm install -g @ angular / [correo electrónico protegido]
Esto instalará la CLI a nivel mundial, por lo que, según la configuración de npm , es posible que deba agregar sudo (para acceso de administrador).
Después de la instalación, tendrá a su disposición la utilidad ng . Usémoslo para generar un nuevo proyecto Angular 5.
$ ng nuevo ng5bootstrap4
Esto generará la estructura de directorios y los archivos necesarios para el proyecto e instalará las dependencias.
Luego navegue dentro de la carpeta raíz del proyecto recién creado
cd ng5bootstrap4
Luego puede servir su aplicación Angular 5 usando el comando ng serve :
ng servir
Su aplicación se servirá desde http :// localhost : 4200 /
Ahora regrese a su terminal e instale Bootstrap 4 a través de npm
$ npm install –save bootstrap
Esto también agregará el bootstrap a package.json .
Los activos de Bootstrap 4 se instalan dentro de la carpeta node_modules/bootstrap por lo que deberá incluir los archivos CSS en la cabecera del archivo HTML principal de la aplicación o también con una @import en style.css
@import “~ bootstrap / dist / css / bootstrap.css”
Tenga en cuenta que Bootstrap 4 depende de las bibliotecas jQuery y Popper.js y dado que no las incluimos, ningún componente de Bootstrap que dependa de JavaScript no funcionará. Entonces, ¿por qué no incluir esas librerías? Para Angular es mejor evitar el uso de bibliotecas que realicen la manipulación directa del DOM (como jQuery) y dejar que Angular se encargue de eso.
¿Y si necesita las características completas de Bootstrap 4?
Tiene diferentes formas de incluir jQuery, Popper.js y bootstrap.js , lo que no es recomendable, utilizando la matriz de scripts en el archivo .angular-cli.json
“guiones”: [
“../node_modules/jquery/dist/jquery.js”,
“../node_modules/tether/dist/js/popper.js”,
“../node_modules/bootstrap/dist/js/bootstrap.js”
],
Otra forma alternativa mejor es usar bibliotecas de componentes creadas para hacer que Bootstrap funcione a la perfección con Angular como ng-bootstrap o ngx-bootstrap
Entonces, primero necesitará instalar la biblioteca desde npm usando el siguiente comando:
npm install –save @ ng-bootstrap / ng-bootstrap
Una vez que finalice la instalación, deberá importar el módulo principal.
importar {NgbModule} desde ‘@ ng-bootstrap / ng-bootstrap’;
A continuación, deberá agregar el módulo que importó en el módulo raíz de su aplicación
importar {NgbModule} desde ‘@ ng-bootstrap / ng-bootstrap’;
@NgModule ({
declaraciones: [/ * … * /],
importaciones: [/ *… * /, NgbModule.forRoot ()],
/ * … * /
})
clase de exportación AppModule {
}
Tenga en cuenta que ng-bootstrap requiere que esté presente el archivo CSS Bootstrap 4.
Puede agregarlo en la matriz de estilos del archivo .angular-cli.json así:
“estilos”: [
“styles.css”,
“../node_modules/bootstrap/dist/css/bootstrap.css”
],
