馃捇 驴C贸mo instalar Bootstrap en Angular? (2024)

Saber c贸mo instalar Bootstrap en Angular esun paso obligatoriopara tener una p谩gina web de excelente calidad. B谩sicamente, Bootstrap es un Framework Content Marketing, tambi茅n conocido como Framework de gesti贸n de contenido, que fue desarrollado por Twitter en 2010para estandarizar las herramientas de la compa帽铆a.

Por eso, instalar Bootstrap en Angular es muy recomendable para ahorrar tiempo al codificar, ya que combina el potencial de los lenguajes de programaci贸n m谩s usados,comoCSS, JavaScript (JS) o JQuery, con el objetivo de estilizar los elementos de tus p谩ginas HTML.

Sergio Agamez Negrete, desarrollador web y profesor del curso online de Bootstrap desde cero: construye sitios web responsive,refuerza esta informaci贸n afirmando lo siguiente:鈥淏ootstrap es el framework m谩s popular de todo el mundo que tiene c贸digos CSS y JavaScript, y a trav茅s de 茅l se puede adquirir el conocimiento para realizar cualquier sitio webde una manera m谩s simple鈥.

Seg煤n las estad铆sticas del sitio web de W3Techs, Bootstrap ocupa el segundo lugar del framework de JavaScript m谩s utilizado, con un 20,6% de los sitios web que utilizan dicha tecnolog铆a y, en la actualidad, es una de las alternativas m谩s populares a la hora de desarrollarp谩ginas web y aplicacionesfront-end receptivas.

Para optimizar tu flujo de trabajo a la hora de programar un nuevo software, en este art铆culo te explicaremos c贸mo instalar Bootstrap en Angular en sus diferentes versiones y cu谩l es su importancia. As铆 que 隆alista tu computadora y aprende a importar Bootstrap en Angular f谩cilmente!

1. Crea unproyecto Angular

El primer paso de c贸mo instalar Bootstrap en Angular escrear un proyecto Angulary ejecutar los siguientes pasos:

  1. Coloca鈥測鈥 para crear un archivo que se encargar谩 de rutear las p谩ginas.

  2. Luego, eligela hoja de estilos que quieres ocupar y presiona en鈥淓nter鈥.

  3. Das clic en 鈥渘g serve鈥 y te deber铆a aparecer la nueva pantalla de inicio de Angular.

2. InstalaBootstrap en Angular

Al instalar Bootstrap en Angular, podr谩s utilizar la 煤ltima versi贸n de este framework, que ya no tiene la dependencia obligatoria del jQuery. Elframework Bootstrap est谩 relacionado con Angular, porque es un framework de JavaScript, especializado en el desarrollo de aplicaciones web y para dispositivos m贸viles.

M茅todos de instalaci贸n de Bootstrap en Angular

Una vez creado el proyecto en Angular, el siguiente paso es conocer las diferentes formas de integrar Bootstrap en Angular para dise帽ar aplicaciones web de manera 贸ptima. Eso s铆, es importante tener un conocimiento b谩sico de los lenguajes HTML, JavaScript y TypeScript para poder ejecutar los c贸digos sin inconvenientes.

Dicho esto, a continuaci贸n, te mostraremos los m茅todos para instalar Bootstrap en Angular. 隆Toma nota y empieza a dise帽ar aplicaciones y p谩ginas web 煤nicas!

1. Agregar Bootstrap en Angular usando 鈥淣PM鈥

Bien, iniciemos con el primer m茅todo de c贸mo instalar Bootstrap en Angular a trav茅s de 鈥淣PM鈥. Regresa a tu interfaz de l铆nea de comandos yagrega las dependencias necesarias para a帽adir Bootstrap en Angular desde el 鈥淣PM鈥 y en tu consola tipealo siguiente:

  • npm install bootstrap jquery @popperjs/core

Estos comandos te permitir谩n tener las dependencias del Bootstrap, jQuery y el popperjs/core, las cualesson necesarias para darle un mejor potencial al funcionamiento del framework. Luego, en el archivo 鈥渁ngular.json鈥漝eber谩s poner las siguientes instrucciones en los objetos 鈥渟tyles鈥 y 鈥渟cripts鈥:

Esta dependencia tambi茅n a帽adir谩 el paquete de Bootstrap package.json y, por otro lado, los recursos de Bootstrap se instalar谩n en la carpeta node_modules/bootstrap. Simplemente, deber谩s indicarle a Angular d贸nde encontrarlos para completar la instalaci贸n de Bootstrap en Angular.

馃捇 驴C贸mo instalar Bootstrap en Angular? (1)Fuente: Pexels

2. Agregar Bootstrap en Angular usando angular.json

Abre el archivo angular.json al crear tu proyecto Angular e incluye los siguientes c贸digos:

  • node_modules/bootstrap/dist/css/bootstrap.css en la matriz de proyectos->arquitecto->construir->estilos,

  • node_modules/bootstrap/dist/js/bootstrap.js en la matriz de proyectos->arquitecto->construir->scripts,

  • node_modules/bootstrap/dist/js/bootstrap.js en la matriz de proyectos->arquitecto->construir->scripts,

