CURSOS, cursos tusolutionweb

bootstrap tutorial desde cero

Bootstrap desde cero

bootstrap tutorial desde cero En este tutorial aprenderemos a dar los primeros pasos en bootstrap 4 para crear páginas web que se adapten a cualquier tamaño de pantalla o dispositivo.

Bootstrap es un framework desarrollado por Twitter para facilitar el diseño web. Permite crear webs responsive de manera sencilla. Utiliza un sistema de grillas (grid system), que se trata de dividir el ancho de la página en columnas dependiendo de la resolución de la pantalla. Lo primero que debemos hacer para empezar a utilizar bootstrap es descargar los archivos Css y JavaScript necesarios. Para ello vamos a la página http://getbootstrap.com y hacemos click en “Download Bootstrap”. Descargaremos la última versión.

Descarga de los archivos de Bootstrap

VIDEO CURSO BOOTSTRAP AQUI

Página de descarga de Bootstrap
Página de descarga

Hacemos click en “Download” Compiled CSS and JS‘, para descargar los archivos css y js que vamos a necesitar. Se descargarán en formato .zip

Descargar ficheros de Bootstrap
Descargar Bootstrap

Al descomprimirlos podemos ver que tenemos dos carpetas,  una con los archivos Css y la otra con los JavaScript. Son los archivos que tenemos que copiar en la carpeta de nuestro proyecto

Ficheros de Bootstrap descargados
Ficheros descargados

Ahora vamos a copiar la plantilla que se encuentra un poco más abajo en la página, hacemos click en “Copy

Copiar plantilla de Bootstrap para comenzar
Copiar plantilla

En nuestro proyecto crearemos un archivo index.html y en él pegamos la plantilla. Como vemos en los cuadros amarillos se encuentran los enlaces a los archivos css y js en línea

Pegar plantilla de Bootstrap en fichero index.js
Pegar plantilla

Es conveniente sustituir estos dos enlaces por enlaces a los archivos locales. Esto mejorará la velocidad de carga y además nos permitirá trabajar sin conexión a internet

Sustituir enlaces de Bootstrap por ficheros locales
Sustituir enlaces

Para utilizarlos sólo nos queda añadirlos a nuestro proyecto. Aunque hay muchos archivos en las dos carpetas, en principio sólo vamos a utilizar dos: bootstrap.css ybootstrap.min.css Los dos archivos cumplen la misma función. bootstrap.min.css es la versión comprimida de bootstrap.css. Se recomienda utilizar la versión comprimida ya que ocupa un poco menos y nuestra página cargará más rápido. El archivo contiene los estilos de todas las clases predefinidas que podemos utilizar. Añadimos al head de nuestra página el enlace al archivo bootstrap.min.css y ya podemos comenzar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo Bootstrap</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
   <h1>Esta es mi primera página con Bootstrap</h1>
</body>
</html>

Mi primera página con Bootstrap

Utilizaremos la clase “container” para envolver todo el código en un mismo div. Podemos usar “container” ó “container-fluid”, si queremos que el contenido ocupe una parte o todo el ancho de la pantalla.

<body>
<!--Añadimos un fondo al div para distinguirlo mejor-->
    <div class="container" style="background-color: #aaa">
        <!--Contenido de la página-->
        <h1>Esta es mi primera página con Bootstrap</h1>
        <p>Ejemplo de la clase container</p>
    </div>
</body>

Vemos como el contenido de la página aparece centrado

Primera página con Bootstrap
Primera página

Si hacemos resize en el navegador podemos comprobar que nuestra página se adapta correctamente con sólo definir la clase “container” Vamos a añadir algunas clases básicas más

<body>
    <!--Añadimos un fondo al div para distinguirlo mejor-->
    <div class="container" style="background-color: #aaa">
        <!--Contenido de la página-->
        <!--clase text-center: centra el texto-->
        <h1 class="text-center">Esta es mi primera página con Bootstrap</h1>
        <!--clase lead: resalta el texto-->
        <p class="text-center lead">Ejemplo de la clase container</p>
        <!--clase btn: botón-->
        <button class="btn">Botón</button>
        <!--clase btn-primary: botón primario-->
        <button class="btn btn-primary">Botón primario</button>
    </div>
