/ CSS

Crea Diseños Responsive Utilizando Flexbox Con el Framework Bootstrap 4

El framework CSS Bootstrap 4 es la nueva versión de Bootstrap , la novedad es que con esta nueva versión se puede implementar layouts utilizando Flexbox que es una característica de CSS3, este framework es una navaja suiza ya que cuenta con múltiples componentes, utilidades, layouts, temas, ejemplos, etc.

Si por algún motivo tienes la necesidad de diseñar un sitio web a gran velocidad deberías considerar usar Bootstrap 4, ya que con framework Bootstrap 4 puedes crear diseños responsive utilizando Flexbox de manera sencilla y a la vez esta implementado para funcionar en la mayoría de navegadores modernos.

Demo

Acá te presento una demostración de lo que se puede realizar con Bootstrap 4.

Descargar código demo


Sitio web & repositorio GitHub

Aquí puedes encontrar la documentación oficial, ejemplos, temas, etc.

Bootstrap 4

Aquí puedes encontrar el proyecto Bootstrap 4, tanto el código fuente como el de producción, ademas este punto resaltante que vendría a ser los navegadores que lo soportan.

Bootstrap 4


Implementación de Bootstrap en un proyecto

Vamos a realizar un ejemplo de la implementación de Bootstrap 4 en un proyecto. Para lograr esta tarea Bootstrap nos brinda los CDN de los archivos CSS y JavaScript.

<!DOCTYPE html>
<html lang="es">
<head>
	<title>Bootstrap 4 - Ejemplo de su implementación</title>
	<!-- Etiquetas meta requeridas -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<!-- Hoja de estilo Bootstrap -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>

	<!-- JavaScript opcional -->
	<!-- Primero jQuery, luego Popper.js, luego Bootstrap JS -->	
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>

Una vez que ya hayamos implementado el framework Bootstrap 4 en nuestro proyecto estamos listos para continuar con algunos ejemplos del uso de sus componentes.

Layaout

Bootstrap cuenta con clases para crear layouts responsive, quiere decir que se adapta a cualquier dispositivo ya sea PC, tablets, smartphones, etc.

Código HTML

<!--Código inmerso en el interior del tag body-->

<!--Utiliza una parte de la pantalla-->
<div class="container">
	<div class="row">
		<div class="col-12">
			<h2>Contenedor parcial</h2>
		</div>
		<div class="col-xl-4">
			<h4>Lorem ipsum dolor sit.</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, maxime. Ut hic corporis minus cupiditate.</p>
		</div>
		<div class="col-xl-4">
			<h4>Lorem ipsum dolor sit.</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum tenetur qui quam aliquid adipisci, autem?</p>
		</div>
		<div class="col-xl-4">
			<h4>Lorem ipsum dolor sit.</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime necessitatibus esse nesciunt harum totam quas.</p>
		</div>
	</div>		
</div>
<!--Utiliza el 100% de la pantalla-->
<div class="container-fluid">
	<div class="row">
		<div class="col-12">
			<h2>Contenedor al 100%</h2>
		</div>
		<div class="col-xl-4">
			<h4>Lorem ipsum dolor sit.</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, maxime. Ut hic corporis minus cupiditate.</p>
		</div>
		<div class="col-xl-4">
			<h4>Lorem ipsum dolor sit.</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum tenetur qui quam aliquid adipisci, autem?</p>
		</div>
		<div class="col-xl-4">
			<h4>Lorem ipsum dolor sit.</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime necessitatibus esse nesciunt harum totam quas.</p>
		</div>
	</div>
</div>

Resultado

Ejemplo Layout


Flex

Vamos a ordenar nuestros componentes utilizando las clases flex de Bootstrap 4, estas clases permiten acomodar nuestros componentes de manera fácil a comparación de lo que estábamos acostumbrados.

Código HTML

<div class="container">
	<div class="row">
		<div class="col-xl-4 d-flex justify-content-end">
			<p>
			  <img src="http://lorempixel.com/50/50" />
			</p>
		</div>
		<div class="col-xl-4 d-flex justify-content-center">
			<p>
			  <img src="http://lorempixel.com/55/55" />
			</p>
		</div>
		<div class="col-xl-4 d-flex justify-content-between">
			<p>
			  <img src="http://lorempixel.com/60/60" />
			</p>
		</div>
		<div class="col-xl-4 d-flex justify-content-around">
			<p>
			  <img src="http://lorempixel.com/65/65" />
			</p>
		</div>
		<div class="col-xl-4 d-flex justify-content-between align-items-end">
			<p>
			  <img src="http://lorempixel.com/70/70" />
			</p>
		</div>
		<div class="col-xl-4 d-flex justify-content-center align-items-center">
			<p>
			  <img src="http://lorempixel.com/75/75" />
			</p>
		</div>
	</div>
