Saltar al contenido

Tutorial de Bootstrap para WordPress

Tutorial de Bootstrap para WordPress
5 (100%) 4 vote[s]

Hay muchas maneras diferentes de construir un sitio web. Desde WordPress, Joomla, Drupal y otros creadores de sitios web, hasta HTML puro y herramientas como Dreamweaver.

En resumen, si necesitas un sitio web, puedes encontrar uno entre muchos métodos para crearlo y, en este tutorial para principantes, aprenderás uno más llamado Bootstrap.

Bootstrap es un marco de trabajo o framework de front-end que te ayuda a crear sitios web más rápida y fácilmente.

Desarrollado en un principio por Twitter, Bootstrap ya se utiliza para muchas cosas, desde el desarrollo de aplicaciones web hasta temas de WordPress.

Es completamente libre, versátil e intuitivo.

Razones suficientes para que escribamos un tutorial detallado de Bootstrap que te enseñe todo lo que necesitas saber.

A continuación, aprenderás qué es Bootstrap, cómo configurarlo y construir una página de aterrizaje o landing page sencilla para un sitio web paso a paso.

Al final, queremos que tengas un conocimiento básico de cómo usar Bootstrap para que puedas continuar aprendiendo.

Tutorial de Bootstrap Paso 1: ¿Qué es Bootstrap?

La primera parte de este tutorial para principiantes se concentra en saber exactamente qué es Bootstrap.

Sólo si sabes con lo que estás lidiando, puedes empezar a entender cómo usarlo.

Un proyecto de código abierto

Como ya sabéis, Bootstrap fue creado originalmente por Twitter. Un pequeño grupo de desarrolladores lo reunió como una herramienta interna para ayudar a crear interfaces web coherentes.

El proyecto siguió creciendo hasta que finalmente decidieron lanzarlo al público para su uso gratuito en 2011.

Desde entonces, el apoyo a Bootstrap ha continuado tanto por parte de algunos de los desarrolladores originales como de un gran grupo de colaboradores.

Ha pasado por varias actualizaciones importantes a lo largo de los años (la última, Bootstrap 4, en enero de 2018) que, entre otras cosas, han añadido su famoso sistema de cuadrícula, diseño plano, un enfoque para móvil y CSS moderno.

Por ahora, el framework se encuentra entre las herramientas de desarrollo web más populares de la red.

Entre otras cosas, se ha convertido en el segundo proyecto más destacado de Github. Sin embargo, ¿qué hace exactamente?

Un marco de trabajo front-end

Como se mencionamos en la introducción, Bootstrap es un marco de trabajo o framework para el desarrollo front-end.

No te preocupes si no sabes lo que eso significa, yo tampoco lo sabía cuando empecé a armar este artículo.

En la programación de ordenadores, un framework es algo así como una biblioteca. Contiene herramientas, piezas y funciones existentes que se pueden utilizar para realizar tareas estándar de forma más rápida y sencilla.

En el caso de Bootstrap, estas tareas estándar son la creación de patrones de diseño como formularios, menús, columnas, botones y otros componentes que se necesitan con frecuencia en los sitios web.

Bootstrap te ayuda a configurarlos ofreciendo un gran número de clases de CSS que puedes aplicar fácilmente a elementos HTML para crear los componentes del sitio que necesitas.

De esta manera, puedes crear páginas web complejas a partir de HTML estándar y personalizarlas según sus necesidades.

Además, Bootstrap viene con una serie de plugins jQuery que pueden proporcionar funcionalidad adicional como carruseles, botones, consejos de herramientas y más.

Si todavía no estás seguro de cómo te ayuda esto, no te preocupes, los siguientes ejemplos lo aclararán.

Lo importante es recordar que Bootstrap te ofrece muchos atajos para crear páginas web que te ahorrarán tiempo y energía.

Todo lo que necesitas es una comprensión básica de HTML y CSS para crear sitios adaptables a móviles y compatibles con todos los navegadores modernos.

¿Todo bastante claro hasta ahora? Entonces veamos cómo funciona exactamente.

Tutorial de Bootstrap Paso 2: Configuración y descripción general

Para usar Bootstrap, primero necesitas integrarlo en tu entorno de desarrollo, también conocido como página web.

Para ello, tienes dos posibilidades diferentes:

  1. Cargarlo remotamente, o
  2. Descargarlo y utilizar Bootstrap localmente.

Sin embargo, para ambos, primero necesitas algo en lo que cargarlo.