</body>

Y veamos el resultado

Ajustar página con container en Bootstrap
Ajustar con container

Sistema de grillas de Bootstrap

Las grillas de Bootstrap nos ayudan a crear un contenido más fluido y adaptable a todos los dispositivos. Se trata de un sistema cómodo y fácil de entender. Se divide el ancho de la pantalla en 12 columnas, de modo que si queremos que un div ocupe todo el ancho le diremos que ocupa 12 columnas y si ocupa sólo la mitad ocupará 6 columnas. Definiremos primero un contenedor de Bootstrap, “container” o “container-fluid”.

<body>
    <!--Añadimos un fondo al div para distinguirlo mejor-->
    <div class="container" style="background-color: #aaa">
        <!--Contenido de la página-->
    </div>
</body>

Creamos una nueva fila de contenido con sus respectivas columnas

<div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

Vamos a darle un poco de contenido a ver que tenemos por ahora

<body>
    <!--Añadimos un fondo al div para distinguirlo mejor-->
    <div class="container" style="background-color: #aaa">
        <!--Contenido de la página-->
        <div class="row">
            <div class="col" style="background-color: rgb(130, 167, 130)">
                <p>Primera columna</p>
            </div>
            <div class="col" style="background-color: rgb(221, 221, 115)">
                <p>Segunda columna</p>
            </div>
            <div class="col" style="background-color: rgb(149, 173, 226)">
                <p>Tercera columna</p>
            </div>
        </div>
    </div>
</body>

Las columnas se colocan solas sin necesidad de darles un ancho

Ejemplo columnas sin definir ancho en Bootstrap
Ejemplo columnas 1

Además de colocar la clase col dentro de la clase row, también podemos agregarle otras clases para que la página sea responsive

  • xs (extra small)

Actúa en dispositivos de menos de 576 píxels

  • sm (small)

Dispositivos entre 576 y 768 píxels

  • md (medium)

Todos los dispositivos entre 768 y 992 píxels

  • lg (large)

Para todos los dispositivos entre 992 y 1200 píxels

  • xl (extra large)

En dispositivos grandes, por encima de los 1200 píxels Veamos como utilizar estas clases

<body>
    <!--Añadimos un fondo al div para distinguirlo mejor-->
    <div class="container" style="background-color: #aaa">
        <!--Contenido de la página-->
        <div class="row">
        <!--La clase xs no hace falta ponerla porque es por defecto col-->
            <div class="col" style="background-color: rgb(130, 167, 130)">
                <p>Primera columna.</p>
            </div>
            <div class="col-sm" style="background-color: rgb(221, 221, 115)">
                <p>Segunda columna</p>
            </div>
            <div class="col-md" style="background-color: rgb(149, 173, 226)">
                <p>Tercera columna</p>
            </div>
            <div class="col-lg" style="background-color: rgb(241, 214, 189)">
                <p>Cuarta columna</p>
            </div>
            <div class="col-xl" style="background-color: rgb(188, 235, 209)">
                <p>Quinta columna</p>
            </div>
        </div>
    </div>
</body>

Ahora tenemos 5 col, para ajustarlos a los diferentes tamaños de pantalla. Sin hacer nada más ya tendríamos una página responsive. Ya podemos probar el resultado en el navegador y veremos que según vayamos haciendo la ventana más pequeña, los diferentes divs van pasando a ocupar todo el ancho y se sitúan unos encima de otros

Ejemplo clase lg en Bootstrap
Ejemplo lg
Ejemplo clase md en Bootstrap
Ejemplo md
Ejemplo clase sm en Bootstrap
Ejemplo sm
Ejemplo clase xs en Bootstrap
Ejemplo xs

You Might Also Like

Deja un comentario

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