Integrar Bootstrap en una página web

¿Cómo agregar Bootstrap en una página web muy fácilmente?

Integrar Bootstrap en una página web

¿Cómo agregar Bootstrap en una página web muy fácilmente?

CSS

Veremos como integrar fácilmente el framework Bootstrap en una página web, sin descargar nada ya que todo se hará a través de enlaces de peticiones vía CDN

Primero ¿Qué es Bootstrap?

Bootstrap es un framework para CSS y JavaScript, creado con el objetivo de facilitar la organización de contenido, la aplicación de estilos y el desarrollo de páginas web adaptables a dispositivos móviles. En este artículo se demostrará como usar Bootstrap en una aplicación web.

Ahora si ¿Cómo implementar Bootstrap en una web ?

Para esto tendremos dos métodos para implementarlo en tu web:

Primera forma: Descargar e instalar desde la web oficial de Bootstrap

La primera tenemos que entrar a la página misma de Bootstrap y descargar los archivos necesarios (bootstrap.css, Bootstrap.js y el jquery).

Y luego de descargar los archivos procedes a importarlos a tu proyecto con las etiquetas html que sean necesarias

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js></script>

Y la segunda forma es a traves de la CDN de Bootstrap 

Otra forma que tenemos y la más conveniente sería el llamado a la misma página de los creadores, el cual se hará un petición a sus servidores para usar los archivos cs y js necesarios, los cuales no estarán almacenados en su página web y aumenten el tamaño de este, como se sabe al estar dentro del proyecto hacen q ocupe un poco de espacio adicional en todo tu proyecto.

Forma de maquetar tu estructura en HTML:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Todo estos ejemplos y mas, si deseas extenderlo puedes visitar la pagina oficial del framework que te da pequeños tutoriales de como usar al 100% esta increibre herramienta.

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 4782 veces | Publicado hace 1 año

CURSO FLUTTER DESARROLLO DE UNA APP RESTAURANT CON CARRITO DE COMPRA

Mira el temario del curso en el siguiente link
App Restaurant Flutter con Carrito de Compra

Logo Codea App

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020