Ejemplos con Bootstrap 4

Seguro que has oído hablar de Bootstrap. Para quien no lo sepa o no lo tenga claro, os cuento a continuación. Bootstrap es un framework (o conjunto de librerías) de uso libre para el diseño de aplicaciones web. Una de su principal característica y ventaja es la de adaptar la interfaz del sitio web al tamaño del dispositivo en que se visualice, haciendo así un diseño responsivo. Inicialmente fue creado por desarrolladores de Twiter y se lanzó en agosto del 2011. En este pequeño tutorial os enseñaré algunos ejemplos con Bootstrap 4 muy útiles.

Actualmente, la última versión es la 4. Y es la que utilizaremos durante este tutorial.

Descarga de Bootstrap

Para poder comenzar, crea un proyecto web con Eclipse con una página de inicio (index.html). Accede a la web oficial de descarga https://www.bootstrapcdn.com/, abre cada enlace en un navegador y guarda el contenido en ficheros locales dentro de tu proyecto web.

bootstrap

En mi caso los he estructurado de la siguiente manera:

files bootstrap

Enlazar ficheros Bootstrap

En nuestra página index.html, enlaza los ficheros anteriores.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Ejemplos Bootstrap</title>

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<script type="text/javascript" src="js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

</head>
<body>

</body>
</html>

Dar formato a nuestra página index

Para ver algunos ejemplos, vamos a acceder a la página oficial: https://getbootstrap.com/docs/4.0/examples/

Vamos a basarnos en el ejemplo Blog.

blog css

Selecciónalo y sobre la página que se abre, haz clic con el botón secundario del ratón y presiona Inspeccionar elemento, si usas Firefox o Microsoft Edge, o bien, Inspeccionar si usas Chrome.

Observa que el explorador se divide en dos partes. En la zona donde aparece el código fuente, selecciona el contenido de la etiqueta <body></body> y pégalo en tu página index.html.

Guarda el fichero y ejecuta tu página.

Observa que ha adoptado el mismo diseño que la original, excepto el footer. Esto sucede porque ese estilo no lo tenemos definido. Para ello, crea una hoja de estilos llamada blog.css dentro del directorio css.

Una vez creada nuestra hoja de estilos, vamos a copiar el estilo del footer del código fuente y pegarlo.

Ejemplos con Bootstrap 4

Observa que hay otros estilos no son iguales, como el de los botones Older y Newer. Realizaremos la misma operación, copiaremos el estilo en nuestra hoja de estilos.

No olvides enlazar la hoja de estilos a tu página index:

<link rel="stylesheet" type="text/css" href="css/blog.css">

El fichero blog.css quedará así:

.blog-pagination {
    margin-bottom: 4rem;
}

.blog-pagination > .btn {
    border-radius: 2rem;
}


.blog-footer {
    padding: 2.5rem 0;
    color: #999;
    text-align: center;
    background-color: #f9f9f9;
    border-top: .05rem solid #e5e5e5;
}

Guarda los cambios y obseva el resultado. Ahora puedes modificar la página a tu gusto.

Si quieres ver diseños de componentes, puedes verlos en la página oficial de Bootstrap: https://getbootstrap.com/docs/4.4/components


Esto ha sido una pequeña introducción para saber qué es Bootstrap y tener en cuenta donde puedes ver información oficial. Si te ha gustado, comparte este tutorial: Ejemplos con Bootstrap 4.

Gracias!!

También te podría gustar...

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *