¿Cómo instalar Bootstrap en Angular? 5 maneras fáciles

Una página web funciona mejor cuando es interactiva. Sin embargo, no parece posible desarrollar una nueva página web de la noche a la mañana.

Aquí es cuando puede sentir la necesidad de tener acceso a una página web que puede ser común pero que podría modificarse fácilmente a través de códigos personalizados. Aquí es donde entra en juego Bootstrap.

¡Comencemos por comprender cómo instalar Bootstrap en Angular para crear aplicaciones web receptivas y vívidas en Angular!

Comprender Bootstrap: una guía inicial

Bootstrap es un marco front-end que ofrece una combinación de herramientas y componentes de CSS, HTML y JavaScript para crear páginas web dinámicas. Bootstrap es de código abierto y gratuito. Si bien Angular en sí mismo es un marco capaz de crear sitios web potentes de una sola página, combinarlo con Bootstrap aumenta aún más su potencia para crear páginas web dinámicas y con capacidad de respuesta.

Bootstrap ha adquirido una gran popularidad, y alrededor del 25,8 % de todos los sitios web basados ​​en JavaScript utilizan Bootstrap, lo que implica aún más su importancia en el mercado.

Bootstrap: una mirada a su historia

Inicialmente creado como una herramienta interna para el popular sitio web de redes sociales Twitter, los ingenieros Jacob Thornton y Mark Otto decidieron publicar Bootstrap para uso del público en agosto de 2011 en el repositorio de código abierto GitHub.

Siguiendo su conveniencia y popularidad entre el público, los creadores continúan trabajando para generar versiones más recientes de Bootstrap, equipándolas con componentes de interfaz de usuario mejorados y mejor soporte.

Los creadores Mark y Jacob lanzaron la última versión de Bootstrap- Bootstrap 5.3.0 en el año 2023.

Consulte nuestroscursos de tecnología gratuitospara obtener una ventaja sobre la competencia.

¿Deberías usar Bootstrap?

Puede llegar a una respuesta a la pregunta al comprender la gran cantidad de beneficios que ofrece este proyecto. Para empezar, ofrece CSS súper receptivo. Esto lo hace adaptable en computadoras de escritorio, pestañas y teléfonos. También tiene computabilidad en la mayoría de los principales navegadores.

Agregue a esto la ventaja de los requisitos mínimos de configuración y podrá diseñar un diseño en una hora, si no menos. Bootstrap es propicio para su uso porque no necesita que un usuario sea competente con CASS o incluso HTML a menos que necesite iniciar modificaciones basadas en la interfaz de usuario.

Las características más amigables que hacen de Bootstrap una opción popular para incrustar en Angular o para agregarla instalación de Angular Bootstrap son:

Aspecto componente

Desde barras de navegación hasta formularios, Bootstrap proporciona un registro de componentes para aplicaciones cuando decide cómo agregar Bootstrap en Angular.Con la ayuda de estos componentes, diseñar un sitio o una aplicación de forma creativa se vuelve muy fácil. Esta funcionalidad con Bootstrap en Angular es muy popular entre los desarrolladores.

Consultelos cursos de desarrollo de software de upGrad para mejorar sus habilidades.

Aspecto de personalización

Cuando realizala instalación de Bootstrap en Angular, puede diseñar puntos de interrupción personalizados incluso para una columna e insertar interrupciones también, en tamaños según sus necesidades.Simplifica aún más la personalización basada en la cuadrícula receptiva del marco.

ahorro de tiempo

El marco de Bootstrap, cuando está integrado en Angular, genera grandes ahorros de tiempo en la línea de tiempo. Gracias a los bloques listos para usar en Bootstrap, no es necesario comenzar desde el principio cuando instalaBootstrap 5 en angular .Simplemente realineando los elementos incorporados y haciéndolos utilizables con sus entradas hace el truco e incluso agrega singularidad a su producto final.

Requisitos previos para instalar Bootstrap en Angular

Aquí hay una lista de verificación de requisitos previos para agregar Bootstrap a Angular. Asegúrese de configurar las herramientas enumeradas después de instalarlas para crear la aplicación Angular.

• Git : esta es una configuración de unidad de control de versión distribuida para usar para sincronizar el repositorio.
• IDE : el uso de un entorno de desarrollo integrado que tenga una interfaz gráfica es vital para desarrollar aplicaciones, incluido Angular.
• Node.js y npm : el primero es un software de código JavaScript para tiempo de ejecución.Mientras que el último, npm, se presenta como un administrador de paquetes utilizado para Node.js. Todas las aplicaciones de Angular se ejecutan en función de las dos, mientras que estas también ayudan en la instalación de la biblioteca.
• Angular CLI: esta herramienta de utilidad se basa en la línea de comando para el establecimiento de la estructura base de Angular.

Siga el ejemplo de los diversos cursos de ingeniería de software disponibles de profesores expertos en upGrad, como la Maestría en Ciencias en Ciencias de la Computación , y mejore sus habilidades de desarrollo exponencialmente.

Método 1: Instalar Bootstrap a través de CDN

Siga los pasos pertinentes para instalar Bootstrap en Angular a través de CDN.

• Localice la carpeta 'src' y abra el archivo de proyecto angular ' index.html '.
• Incruste los siguientes enlaces dentro de la sección ' <head> '.

<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>

• Los archivos JavaScript y CSS para Bootstrap se incluyen en estas líneas de código desde las URL de CDN designadas.
• Guarde los cambios finales en su archivo ' index.html '.

