Open Menu dzosoft
Close Menu dzosoft

   TODO SOBRE INFORMÁTICA Y TECNOLOGÍA


                             




Dazzle with your smile!

Publish perfectly-optimized content in 1-click



 
 
 

Cómo crear un pie de página usando Bootstrap: tutorial y ejemplo

 
 
Cómo crear un pie de página usando Bootstrap: tutorial y ejemplo
 
Bootstrap es uno de los frameworks CSS más utilizados para la implementación front-end. Esto se debe a que ofrece un conjunto de herramientas muy grande, junto con una curva de aprendizaje relativamente baja.

En este análisis en profundidad veremos cómo aprovechar Bootstrap para crear un pie de página para insertar en una página web.

 

Incluir las herramientas necesarias.

 

Para crear una estructura HTML/CSS usando Bootstrap 5, podemos incluir estilos CSS y scripts Javascript a través de los servicios CDN que se nos ofrecen. Para configurar un entorno de desarrollo Bootstrap, por lo tanto, podemos escribir lo siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pie de página usando Bootstraplt;/title>
<!--Último CSS compilado y minificado -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta3/css/bootstrap.min.css" 
integrity="sha512-N415hCJJdJx+1UBfULt+i+ihvOn42V/kOjOpp1UTh4CZ70Hx5bDlKryWaqEKfY/8EYOu/C2MuyaluJryK1Lb5Q==" crossorigin="anonymous" />
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- JavaScript compilado más reciente -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<style>
#first div:nth-child(1) {background: #0077ff;}
#first div:nth-child(2) {background: #8FA6F0;}
#first div:nth-child(3) {background: #294680;}
#first div:nth-child(4) {background: #819CD1;}
</style>
</head>
<body>
<div id="first" class="row">
<div class="col">col 1</div>
<div class="col">col 2</div>
<div class="col">col 3</div>
<div class="col">col 4</div>
</div>
</body>
</html>
También hemos incluido las dependencias de jQuery y Popper.js en esta plantilla.

 

La cuadrícula Bootstrap

 

Teniendo en cuenta nuestro objetivo de construir un pie de página a través de Bootstrap, debemos ser conscientes de cómo funciona el sistema de secciones que ofrece este último.
Bootstrap, así como la gran mayoría de CSS/front-end frameworks, utiliza una sección de la página en una especie de "cuadrícula", es decir, una estructura formada por secciones llamadas "filas", cada una de las cuales que se compone respectivamente de secciones denominadas "columnas" ( cols ).
Veamos un ejemplo básico simple:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Pie de página usando Bootstrap</title>


<!-- Último CSS compilado y minificado-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta3/css/bootstrap.min.css" 
integrity="sha512-N415hCJJdJx+1UBfULt+i+ihvOn42V/kOjOpp1UTh4CZ70Hx5bDlKryWaqEKfY/8EYOu/C2MuyaluJryK1Lb5Q==" crossorigin="anonymous" />
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- JavaScript compilado más reciente -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>


<style>
 #first div:nth-child(1) {background:  #0077ff;}
 #first div:nth-child(2) {background:  #8FA6F0;}
 #first div:nth-child(3) {background:  #fff;}
 #first div:nth-child(4) {background:  #000;}
</style>
</head>
<body>


<div id="first" class="row">
<div class="col">col 1</div>
<div class="col">col 2</div>
<div class="col">col 3</div>
<div class="col">col 4</div>
</div>


</body>
</html>

El div con id primero tiene la fila de la clase Bootstrap, lo que la convierte en una fila que contiene columnas. En cambio, sus elementos secundarios div tienen la clase Bootstrap col, que de lo contrario los convierte en secciones de la línea. En este caso, usando una columna genérica, le decimos a Bootstrap que reproduzca los anchos correctos para cada columna en cada tipo de dispositivo.
Una de las diferencias fundamentales entre la versión 3 y la versión 4 de Boostrap es que esta última utiliza la tecnología Flexbox en lugar del motor flotante, con todas las consecuencias del caso, incluido el recálculo automático de los anchos de los elementos.
También podemos usar las muchas variantes de las clases col, que nos permiten determinar explícitamente cuántos "espacios" debe cubrir una columna determinada (teniendo en cuenta que el corte de Bootstrap siempre define filas de 12 columnas) y en qué tipos de dispositivos debe cubrir. hazlo También podemos producir columnas receptivas que se comporten de manera diferente según el tamaño del dispositivo:
<div id="first" class="row">
<div class="col-md-2 col-lg-4">col 1</div>
<div class="col-md-4 col-lg-4">col 2</div>
<div class="col-md-4 col-lg-2">col 3</div>
<div class="col-md-2 col-lg-2">col 4</div>
</div>