</div>

Resultado

Ejemplo Flex


Este es un componente que nos permite crear un menú web que se adapta a múltiples pantallas.

Código HTML

<nav class="navbar navbar-expand-lg navbar-light bg-light container">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Inicio <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Tienda</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Acerca</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contacto</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Donar</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Buscar" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Buscar</button>
    </form>
  </div>
</nav>

Resultado

Ejemplo Navbar


Bootstrap cuenta con un componente para implementar una galería de imágenes en forma de carrusel.

Código HTML

<div class="container">
	<div class="row">
		<div class="col-12">
			<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
				<ol class="carousel-indicators">
			    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
			    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
			    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
			  </ol>
			  <div class="carousel-inner">
			    <div class="carousel-item active">
			      <img class="d-block w-100" src="http://lorempixel.com/1080/250" alt="First slide">
			    </div>
			    <div class="carousel-item">
			      <img class="d-block w-100" src="http://lorempixel.com/1081/250" alt="Second slide">
			    </div>
			    <div class="carousel-item">
			      <img class="d-block w-100" src="http://lorempixel.com/1082/250" alt="Third slide">
			    </div>
			  </div>
			  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
			    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
			    <span class="sr-only">Previous</span>
			  </a>
			  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
			    <span class="carousel-control-next-icon" aria-hidden="true"></span>
			    <span class="sr-only">Next</span>
			  </a>
			</div>
		</div>
	</div>
</div>

Resultado

Ejemplo Carousel


Vamos a ver como implementar un modal de manera sencilla, un modal en Bootstrap es un componente que nos permite lazar una ventana con contenido de cualquier indole.

Código HTML

<div class="container">
	<div class="row">
		<div class="col-12">
			
			<!-- Button trigger modal -->
			<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
			  Lanzar demostración modal
			</button>

			<!-- Modal -->
			<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
			  <div class="modal-dialog" role="document">
			    <div class="modal-content">
			      <div class="modal-header">
			        <h5 class="modal-title" id="exampleModalLabel">Bootstrap 4</h5>
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
			          <span aria-hidden="true">&times;</span>
			        </button>
			      </div>
			      <div class="modal-body">
			        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt pariatur quisquam perferendis necessitatibus enim placeat nobis asperiores corporis consequatur fugiat!
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
			      </div>
			    </div>
			  </div>
			</div>

		</div>
	</div>
</div>

Resultado

Ejemplo Modal


Popover

Los popovers en Bootstrap son elementos emergentes y son una manera de mostrar un mensaje de cualquier tipo.

Código HTML

<div class="container">
	<div class="row">
		<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover título" data-content="Y aquí hay un contenido increíble. Es muy atractivo. ¿Verdad?">Haz clic para alternar popover</button>
	</div>
</div>

Código JavaScript

$(function () {
  $('[data-toggle="popover"]').popover();
});

Resultado

Ejemplo Popover


Tooltips

Es una manera más elegante y agradable de mostrar el contenido del tag title.

Código HTML

<div class="container">
	<div class="row">
		
		<div class="col-xl-3">
			<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
			  Tooltip on top
			</button>
		</div>
		<div class="col-xl-3">
			<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
			  Tooltip on right
			</button>
		</div>
		<div class="col-xl-3">
			<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
			  Tooltip on bottom
			</button>
		</div>
		<div class="col-xl-3">
			<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
			  Tooltip on left
			</button>
		</div>

	</div>
</div>

Código JavaScript

$(function () {
  $('[data-toggle="tooltip"]').tooltip();
});

Resultado

Ejemplos Tooltips


Estos son algunos de los componentes que te ilustro para mayor información visita la página oficial de Bootstrap.

Luis Rene Mas Mas

Luis Rene Mas Mas

Hola, soy desarrollador Frontend, me encanta las tecnologías web, mi pasatiempo favorito es administrar este blog.

Leer Más