1. Crear una página HTML

Como primer paso, crearemos una plantilla HTML simple, como base donde usaremos Bootstrap.

Para ello, lo primero que debes hacer es crear una carpeta en tu ordenador o servidor para los archivos de proyecto. En este caso, simplemente lo llamaremos bootstrap.

Aquí, crea un nuevo archivo de texto y llámalo index.html.

Ábrelo con un editor de texto de tu elección (por ejemplo, Bloc de notas++ o Texto sublime) y luego pega el código de abajo en él:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Tutorial Sample Page</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>

¡No olvides guardar tu archivo antes de seguir adelante!

2-a. Cargar Bootstrap a través de CDN

Como ya hemos explicado, Bootstrap consiste principalmente en hojas de estilo o style sheets y scripts.

Como tal, puedes cargarlos en el encabezado y pie de página de tu página web como otros activos tales como fuentes personalizadas.

El marco de trabajo o framework ofrece una ruta de acceso CDN (red de entrega de contenido o content delivery network) para ello. Puedes encontrarla en la página de descargas de Bootstrap.

Para poner Bootstrap en tu página, simplemente pega el código de abajo en la sección <head> de tu plantilla.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

Cuando guardes el archivo, cualquier navegador en que lo abras cargará automáticamente los activos de Bootstrap.

Usar el método remoto es una buena idea, ya que muchos usuarios ya tienen el framework en la caché de su navegador.

Si ese es el caso, no tendrán que recargarlo al llegar a tu sitio, lo que conlleva un tiempo de carga de la página más rápido. Como consecuencia, este es el método recomendado para sitios en vivo.

Sin embargo, para experimentar y desarrollar, o si quieres ser independiente de una conexión a Internet, también puedes obtener tu propia copia de Bootstrap.

2-b. Alojar Bootstrap Localmente

Una forma alternativa de configurar Bootstrap es descargarlo a tu disco duro y utilizar los archivos localmente.

Las opciones de descarga se encuentran en el mismo lugar que los enlaces a la versión remota.

Aquí, asegúrate de obtener los archivos CSS y JS compilados. No necesitas los archivos fuente.

Una vez hecho esto, descomprime el archivo y copia su contenido en el mismo directorio que index.html.

Después de eso, puedes cargar el CSS de Bootstrap en su proyecto de la siguiente manera:

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

Notarás que esto incluye la ruta de archivo en la que se encuentra el archivo de Bootstrap. En tu caso, asegúrate de que la ruta corresponde a tu configuración real.

Por ejemplo, los nombres de los directorios pueden diferir si has descargado una versión diferente de Bootstrap.

3. Incluir jQuery

Para obtener la funcionalidad completa de Bootstrap, también necesitas cargar la biblioteca jQuery.

Aquí, también tienes la posibilidad de cargarlo remotamente o alojarlo localmente.

En el primer caso, encontrarás el enlace a la última versión de jQuery. Puedes usarlo para cargar la librería en tu página poniendo la línea de código de abajo justo antes de donde dice </body> en tu página.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

Alternativamente, puedes descargar jQuery, descomprimilo y colocarlo en la carpeta del proyecto. Luego, inclúyelo en el mismo lugar de tu archivo de esta manera:

<script src="jquery-3.3.1.min.js"></script>

Una vez más, asegúrate de que la ruta corresponde a su configuración.

4. Cargar Bootstrap Javascript

El último paso para configurar Bootstrap es cargar la biblioteca JavaScript de Bootstrap.

Éstas biblioteca se incluye en la versión descargada de Bootstrap y también encontrarás enlaces a fuentes remotas en el mismo lugar que antes.

Sin embargo, lo cargaremos en un lugar diferente al de la hoja de estilo o style. En lugar del encabezado, ve al pie de página, justo después de la llamada a jQuery.

Puedes llamarlo remotamente así:

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

O también localmente como:

<script src="bootstrap/js/bootstrap.min.js"></script>

5. Poniendo esto todo junto

Si ha seguido los pasos anteriores correctamente, debería terminar con un archivo como este para la solución remota:

<!DOCTYPE html>
<html lang="en">
 <head>

 <title>Bootstrap Tutorial Sample Page</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

 </head>
<body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

Alternativamente, si estás hospedando Bootstrap localmente, tu plantilla de página debe parecerse al código de abajo:

<!DOCTYPE html>
<html lang="en">
 <head>

 <title>Bootstrap Tutorial Sample Page</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

 </head>
