Bootstrap: inicio

Home » Blog » Bootstrap: inicio

Vamos a ver como podemos iniciarnos en el diseño web con Bootstrap.

¿QUE ES?

Bootstrap es un framework de front-end (parte visible de una web o aplicación) gratuito  y que su auge consiste en que permite un desarrollo web más rápido y fácil, porque te permite diseñar siguiendo una guía de etiquetas HTML que una vez dominadas te permite dar estilos a tu web de forma más rápida o mantener una web creada con Bootstrap de forma más sencilla, ya que todos los que usan este framework usan las mismas etiquetas, así que su identificación es más sencilla.

De este modo estas etiquetas nos permite establecer diseño a: Tipografías, formularios, botones, tablas, menús de navegación, imágenes, etc. O también nos permite crear la estructura, todo basado en una celda de hasta 12 bloques.

Estas etiquetas están creadas con una visión de crear diseños responsive, con lo que es más rápido crear versiones para: Mvl, Tablets, escritorio, tv, etc.

VENTAJAS

  • La curva de aprendizaje, si ya conoces html y css, es muy rápida. Solo hay que conocer el nombre de las etiquetas y que hacen.
  • Se consiguen diseños responsive con pocas etiquetas extra. tanto para móviles como tablets y versión escritorio o incluso TV. De hecho la construcción se basa en 1º versión móvil e ir creciendo que es como debe ser, ya que es donde está la limitación por espacio.
  • Es compatible con las últimas versiones de los navegadores: Chrome, Firefox, IE 10, etc. Es cierto que con versiones antiguas de IE puede dar problemas, pero creo que hay que olvidarse de ellas y solo si es necesario hacer uso de trucos.

¿COMO USARLO?

Bootstrap es un fichero  CSS que tenemos que llamar desde nuestras páginas y luego  usar sus etiquetas. Para poder usarlo tenemos 2 formas:

  • Incluir Bootstrap 4 desde un CDN.

Un CDN es «un tipo de infraestructura informática en la que se entrelazan varios ordenadores distribuidos geográficamente en varios data centers. Estos almacenan parte de la información y el contenido de los sitios web y los servirán al usuario final.». Vamos que el fichero Bootstrap está en diferentes servidor a los que podemos llamar, y esta estructura se encarga de servirlo en base a cercanía, cache, etc.

Para ello basta con introducir en nuestros ficheros:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0
.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min
.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/p
opper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.
min.js"></script>

En realidad solo es necesaria la primera llamada (bootstrap.min.css), las 3 últimas se usan para diferentes efectos como por ejemplo Pop Ups.

  • Descargar Bootstrap 4 desde getbootstrap.com

La única diferencia es que los ficheros deben estar en nuestro propio servidor, y por tanto las urls de los ficheros serán diferentes.

PAGINA BÁSICA CON BOOTSTRAP

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - INICIO</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Ejemplo</h1>
<p>Texto del ejemplo.</p>
</div>
</body>
</html>

En este ejemplo cabe destacar 3 cosas:

  1. Cargamos bootstrap.
  2. Indicamos a los navegadores que esta página es responsive y su comportamiento (<meta name=»viewport» content=»width=device-width, initial-scale=1″>)
  3. Usamos un contenedor (<div class=»container»>)

Este container es una etiqueta de Bootstrap y es muy importante ya que se requiere un contenedor para envolver el resto del sitio. Para lo cual tenemos 2 opciones:

  • <div class=»container«>
  • <div class=»container-fluid«>

La diferencia es que el segundo abarca el 100% de la pantalla.

SISTEMA DE GRILLAS

El sistema de grillas de Bootstrap se separa en 12 columnas o sub-grillas, que podemos usar para la composición de estructuras de nuestra página web. Podemos tener 1 único bloque de 12 columnas, 1 sidebar de 4 columnas y un bloque de contenido de 8, etc.

Por otro lado, podemos indicar el comportamiento responsivo de estas sub-grillas. Tenemos diferentes opciones:

  • .col-.Para dispositivos superiores a 1px. (vamos para todos los tamaños)
  • .col-sm-. Para dispositivos superiores o iguales a 576px.
  • .col-md-. Para dispositivos superiores a o iguales a 768px.
  • .col-lg-. Para dispositivos superiores a o iguales a 992px.
  • .col-xl-.  Para dispositivos superiores.
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>

En este caso, la estructura se adaptara en función al tamaño del dispositivo, y será Bootstrap quien decida en que momento pasa los bloques a abajo.