馃捇 驴C贸mo instalar Bootstrap en Angular? (2)Fuente: Pexels

3. Agregar Bootstrap en Angular usando index.html

Otra forma de integrar Bootstrap en Angular de node_modules/bootstrap es usando el archivo index.html. Simplemente, abre el archivo src/index.html y a帽ade las siguientes etiquetas:

  • Una etiqueta <link> para agregar el archivo bootstrap.css en la secci贸n <head>,

  • Una etiqueta <script> para agregar el archivo jquery.js antes de la etiqueta de cierre </body>,

  • Una etiqueta <script> para agregar el archivo bootstrap.js antes de la etiqueta </body>.

馃捇 驴C贸mo instalar Bootstrap en Angular? (3)Fuente: Pexels

4. Agregar Bootstrap en Angular usando styles.css

Tambi茅n puedes usar el archivo styles.css para agregar el archivo CSS de Bootstrap en Angular. Una vez m谩s, abre el archivo src/styles.css de tu proyecto Angular e importa el archivo bootstrap.css de la siguiente manera:

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

Esto reemplaza los modos anteriores de c贸mo instalar Bootstrap en Angular, por lo que no necesitas agregar el archivo a la matriz de estilos del archivo angular.json o al archivo index.html. Ten en cuenta que los archivos JavaScript se pueden agregar usando la matriz de scripts o la etiqueta <script> como los m茅todos anteriores.

馃捇 驴C贸mo instalar Bootstrap en Angular? (4)Fuente: Pexels

5. Agregar Bootstrap en Angular usando ng-bootstrap y ngx-bootstrap

Bootstrap depende de las bibliotecas jQuery y popper.js, y si no las incluyes al crear un proyecto Angular, los componentes de Bootstrap que dependen de JavaScript no funcionar谩n.

驴Por qu茅 no incluir estas librer铆as? Para Angular, es mejor evitar el uso de bibliotecas que manipulan directamente el DOM (como jQuery) y dejar que Angular se encargue de eso.