En este caso le decimos a Boostrap que si el usuario está usando un dispositivo grande (identificado por las clases col-lg-*) las columnas deben dividirse según el esquema 4-4-2-2 (para un total de 12), mientras que si está utilizando un dispositivo de medianas dimensiones (identificado por las clases col-md-*) las columnas se distribuirán con las dimensiones 2-4-4-2. También podemos utilizar las variantes pequeña, extrapequeña y extragrande, teniendo en cuenta que cuanto más pequeñas sean las dimensiones elegidas, más escalarán los ajustes en orden ascendente.
En nuestro caso, yendo más allá de las dimensiones medias hacia dimensiones más pequeñas, las columnas se generarán cubriendo toda la dimensión disponible.

 

Pie de página

 
En este punto podemos utilizar las nociones derivadas de esta breve reseña para generar nuestro pie de página. Un "pie de página", el elemento de pie de página en un diseño HTML, generalmente consta de información general sobre la página, como derechos de autor, información del autor o información legal.

Veamos cómo podemos crear un pie de página en unos minutos usando Bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pie de página usando Bootstrap</title>


<!-- Último CSS compilado y minificado -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta3/css/bootstrap.min.css"
integrity="sha512-N415hCJJdJx+1UBfULt+i+ihvOn42V/kOjOpp1UTh4CZ70Hx5bDlKryWaqEKfY/8EYOu/C2MuyaluJryK1Lb5Q==" crossorigin="anonymous" />
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- JavaScript compilado más reciente -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>


<style>
#bottom {background: #8FA6F0; color: white;}
</style>
</head>
<body>


<footer id="bottom" class="row text-center fixed-bottom">
<div class="col-12">
Copyright © 2023
</div>
</div>


</body>
</html>

Nuestro pie de página es una fila de elementos, compuesta por un solo elemento col que cubre todo el espacio disponible, posicionado y anclado en la parte inferior de la página gracias a la clase fixed-bottom, con texto centrado gracias a la clase text-center. Con el selector de ID, pasamos a definir estilos adicionales. En este caso, el pie de página se limita a presentar una simple línea de texto.

 

Construir un pie de página avanzado

 

El elemento de pie de página no es de ninguna manera un elemento de poca importancia dentro de un diseño moderno. Por el contrario, recibe mucho énfasis y puede contener incluso controles muy complejos. Su papel en términos de experiencia de usuario no es secundario, y por ello es importante construirlo y utilizarlo al máximo.
Así que definamos un pie de página más avanzado que el anterior: un diseño que contiene 2 columnas (4 y 8), cuya segunda columna contiene 3 columnas más (4, 4, 4).
Entonces tenemos una fila de elementos que contiene 2 columnas, una de las cuales contiene otra fila de elementos que a su vez contiene 3 columnas de elementos. Podemos injertar las estructuras a nuestro gusto.
En la primera columna, además del encabezado relativo a los derechos de autor, colocaremos un formulario que permite al usuario suscribirse al boletín ingresando su nombre y dirección de correo electrónico. En nuestro caso hemos estilizado el formulario utilizando las clases especiales que ofrece Bootstrap.
En las subcolumnas de la derecha insertaremos 2 descripciones (que en nuestro caso se producirán a través del texto "Lorem Ipsum") y una colección de imágenes.
Todas las columnas de pie de página se escalarán al tamaño del dispositivo cuando el ancho de este último alcance el valor apropiado:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pie de página usando Bootstrap</title>
<!-- Último CSS compilado y minificado-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta3/css/bootstrap.min.css" 
integrity="sha512-N415hCJJdJx+1UBfULt+i+ihvOn42V/kOjOpp1UTh4CZ70Hx5bDlKryWaqEKfY/8EYOu/C2MuyaluJryK1Lb5Q==" crossorigin="anonymous" />
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- JavaScript compilado más reciente -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>


<style>
#main {min-height: 600px; background-color: #fff;}
#bottom {background-color: #8FA6F0; color: fff;}
div.img {border: 2px solid white; float: left; margin: 20px; width: 403px; height: 236px;}
img{width: 400px;cursor:pointer;}


div.highlight{background-color: white; opacity: 0.5;}


</style>
<script>
    $('div.img').click(function() {
       var $this = $(this);
       $this.toggleClass('highlight');
    });
});
</script>
</head>
<body>
<div id="main"></div>
<footer id="bottom" class="row text-left p-4">
<div class="col-12 col-md-4">
<h6>Copyright © ...</h6>
<form>
<div class="form-group">
  <label for="inputEmail">Email</label>
  <input type="email" class="form-control" id="inputEmail" placeholder="email">
</div>
<div class="form-group">
  <label for="inputPassword">Password</label>
  <input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<br>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-12 col-md-8">
<h2>Información</h2>
<div class="row">
  <div class="col-12 col-md-4">
    some text ...
  </div>
  <div class="col-12 col-md-4">
    <h2></h2>
    <div class="img"><img src="aircraft-63028_640.jpg"/></div>
	<div class="img"><img src="plane-2655519_640.png"/></div>
  </div>
</div>
</div>
</div>
 </body>
</html>

 

Pie de página compuesto en todo el escritorio

 
 
Cómo crear un pie de página usando Bootstrap: tutorial y ejemplo
 
 

Pie de página compuesto de ancho flotante

 
 
Cómo crear un pie de página usando Bootstrap: tutorial y ejemplo
 
Como podemos ver, hemos ampliado nuestro pie de página de una sola línea muy simple anterior, produciendo una estructura más compleja.
Obviamente, dado que el pie de página es una sección compuesta por elementos HTML, no tenemos límites en términos de creatividad. Por ejemplo, podemos agregar controles para realizar las más variadas operaciones, como ingresar datos a través de formularios, o producir ventanas modales Lightbox cuando el usuario hace clic en la lista de imágenes insertadas en la última columna.
Tenga en cuenta que si está utilizando un script jQuery, para trabajar con elementos necesita colocar el script como el último elemento del cuerpo, o usar un controlador de eventos (cuando el script se coloca en la cabeza) que espera a que se cargue el DOM completamente. Por ejemplo:
$(document).ready(function() {
    // work with HTML elements
});
Como ejemplo, vamos a crear un control jQuery simple enganchado al pie de página. Cuando el usuario hace clic en divlas imágenes de la derecha, adquieren un color de fondo rojo y se vuelven semiopacas (excelente efecto para imágenes reales), mientras que cuando el usuario hace clic más tarde, el efecto mencionado desaparece. Para ello creamos en el CSS una clase llamada resaltar:
div.highlight{background-color: #fff; opacity: 0.5;}

Esta clase se agregará y eliminará a través del método toggleClassjQuery:
$(document).ready(function() {
    $('div.img').click(function() {
       var $this = $(this);
       $this.toggleClass('highlight');
    });
});

En este punto, nuestro pie de página ha obtenido una verificación de interactividad.

 

Conclusiones

 
Como hemos visto, crear un componente de un diseño con Boostrap es una tarea realmente inmediata, que ofrece muchas ventajas: inmediatez en la creación gracias a la cuadrícula de 12 columnas, controles implícitos y explícitos sobre la capacidad de respuesta y capacidad de navegador cruzado (determinado por especificaciones de la versión 4) en todos.

descargar el ejemplo

También te puede interesar


Cómo podemos hacer animaciones solo con CSS

Cómo crear un menú horizontal en CSS

Cómo crear un menú con css y javascript

Cómo se redondea el radio del borde en CSS?

Cómo crear un formulario de registro con HTML y CSS

Cómo hacer un sitio web responsivo

Cómo crear efecto GLITCH con CSS

Como cambiar el estilo de las barras de desplazamiento

Cómo crear un efecto de enfoque al pasar el mouse usando CSS


Leave comment
          

Guardar apodo y correo electrónico en este navegador para la próxima vez.



Cargando...     

Release your testosterone and observe the extreme increase in muscle mass.