<div class="row">
<div class="col-sm-3">Columna sm3 1</div>
<div class="col-sm-3">Columna sm3 2</div>
<div class="col-sm-3">Columna sm3 3</div>
<div class="col-sm-3">Columna sm3 4</div>
</div>

En este ejemplo, las columnas para dispositivos que miden menos de 576px se mostrara 1 columna por fila… y para tamaños superiores se visualizan 4 columnas por fila.

<div class="row">
<div class="col-md-4">Columna 1</div>
<div class="col-md-8">Columna 2</div>
</div>

En este otro ejemplo, creamos 2 columnas de 4 y 8 sub-grillas de Bootstrap pero solo para tamaños de dispositivo superiores a 768px. Para el resto serán 1 columna por fila.

<div class="row">
<div class="col-md-4 col-sm-3">Columna 1</div>
<div class="col-md-8 col-sm-9">Columna 2</div>
</div>

En este último ejemplo vemos como es posible combinar el comportamiento de las grillas. En este caso cuando el dispositivo es superior a 768px el sidebar o columna pequeña es de 4 sub-grillas pero cuando es entre ese tamaño y 576px es de 3 sub-grillas y finalmente cuando es menor a 576px las columnas se visualizan 1 por línea.

Entender este comportamiento de grillas es básico para crear themes responsivos, y la recomendación es comenzar de pequeño a mayor, por que en el tamaño pequeño es donde tenemos el problema del ancho.



Foto de Iñigo Mezo Alvarez

IÑIGO MEZO ALVAREZ (IMAcreste)


Comentarios

Deja una respuesta

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

Las reseñas son opiniones que las personas dejan en la página local de Google. Si son positivas, estas reseñas ayudarán a mejorar la confianza y credibilidad de una marca.

Participa en nuestro sorteo enviando un email con tu nombre y el asunto «Sorteo AUDITORÍA SEO». Se realizara un sorteo cada mes.

Evaluación EXCELENTE
A base de 8 reseñas
Iñigo me ha asesorado con un problema que tenía para acceder a mi web y me ha salvado la vida, porque creía que había perdido todo el trabajo que llevaba haciendo años. Muchísimas gracias. Es gratificante encontarte con alguien que controla y te ayuda en los problemas que te pueden surgir.
Santutxu Zaharra
Santutxu Zaharra
11/06/2024
Gran profesional y muy competente, le contratamos para cambiar la web y mejorar el posicionamiento y gracias a su asesoramiento ha mejorado.
jorge martinez
jorge martinez
16/05/2024
Contactamos con Iñigo para el diseño web de nuestra tienda online y estamos encantados. Su asesoramiento, seguimiento y trato han sido excepcionales. Un verdadero crack. Recomendado al 100%. No dudes en ponerte en contacto con el.
erlantz rique
erlantz rique
19/02/2024
Un acierto quien elija a Iñigo. Autentico profesional, se preocupó en todo momento que entendiera el funcionamiento de la web. Me explicó todo las veces necesarias hasta entenderlo. Se preocupó y acertó en que la web tuviera lo que le pedí y lo hizo con creces. Muy contento con el servicio prestado. Una vez realizado el trabajo, cualquier duda que tengo me sigue ayudando. Lo recomiendo sin temor a equivocarme.
Jose Marlasca
Jose Marlasca
06/02/2024
Compromiso, implicación e innovación en los proyectos. Atento a las necesidades e incansable en la búsqueda de soluciones. Muy buena opción.
Jabier Fuertes Udaondo
Jabier Fuertes Udaondo
07/01/2024
Si buscas a alguien que además de hacer un diseño web moderno, responsivo y adaptado a tu sector, te explique por qué plantea el diseño web de esa manera y que te explique y ayude en posicionar tu web lo mejor posible en base a los objetivos fijados, ese es Iñigo Mezo y os lo recomiendo al 100%
Asier Hermoso
Asier Hermoso
03/01/2024
Genial trabajar con él! Además de ser muy buen profesional, experto y responsable, a destacar tanto su implicación en cada proyecto, así como su trato siempre cercano y su paciencia infinita ;) Un crack!!
itxaso zubia
itxaso zubia
15/12/2023
El plugin gratuito para integrar productos de Prestashop en Wordpress muy sencillo de utilizar y muy bien documentado, os felicito.
Fernando Cózar
Fernando Cózar
02/11/2023