Saltar al contenido
Portada » Blog » ¿Qué es Bootstrap y cómo se usa?

¿Qué es Bootstrap y cómo se usa?

Bootstrap, es una libreria de estilos css. Esta libreria posse un conjunto de herramientas HTML, CSS y JavaScript para crear páginas web. Además es un proyecto gratuito y de código abierto, alojado en GitHub y creado originalmente por y para Twitter. Su lanzamiento fue en el 2011.


Ventajas de usar Bootstrap

  • Posee facilidad de uso, ya que lo único que tienes que hacer es poner clases a elementos HTML.
  • Responsive, es perfecto para crear páginas web adaptables a cualquier dispositivo.
  • Es personalizable, ya que puedes personalizar su descarga para usar los elementos que necesites.
  • Accede a una gran comunidad, este framework está muy extendido y sí tenemos un problema podremos encontrar mucha información en Internet.

Descarga e instalación de Bootstrap

Existen dos maneras de hacerlo:

1. Instalación de forma manual

  1. Para instalar Bootstrap de forma manual lo que tienes que hacer es descargar los archivos de Bootstrap desde su página web, haciendo clic en Download dentro de Compiled CSS and JS:

https://getbootstrap.com/docs/4.0/getting-started/download/


Además, para que funcione correctamente tienes que descargar también Jquery y Popper.js, un par de librerías que utiliza Bootstrap para que funcione correctamente. Aqui los links

Jqueryhttps://jquery.com/Popper.jshttps://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/popper.min.js >Botón derecho > “Guardar cómo” y lo descargas.

2. Dentro de la carpeta que te has descargado de Bootstrap hay una carpeta css y otra carpeta js. En la carpeta css es donde están los estilos y en la carpeta js el javascript necesario para que algunos elementos funcionen.

3. Asimismo, dentro de la carpeta css tienes que coger el archivo que se llama botstrap.min.css que es el que contiene todos los estilos y está minificado sin espacios para que ocupe menos. Dentro de la carpeta js tienes que coger el archivo bootstrap.min.js.

Estos dos archivos junto con el archivo js de jquery y el archivo js de popper.js tienes que meterlos en tu proyecto. Lo recomendables es meterlos separados para identificarlos mejor. Es decir, los archivos de estilos .css en una carpeta y los .js en otra carpeta, eso ya como quieras.

4. Hecho esto, ya puedes importar estos archivos dentro de la sección head de los HTML:

<head> 

  <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 	
  <script src="js/jquery.min.js"></script> 
  <script src="js/popper.min.js"></script> 
  <script src="js/bootstrap.min.js"></script> 

 </head>

Cuando abras la página, en la sección Network de las herramientas para los programadores del navegador (para abrirlas puedes pulsar ALT + SHIFT + I o puedes hacer botón derecho > inspeccionar elemento dentro del navegador) tienes que revisar que los archivos que has importado (recarga la página si no te sale nada) los encuentra bien.


Mediante CDN, más sencillo.

Este método es el más sencillo porque solo tenemos que llamar desde dentro de la etiqueta head del HTML a cada una de los archivos en la nube y por tanto no tienes que descargar nada.

<head>
	
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZwv-model-vue1T" crossorigin="anonymous">

  <meta name="viewport" content="width=device-width, initial-scale=1"> 

  <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>

</head>

Tambien se puede acceder a traves del buscador google , colocando Boostrapp, y aparecera https://getbootstrap.com/docs/5.2/getting-started/introduction/ clic ahi, podra accceder a las herramientas que te proporciona esta libreria. y copiar las herramientas que te ofrece Bootstrap.


Cómo se usa?

Con la implementación de plantillas prediseñadas en HTML y CSS, los desarrolladores web no necesitan desarrollar una idea para una página web desde cero. Bootstrap, su estructura modular permite integrarlas fácilmente en cualquier documento HTML. Con esto, se eliminan muchas de las tediosas configuraciones CSS, ahorrando una gran cantidad de tiempo y esfuerzo. Esto incluye, elementos como:

Grid, botones, elementos de navegación, vista en miniatura, menús de navegación, historial, carrusel, card, modal, pagination, color y background, Navbar, entre otros.


El sistema grid (sistema de regilla)

El sistema de cuadrícula de Bootstrap utiliza una serie de contenedores, filas y columnas para diseñar y alinear el contenido. Está construido con flexbox y es totalmente receptivo. A continuación se muestra un ejemplo y una explicación detallada de cómo se une el sistema de red

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Buttons de Bootstrap

Incluye varios estilos de botones predefinidos, cada uno con su propio propósito semántico, con algunos extras incluidos para un mayor control y facilidad.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Carousel (carrusel)

Es una presentación de diapositivas para recorrer una serie de contenido, creado con transformaciones CSS 3D y un poco de JavaScript. Funciona con una serie de imágenes, texto o marcas personalizadas. También incluye soporte para controles e indicadores anteriores/siguientes. En los navegadores en los que se admite la API de visibilidad de página, el carrusel evitará que se deslice cuando la página web no esté visible para el usuario (como cuando la pestaña del navegador está inactiva, la ventana del navegador está minimizada, etc.).

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Cards de Boostrapp

Es un contenedor de contenido flexible y extensible. que incluye opciones para encabezados y pies de página, una amplia variedad de contenido, colores de fondo contextuales y potentes opciones de visualización. Si está familiarizado con Bootstrap, las tarjetas reemplazan nuestros viejos paneles, pozos y miniaturas.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Navbar

Es un contenido compatible, las barras de navegación vienen con soporte integrado para un puñado de subcomponentes.

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Color y Background

Con sus ayudantes de color y fondo se combinan el poder de .text-* y .bg-* en una sola clase. determinandose automáticamente un color de contraste para un color de fondo en particular.

<div class="text-bg-primary p-3">Primary with contrasting color</div>
<div class="text-bg-secondary p-3">Secondary with contrasting color</div>
<div class="text-bg-success p-3">Success with contrasting color</div>
<div class="text-bg-danger p-3">Danger with contrasting color</div>
<div class="text-bg-warning p-3">Warning with contrasting color</div>
<div class="text-bg-info p-3">Info with contrasting color</div>
<div class="text-bg-light p-3">Light with contrasting color</div>
<div class="text-bg-dark p-3">Dark with contrasting color</div>

En conclusion, Boostrapp te ofreces un abánico de herramientas faciles de usar para que puedas diseñar tu página web. Sin necesidad de preocuparte por comandos o codigos. Ya que puedes crear layouts, plantillas o simplemente maquetar contenidos, colocando elementos donde deseemos.

Artículos relacionados:

¿Qué es Hosting? Hospedaje Web

¿Qué es el dominio en internet?