<body>

<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

Si eso es lo que tienes y has guardado tu trabajo, ya estás listo para pasar al siguiente paso.

Tutorial de Bootstrap Paso 3: Diseña tu landing page

Lo anterior fue, sin duda, mucho trabajo de preparación. Sin embargo, no ha sito tan muy difícil, ¿verdad? Además, ahora comienza la diversión.

Por el momento, cuando navega a tu sitio de muestra, simplemente deberías ver una página en blanco. Es hora de cambiar eso.

1. Añadir una barra de navegación

Lo primero que queremos hacer es añadir una barra de navegación en la parte superior de la página. Esto permite a tus visitantes moverse por tu sitio y descubrir el resto de tus páginas.

Para ello, utilizaremos la clase navbar.

Este es uno de los elementos por defecto de Bootstrap. Crea un elemento de navegación que responde de forma predeterminada y que se contraerá automáticamente en pantallas más pequeñas.

También ofrece soporte incorporado para agregar marcas, esquemas de color, espacios y otros componentes.

Lo usaremos como abajo y lo pondremos justo debajo de la etiqueta <body>:

<nav class="navbar navbar-expand-md">
 <a class="navbar-brand" href="#">Logo</a>
 <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
 <span class="navbar-toggler-icon"></span>
 </button>
 <div class="collapse navbar-collapse" id="main-navigation">
 <ul class="navbar-nav">
 <li class="nav-item">
 <a class="nav-link" href="#">Home</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">About</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">Contact</a>
 </li>
 </ul>
 </div>
</nav>