Su proyecto Angular utilizará los estilos de Bootstrap y las capacidades de JavaScript que ofrece la CDN una vez que haya incluido estos enlaces de CDN. ¡Ahora está listo para aprovechar los componentes de Bootstrap dentro de sus proyectos Angular!

Método 2: Instalar Bootstrap a través del administrador de paquetes npm

La instalación de Bootstrap usando el administrador npm se puede hacer siguiendo los pasos simples dados.

• Abra el símbolo del sistema o terminal.
• Navegue por el directorio raíz de su proyecto Angular.
• Instale Bootstrap y sus dependencias relacionadas ejecutando el comando ' npm install bootstrap' .El comando relevante descargará Bootstrap y sus dependencias relevantes en su directorio etiquetado como'node_modules'.
• Después de la instalación, debe incorporar estilos de Bootstrap y Javascript abriendo el archivo 'angular.json' desde el directorio raíz y agregando la siguiente entrada dentro de la matriz de 'estilos'.

“node_modules/bootstrap/dist/css/bootstrap.min.css”

• Además, agregue el siguiente comando dentro de la matriz 'scripts' .

“node_modules/bootstrap/dist/js/bootstrap.min.js”

• Guarde todos los cambios realizados en el archivo ' angular.json' .

Ahora está listo para usar clases de JavaScript y CSS de Bootstrap en sus componentes y plantillas de Angular.

Explore nuestros cursos populares de ingeniería de software

Método 3: Instalar Bootstrap a través de Angular CLI

Aquí hay una guía fácil de seguir para ayudarlo a instalar Bootstrap a través de Angular CLI.

• Abra su símbolo del sistema.
• Ejecute el comando 'ng new my-app' para usar Angular CLI y crear un nuevo proyecto Angular.Puede reemplazar'mi aplicación' con el nombre de su elección.
• Cambie al directorio del proyecto.

cd mi aplicación

• Repita el proceso de instalación de Bootstrap usando npm, como se mencionó anteriormente.

¡Ahora ha creado un nuevo proyecto Angular usando CLI, así como también instaló Bootstrap para su proyecto!

Método 4: Instalar Bootstrap a través del administrador de paquetes Bower

• Asegúrese de instalar npm y bower globalmente.
• Ejecute el comando dado en su símbolo del sistema: npm install -g bower
• Una vez que Bower esté instalado, vaya a la carpeta de su proyecto y escriba

Bower instalar bootstrap

glorieta instalar jquery

Los pasos anteriores instalarán los archivos de instalación de Bootstrap relevantes en la carpeta 'bower_components' recién creada .

• El paso final sería incluir los archivos de Bootstrap y jquery en su archivo de proyecto.

Si bien estos son todos los pasos para instalar Bootstrap en Angular, tenga en cuenta que ya no se recomienda usar Bower para la instalación de Bootstrap.

Explore nuestros cursos gratuitos de desarrollo de software

Método 5: Instalar Bootstrap a través de una compilación personalizada

Estos son los pasos simples para instalar Bootstrap a través de una compilación personalizada

• Descargue la versión de Bootstrap de su elección desde el sitio web oficial junto con sus archivos Javascript y CSS.
• Extraiga el archivo zip y copie el archivo 'bootstrap.min.css ' .
• En su proyecto Angular, navegue hasta el directorio ' src ' y cree uno nuevo llamado ' assets'. Asegúrese de crear otro directorio dentro de los 'activos' llamado ' css'.
• Pegue elarchivo 'bootstrap.min.css ' dentro del directorio ' css'.
• Nuevamente, en el directorio 'activos ', cree un nuevo directorio llamado ' js' y pegue el 'bootstrap.min.js' extraído de la carpeta zip dentro de este nuevo directorio.
• Abra 'angular.json ' en el directorio raíz y navegue por la matriz ' estilos'siguiendo el segmentoarquitecto > construir > opciones.
• Agregue archivos Bootstrap CSS usando el siguiente comando:

“src/activos/css/bootstrap.min.css”

• Encuentre la matriz 'scripts' en el mismo y pegue el siguiente comando:

“src/activos/js/bootstrap.min.js”

• Guarde los cambios en el archivo ' angular.json '.

Mejores prácticas a seguir al instalar Bootstrap

Si bien hay varias formas de instalar Bootstrap en Angular, conocer las mejores prácticas puede simplificar aún más el proceso.

• Asegúrese de importar los archivos CSS de Bootstrap correctos dentro de los archivos y carpetas correctos en su proyecto Angular.
• Si bien Bootstrap ofrece un amplio catálogo de clases y componentes CSS, elija solo los que sean relevantes para su proyecto.
• Evite componentes innecesarios para optimizar el rendimiento.
• Manténgase actualizado con la última versión de Bootstrap.
• Si bien los componentes de Javascript están disponibles, utilícelos con moderación. Intente aprovechar las bibliotecas específicas de Angular.

Por otro lado, si puede administrar el tiempo y esperar convertirse en un mejor desarrollador, nada puede ser mejor que el Programa Ejecutivo de Posgrado en Desarrollo de Software de upGrad: Full Stack, impulsado por IIIT-B.

Conclusión

Aquí concluye nuestra lista de algunas de las mejores formas de instalar Bootstrap en Angular para mejorar el desarrollo de páginas web. Desde un diseño receptivo optimizado hasta la incorporación de funciones nuevas y dinámicas, ¡saber cómo aprovechar los componentes correctos de Bootstrap con prácticas consistentes lo ayudará a obtener la ventaja en la industria!

Unirse al Bootcamp de desarrollo de software de pila completa de upGrad es otra forma de ampliar su carrera de desarrollo con habilidades en demanda y orientación experta.

¡Inscríbase ahora para expandir su horizonte!