Regresar

Angular - Bootstrap

Bootstrap sirve como herramienta para construir la interfaz visual para de nuestras páginas html.

Proyecto en Angular

---

Utiliza el proyecto que desarrollaste con los tutoriales de Angular - Local.

Instalación de Bootstrap (y dependencias)

---

Desde la línea de comandos, en la carpeta del proyecto sobre Angular.

• De ser necesario, detenga el servidor de Angular.
• Instale bootstrap, con:

  npm install bootstrap
  

  • En el archivo package.json se agrega automáticamente módulo bootstrap (última versión).

  • En el archivo angular.json, en la clave architect > build > options > styles agregue la referencia a la hoja de estilo de Bootstrap.

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

  • En el archivo angular.json, en la clave architect > build > options > scripts con la referencia a javascript de Bootstrap.

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

• Notarás que el estilo por defecto del sitio ha cambiado.

Plantilla de Bootstrap

---

Ahora es momento de incorporar una plantilla de Bootstrap dentro de tu proyecto de Angular:

• Descargue los ejemplos de Bootstrap.
• Descomprima el archivo que descargaste y selecciona el ejemplo album: “bootstrap-x.y.z-examples\album”.
  • Abra el archivo “bootstrap-x.y.z-examples\album\index.html” en el navegador. El archivo luce así en el navegador.

• Del archivo “bootstrap-x.y.z-examples\album\index.html”, copie las etiquetas header, main y footer.
• En el proyecto de Angular, reemplace TODO el contenido del archivo “src/app/app.component.html” por las etiquetas copiadas (header, main y footer).
• Identifique si el servidor de Angular se encuentra ejecutándose o no. De ser necesario inicia el servidor, con: ng serve.
• El sitio de Angular luce así en el navegador.

Referencias

---

• bootstrap. (2021). Retrieved 13 July 2021, from https://www.npmjs.com/package/bootstrap#quick-start
• How to add Bootstrap 5 to your Angular 11 project. (2019). Retrieved 13 July 2021, from https://dev.to/myolisi/how-to-add-bootstrap-5-to-your-angular-11-project-1am2
• Angular & Bootstrap 3. (2020). Retrieved 9 July 2022, from https://medium.com/@d.bengati/angular-bootstrap-3-d383ee300ba1
• How To Checkout/Clone From A Specific Git Commit Id (SHA). (2021). Retrieved 25 November 2022, from https://devopscube.com/checkout-clone-specific-git-commit-id-sha/