Ahora, 驴qu茅 sucede si necesitas las funciones completas de Bootstrap sin las bibliotecas de JavaScript? Una mejor manera es usar bibliotecas de componentes creadas para que Bootstrap funcione sin problemas con Angular, como ng-bootstrap y ngx-bootstrap. Sigue estos pasos:

  1. Para importar Bootstrap en Angular con este m茅todo, primero deber谩s instalar la biblioteca desde 鈥淣PM鈥 usando el siguiente comando: $ npm instalar @ng-bootstrap/ng-bootstrap.

  2. Una vez que termine la instalaci贸n, deber谩s importar el m贸dulo principal: importar {NgbModule} desde '@ng-bootstrap/ng-bootstrap';

  3. A continuaci贸n, deber谩s agregar el m贸dulo que importaste en el m贸dulo ra铆z de tu aplicaci贸n de la siguiente manera: importar {NgbModule} desde '@ng-bootstrap/ng-bootstrap'; @NgModule({ declaraciones: [/*...*/], importaciones: [/*...*/, NgbModule.forRoot()], /*...*/}) clase de exportaci贸n AppModule {}.

  4. Ten en cuenta que ng-bootstrap requiere que el archivo CSS de Bootstrap est茅 presente. Puedes agregarlo en la matriz de estilos del archivo angular.json de la siguiente manera: "estilos": [ "estilos.css", "../node_modules/bootstrap/dist/css/bootstrap.

  5. Ahora, puedes usar Bootstrap en Angular. Tambi茅n puedes usar la biblioteca ngx-bootstrap. Simplemente, regresaal terminal, aseg煤rate de estar dentro de tu proyecto Angular y, luego, ejecuta el siguiente comando para instalarngx-bootstrap: $ npm install ngx-bootstrap.

馃捇 驴C贸mo instalar Bootstrap en Angular? (5)Fuente: Pexels

6. Agregar Bootstrap en Angular usando Schematics

Gracias al nuevo comando "ng add" agregado en Angular 7+, tienes una nueva forma m谩s simple y f谩cil de instalar Bootstrap en Angular sin usar el comando "npm install" para a帽adir las dependencias requeridas o agregar configuraciones.

Simplemente, puedes ejecutar el siguiente comando para agregar ng-bootstrap:

  • $ ng agregar @ ng-bootstrap/schematics

隆Listo! Ahora tienes soporte para una variedad de componentes y estilos de Bootstrap sin realizar una configuraci贸n adicional. Asimismo, no necesitas jQuery, ya que est谩s usando "ng-bootstrap".

Como ves, instalar Bootstrap en Angular es sencillo y mejorar谩 la presentaci贸n de todas tus p谩ginas web.Adem谩s, descubrir qu茅 es Bootstrap te permitir谩 desarrollar proyectos m谩s eficientesy vers谩tiles con diferentes lenguajes de programaci贸n.

3. Verificala instalaci贸n del Bootstrap

Para comprobar que hiciste un buen procedimiento al instalar Bootstrap en Angular, debes ir al archivo 鈥渁pp.componente.html鈥 y eliminar todo el contenido que tiene la hoja.

Ah铆 a帽ades el tag button con la clase: 鈥渂tn btn-danger鈥, elcual agregar谩 un bot贸n de color rojo con el nombre 鈥淧rueba bot贸n鈥, esto debes hacerlo debajo del <router-outlet></router-outlet>, quedando de la siguiente forma:

馃捇 驴C贸mo instalar Bootstrap en Angular? (6)

Para constatar que se hainstalado correctamente Bootstrap en Angular, al iniciar el servidor con un 鈥渘g serve鈥, el resultadose deber铆a ver as铆:

馃捇 驴C贸mo instalar Bootstrap en Angular? (7)

驴Por qu茅 instalarBootstrap en Angular?

Definitivamente, instalar Bootstrap en Angular te facilitar谩 tu vida como desarrollador web. A continuaci贸n, te contamos los beneficios del framework Bootstrap:

  • Sencillo de utilizar: gracias al sistema GRID, el creador puede hacer un dise帽o por medio de 12 columnas para insertar el contenido.

  • C贸digocorto: pese a la cantidad de elementos que ofrece Bootstrap, la herramienta tiene un c贸digo corto. Al instalar Bootstrap en Angular simplemente debes vincular la clase al elemento en el que quieres aplicar el recurso. Su uso elimina la necesidad de escribir muchas l铆neas de c贸digo y tambi茅n contribuye a reducir el tama帽o de los archivos, lo que hace que la p谩gina cargue m谩s r谩pido.

  • Una comunidad de desarrolladores activa: el framework Bootstrap sigue siendo de c贸digo abiertoy tiene una comunidad muy activa que colabora con las actualizaciones, da consejos y comenta las 煤ltimas noticias.

  • Proporciona interactividad en tu p谩gina:ofrece componentes que facilitan la comunicaci贸n con el usuario: men煤s de navegaci贸n, controles de p谩gina, barras de progreso, entre otros.

  • Te permite la creaci贸n de sitios web y apps adaptables a cualquier tipo de dispositivo, lo que facilita la construcci贸n de responsive template para dispositivos m贸viles e igualmente funcionales en tablets o computadores. Incluso, las im谩genes se adaptan de manera autom谩tica a la pantalla del dispositivo.

  • Al instalar Bootstrap en Angular, encontrar谩s un soporte extraordinario con HTML5 y CC3. Con 茅l, los usuarios ganar谩n una gran flexibilidad, y obtendr谩n unos resultados excelentes.

馃捇 驴C贸mo instalar Bootstrap en Angular? (8)Fuente: Pexels

Como puedes ver, aprender c贸mo instalar Bootstrap en Angular te permitir谩 obtener una gran cantidad de componentes din谩micos que pueden mejorarla interacci贸n yla comunicaci贸n con el usuario de tu p谩gina web, como las alertas, loscarruseles y la barra de navegaci贸n.

No es ning煤n secreto que Angular se posiciona como uno de las mejores plataformas de desarrollo web contempor谩neo, ya que brinda a los programadores web un m茅todo unificado para dise帽ar p谩ginas web y compartir c贸digo, as铆 como la capacidad de crear aplicaciones para cualquier objetivo de implementaci贸n, ya sea en versi贸n de escritorio o en versi贸n m贸vil.

Tanto Angular como Bootstrap son marcos muy populares para crear aplicaciones del lado del cliente en el caso de Angular, o dise帽ar y proporcionar componentes para crear interfaces de usuario profesionales en el caso de Bootstrap. Por eso, es tan importante aprender c贸mo usar Bootstrap en Angular para sacarle el m谩ximo provecho a ambas herramientas.

驴Quieres dominar conceptos y t茅cnicas efectivas para desarrollar tus propios software? Explora nuestros cursos online de desarrollo web y mobile y conoce sobre Hosting y operadores de cadena de texto, incluida la maquetaci贸n y aplicaci贸n de estilos al sitio web. Al finalizar nuestras clases, ser谩s capaz de elaborar un sitio web o una app en pocos minutos.

隆Nos vemos en la pr贸xima!

馃捇 驴C贸mo instalar Bootstrap en Angular? (2024)
Top Articles
Latest Posts
Article information

Author: The Hon. Margery Christiansen

Last Updated:

Views: 5888

Rating: 5 / 5 (50 voted)

Reviews: 89% of readers found this page helpful

Author information

Name: The Hon. Margery Christiansen

Birthday: 2000-07-07

Address: 5050 Breitenberg Knoll, New Robert, MI 45409

Phone: +2556892639372

Job: Investor Mining Engineer

Hobby: Sketching, Cosplaying, Glassblowing, Genealogy, Crocheting, Archery, Skateboarding

Introduction: My name is The Hon. Margery Christiansen, I am a bright, adorable, precious, inexpensive, gorgeous, comfortable, happy person who loves writing and wants to share my knowledge and understanding with you.