CURSO ANGULAR: Bootstrap [6]

Si eres desarrollador web debes conocer Bootstrap en el curso de angular lo usaremos para manejar el estilo de nuestra aplicación.

La forma correcta de instalar Bootstrap en nuestro proyecto es agregarlo como dependencia para ello ejecutamos el siguiente comando:

npm install bootstrap@latest --save
npm install jquery @popperjs/core

Luego verificamos en nuestro archivo package.json que se agregaron las dependencias

"dependencies": {
    "@angular/animations": "~9.1.13",
    "@angular/common": "~9.1.13",
    "@angular/compiler": "~9.1.13",
    "@angular/core": "~9.1.13",
    "@angular/forms": "~9.1.13",
    "@angular/platform-browser": "~9.1.13",
    "@angular/platform-browser-dynamic": "~9.1.13",
    "@angular/router": "~9.1.13",
    "@popperjs/core": "^2.6.0",
    "bootstrap": "^4.6.0",
    "jquery": "^3.5.1",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  }

Agregarlo al proyecto

Para que Bootstrap funcione en tu proyecto de Angular vamos a editar el archivo angular.json donde se encuentra la configuración de los estilos y scripts. Ubícalos y agrega la hoja de estilos y JavaScript.

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.scss"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/@popperjs/core/dist/umd/popper.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Probemos su funcionamiento

Para verificar su funcionamiento agregaremos algunos elementos en nuestro archivo src\app\app.component.html

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Curso de ANGULAR</h1>
        </div>
        <div class="col-md-12">
            <h3>Aqui en sistemas</h3>
        </div>
        <div class="col-md-6">
            <button type="button" class="btn btn-primary btn-block">Boton 1</button>
        </div>
        <div class="col-md-6">
            <button type="button" class="btn btn-success btn-block">Boton 2</button>
        </div>
    </div>
    <div class="row text-center">
        <div class="col-md-12">
            <p>Este curso fue desarrollado por aquiensistemas.com</p>
            <small class="text-muted">Distribución gratuita</small>
        </div>
    </div>
</div>

Deja un comentario