Algunas explicaciones sobre el código:

  • navbar-expand-md: Esto denota en qué punto la barra de navegación se expande desde un icono vertical o de hamburguesa a una barra horizontal de tamaño completo. En este caso, lo hemos configurado en pantallas medianas que, en Bootstrap, es cualquier cosa mayor que 768px.
  • navbar-brand: Esto se utiliza para la marca de tu sitio web. También puedes incluir un archivo de imagen o logotipo aquí.
  • navbar-toggler: Denota el botón de conmutación para el menú colapsado. La pieza data-toggle=»collapse» define que esto se convertirá en un menú de hamburguesas, no en un menú desplegable, que es la otra opción. Es importante que definas un objetivo de datos con un identificador de CSS (definido por el signo #) y envolver un div con el mismo nombre alrededor del elemento real de la barra de navegación.
  • navbar-toggler-icon: Como probablemente puedes adivinar, esto crea el icono en el que los usuarios hacen clic para abrir el menú en pantallas más pequeñas.
  • navbar-nav: La clase para el elemento de la lista <ul> que contiene los elementos del menú. Estos últimos se indican con nav-item y nav-link.

¿Por qué estoy explicando tanto esto? Porque ese es el objetivo de Bootstrap.

Tienes todos estos estándares que le permiten crear rápidamente elementos con algunas clases HTML y CSS. No es necesario escribir ningún CSS para proporcionar estilo, todo ya está configurado en Bootstrap.

Además, todo es móvil y responde desde el primer momento ¿Empiezas a ver lo útil que es esto?

Lo anterior es suficiente para añadir una barra de navegación a su sitio. Sin embargo, por el momento, todavía parece muy poco, pues se ve así:

bootstrap tutorial add navigation bar

Eso es porque no tiene mucho estilo. Si bien es posible añadir colores por defecto (por ejemplo, dando a la barra de navegación una clase como bg-dark navbar-dark), en su lugar queremos añadir los nuestros propios.

2. Incluir CSS personalizado

Afortunadamente, si deseas cambiar el estilo predeterminado, no tienes que vadear una gran biblioteca de hojas de estilo y hacer los cambios a mano.

En cambio, al igual que con un tema hijo de WordPress, puedes añadir tus propios archivos CSS que puedes usar para sobreescribir el estilo existente.

Para ello, simplemente crea un archivo en blanco con su editor de texto y llámalo main.css.

Guárdalo, y luego añádelo a la sección principal de tu sitio Bootstrap así:

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

Este es el código para una hoja de estilo que reside en el directorio principal. Si decides colocar tu nombre dentro de la carpeta css, asegúrate de incluir la ruta correcta en el enlace.

Desde aquí, puedes agregar CSS personalizado a tu sitio. Por ejemplo, para cambiar el estilo de la barra de navegación y sus elementos, puedes utilizar marcas como esta:

body {
 padding: 0;
 margin: 0;
 background: #f2f6e9;
}

/*--- navigation bar ---*/

.navbar {
 background:#6ab446;
}

.nav-link,
.navbar-brand {
 color: #fff;
 cursor: pointer;
}

.nav-link {
 margin-right: 1em !important;
}

.nav-link:hover {
 color: #000;
}

.navbar-collapse {
 justify-content: flex-end;
}

Y aquí puedes ver el resultado:

bootstrap tutorial style navigation bar

Se ve mejor que antes, ¿no?

3. Crear un Contenedor de Contenido de Página

Después de la barra de navegación, lo siguiente que deseas es un contenedor para el contenido de la página.

Esto es muy fácil en Bootstrap ya que todo lo que necesitas para ello es esto debajo de la etiqueta navbar:

<header class="page-header header container-fluid">

</header>

Notas la clase container-fluid. Esta es otra de esas clases por defecto de Bootstrap. Aplicándolo al elemento div, se incorpora automáticamente un montón de CSS a él.

La parte de fluid se encarga de que el contenedor se estire a lo largo de todo el ancho de la pantalla. También está el contenedor, al que se le han aplicado anchos fijos, por lo que siempre habrá espacio a ambos lados de la pantalla.

Sin embargo, si ahora recargas la página, no verás nada (a menos que uses las herramientas para desarrolladores). Esto se debe a que sólo has creado un elemento HTML vacío.

Esto empezará a cambiar ahora.

4. Incorporar una imagen de fondo y JavaScript personalizado

Como siguiente paso en este tutorial de Bootstrap, queremos incluir una imagen de fondo a pantalla completa para el encabezado de nuestra página de aterrizaje o landing page.

Para ello, tendremos que usar algo de jQuery para hacer que la imagen se extienda hasta el final de la pantalla.

Hazlo de la misma manera que incluyes CSS personalizado. Primero, crea un archivo de texto con el nombre main.js y colócalo dentro de la carpeta de tu sitio.

Luego, llámalo antes de la etiqueta de cierre </body> dentro de index.html.

<script src="main.js"></script>

Después de eso, puedes copiar y pegar este trozo de código para hacer que el elemento <header> se extienda a lo largo de toda la pantalla:

$(document).ready(function(){
 $('.header').height($(window).height());
})

Entonces, lo único que queda es establecer una imagen de fondo. Puedes hacer esto así dentro de main.css:

.header {
 background-image: url('images/header-background.jpg');
 background-size: cover;
 background-position: center;
 position: relative;
}

Si colocas una imagen de tamaño suficiente en la ubicación especificada por la ruta anterior, obtendrás un resultado similar a éste:

bootstrap tutorial include header background image

5. Agregar una sobreimpresión

Para que la imagen de fondo sea más elegante, también añadiremos una sobreimpresión. Para ello, crea otro elemento div dentro del que acabas de incluir.

<div class="overlay"></div>

Entonces, puedes añadir lo siguiente en tu archivo CSS personalizado:

.overlay {
 position: absolute;
 min-height: 100%;
 min-width: 100%;
 left: 0;
 top: 0;
 background: rgba(0, 0, 0, 0.6);
}

Esto creará esta bonita sobreimpresión para la imagen que has introducido anteriormente:

bootstrap tutorial add overlay

6. Incluir un título de página y un cuerpo de texto

Ahora, es probable que desees añadir un título en forma de encabezado más algún texto del cuerpo, para que tus visitantes sepan inmediatamente en qué sitio se encuentran se encuentran y qué pueden esperar de él.

Para crearlos, simplemente añade este fragmento dentro del contenedor que has configurado en el último paso, debajo de la sobreimpresión:

<div class="description">
 <h1>Welcome to the Landing Page!</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis. Suspendisse consectetur mi id libero fringilla, in pharetra sem ullamcorper.</p>
</div>

Después de eso, agrega la siguiente marcación a main.css:

.description {
 left: 50%;
 position: absolute;
 top: 45%;
 transform: translate(-50%, -55%);
 text-align: center;
}

.description h1 {
 color: #6ab446;
}

.description p {
 color: #fff;
 font-size: 1.3rem;
 line-height: 1.5;
}

Cuando lo hagas, la página de destino se verá así:

bootstrap tutorial add page title and description

Está empezando a funcionar, ¿no?

7. Crear un botón CTA

Ninguna página de aterrizaje o landing page está completa sin una llamada a la acción, la mayoría de las veces en forma de un botón. Por esa razón, sería un error no incluir cómo crear un botón de este tipo en este tutorial de Bootstrap.

Bootstrap ofrece muchas herramientas para crear botones de forma rápida y sencilla. Puedes encontrar muchos ejemplos.

En este caso, añade la siguiente marca justo debajo del contenido de la página dentro del contenedor:

<button class="btn btn-outline-secondary btn-lg">Tell Me More!</button>

Además de eso, añade este CSS a main.css:

.description button {
 border:1px solid #6ab446;
 background:#6ab446;
 border-radius: 0;
 color:#fff;
}

.description button:hover {
 border:1px solid #fff;
 background:#fff;
 color:#000;
}

Después de guardar y recargar, se verá así:

bootstrap tutorial add call to action button

8. Configurar una sección de tres columnas

Ya estarás bastante satisfecho con la evolución de la página. Sin embargo, aún no hemos terminado.

A continuación, vamos a crear tres columnas debajo del contenido principal para obtener información adicional.

Esta es una especialidad de Bootstrap, ya que juega con su fortaleza: crear una rejilla.

Así se hace en este caso:

<div class="container features">
 <div class="row">
 <div class="col-lg-4 col-md-4 col-sm-12">
 <h3 class="feature-title">Lorem ipsum</h3>
 <img src="images/column-1.jpg" class="img-fluid">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
 </div>
 <div class="col-lg-4 col-md-4 col-sm-12">
 <h3 class="feature-title">Lorem ipsum</h3>
 <img src="images/column-2.jpg" class="img-fluid">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
 </div>
 <div class="col-lg-4 col-md-4 col-sm-12"> 
 </div>
 </div> 
</div>

Lo primero que notarás es el elemento row o fila, que es necesario cuando se crean columnas para que actúen como un contenedor para la cuadrícula.

En cuanto a las columnas, todas tienen varias clases: col-lg-4, col-md-4 y col-sm-12, indicando que se trata de columns o columnas y el tamaño que tendrán en las diferentes pantallas.

Para entender esto, necesitas saber que, en una cuadrícula de Bootstrap, todas las columnas de una fila siempre suman el número 12.

Por lo tanto, darles las clases anteriores significa que ocuparán un tercio de la pantalla en pantallas grandes y medianas (12 dividido por 3 es 4), pero la pantalla completa en dispositivos pequeños (12 de 12 columnas). Tiene sentido, ¿no?

También notarás que hemos incluido imágenes y añadido la clase .image-fluid a las mismas. Esto es para que respondan de manera que puedan escalar junto con la pantalla en la que se ve la página.

Además de eso, tienes el siguiente estilo incluido en el lugar habitual:

.features {
 margin: 4em auto;
 padding: 1em;
 position: relative;
}

.feature-title {
 color: #333;
 font-size: 1.3rem;
 font-weight: 700;
 margin-bottom: 20px;
 text-transform: uppercase;
}

.features img {
 -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
 -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
 box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
 margin-bottom: 16px;
}

Cuando se agrega debajo del contenido principal y se guarda, se ve así:

bootstrap tutorial add three column section

9. Añadir un formulario de contacto

Habrás observado que uno de los nuevos campos sigue vacío. Esto es porque queremos añadirle un formulario de contacto.

Esta es una práctica muy normal en las páginas de destino para permitir que los visitantes se pongan en contacto.

Crear un formulario de contacto en Bootstrap es muy fácil:

<h3 class="feature-title">Get in Touch!</h3>
<div class="form-group">
 <input type="text" class="form-control" placeholder="Name" name="">
</div>
<div class="form-group">
 <input type="email" class="form-control" placeholder="Email Address" name="email">
</div>
<div class="form-group">
 <textarea class="form-control" rows="4"></textarea>
</div>
<input type="submit" class="btn btn-secondary btn-block" value="Send" name="">

En este momento, ya no debería tener que explicar la marcación para crear columnas. Esto es lo que significa el resto:

  • form-group – Se usa para envolver los campos de formulario.
  • form-control – Denota campos de formulario como entradas, áreas de texto, etc.

Hay mucho más que puedes hacer con los formularios, puedes encontrarlo en la documentación.

Sin embargo, para fines demostrativos, lo anterior es suficiente. Colócalo dentro de la columna que queda vacía y luego añade este estilo en main.css:

.features .form-control,
.features input {
 border-radius: 0;
}

.features .btn {
 background-color: #589b37;
 border: 1px solid #589b37;
 color: #fff;
 margin-top: 20px;
}

.features .btn:hover {
 background-color: #333;
 border: 1px solid #333;
}

Cuando lo hayas hecho, obtendrás un formulario como este:

bootstrap tutorial include contact form

10. Crear un pie de página de dos columnas

Estamos llegando al final del tutorial de Bootstrap. Lo último que has de añadir a tu página es una sección de pie de página con dos columnas.

A estas alturas, esto ya no debería ser un gran problema para ti:

<footer class="page-footer">
 <div class="container">
 <div class="row">
 <div class="col-lg-8 col-md-8 col-sm-12">
 <h6 class="text-uppercase font-weight-bold">Additional Information</h6>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
 </div>
 <div class="col-lg-4 col-md-4 col-sm-12">
 <h6 class="text-uppercase font-weight-bold">Contact</h6>
 <p>1640 Riverside Drive, Hill Valley, California
 <br/>info@mywebsite.com
 <br/>+ 01 234 567 88
 <br/>+ 01 234 567 89</p>
 </div>
 </div>
 <div class="footer-copyright text-center"2019 Copyright: MyWebsite.com</div>
</footer>

Además del marcado habitual de la cuadrícula, esta sección destaca algunas posibilidades para modificar la tipografía con Bootstrap:

  • text-uppercase – Texto en mayúscula
  • font-weight-bold – Fuente en negrita
  • text-center – Texto centrado

Además de lo anterior, puedes utilizar un estilo como el siguiente:

.page-footer {
 background-color: #222;
 color: #ccc;
 padding: 60px 0 30px;
}

.footer-copyright {
 color: #666;
 padding: 40px 0;
}

Esto resulta en un hermoso pie de página que se ve así:

bootstrap tutorial include page footer

11. Agregar consultas de medios

La página ya está lista y es plenamente adaptativa. Sin embargo, en la vista móvil del navegador, la sección superior aún no salide bien.

bootstrap tutorial error on mobile design

No te preocupes, puedes corregir esto fácilmente con una simple consulta de medios o media queries.

A menos que estés usando SASS para compilar tu sitio Bootstrap, esto funciona de la misma manera que en otros casos, sólo hay que tener en cuenta los puntos de ruptura preestablecidos incluidos en el Bootstrap.

Como consecuencia, para corregir el problema anterior, puedes simplemente incluir un fragmento de código como este:

@media (max-width: 575.98px) {

 .description {
 left: 0;
 padding: 0 15px;
 position: absolute;
 top: 10%;
 transform: none;
 text-align: center;
}

 .description h1 {
 font-size: 2em;
}

 .description p {
 font-size: 1.2rem;
}

 .features {
 margin: 0;
}

}

Después de eso, todo es como debe ser:

bootstrap tutorial add media query

13. Poner todo en orden

Si has seguido el proceso, ahora deberías tener configurada una página muy similar a la que se muestra a continuación.

bootstrap tutorial finished landing page

Se ve genial, ¿no? Además, también funciona en móviles y es completamente adapatativo.

No está mal para unas pocas líneas de código, ¿verdad?

Con esto, tienes todo lo que necesitas para crear una landing page con Bootstrap.

Conclusión

Bootstrap es un framework o marco de trabajo para el desarrollo de código abierto y front-end que cualquiera puede utilizar de forma gratuita.

Te permite crear rápidamente prototipos de diseño, crear páginas web y, en general, empezar a trabajar.

Como has visto en este tutorial de Bootstrap para principiantes, sólo necesitas conocimientos básicos de HTML, CSS y algunos jQuery opcionales. Aunque no es tan cómodo como usar WordPress, Bootstrap sigue siendo una alternativa válida para crear un sitio web.

A estas alturas, ya sabes cómo instalar y configurar Bootstrap y sus componentes, crear una página de aterrizaje sencilla que incluye algo de contenido básico y darle estilo.

Ahora puedes crear menús de navegación, establecer imágenes de fondo, incluir botones, columnas y formularios de contacto. Por supuesto, hay mucho más que aprender.

Gracias a este tutorial básico de Bootstrap, ya sabes lo suficiente como para seguir adelante por ti mismo. Si deseas profundizar en este marco de trabajo, un buen punto de partida es W3Schools.

Esperamos que te haya gustado este tutorial para principiantes y nos gustaría saber cómo pones en práctica tus conocimientos.

¿Tienes preguntas, comentarios, peticiones? Háznoslo saber en la sección de comentarios a continuación.