Saltar al contenido

Tutorial de Bootstrap para WordPress

Tutorial de Bootstrap para WordPress
5 (100%) 4 votes

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

En resumen, si necesitas un sitio web, puedes encontrar un método para crearlo y en este tutorial de bootstrap para principiantes, aprenderás uno más.

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

Desarrollado por primera vez por Twitter, Bootstrap ya se utiliza para cualquier cosa, desde el desarrollo de aplicaciones web hasta temas de WordPress.

También es completamente libre, versátil e intuitivo.

Suficiente razón para que escribamos un tutorial detallado de Bootstrap que le enseñe todo lo que necesita saber.

A continuación, aprenderá qué es Bootstrap, cómo configurarlo y construir una página de aterrizaje 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 por ti mismo.

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

La primera parte de cada tutorial para principiantes de Bootstrap necesita hablar sobre lo que 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 de la empresa lo han reunido 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 sido testigo de 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 de primer 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 mencionó en la introducción, Bootstrap es un marco para el desarrollo de front-end.

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

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 para los sitios web.

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

De esta manera, puede 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á seguro de cómo le ayuda esto, no se preocupe, los siguientes ejemplos lo aclararán.

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

Todo lo que necesitas es una comprensión básica de HTML y CSS para crear que sean sensibles, móviles primero y compatibles con todos los navegadores modernos.

¿Todo despejado 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: cargarlo remotamente o 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 debe hacer es crear una carpeta en su ordenador o servidor para los archivos de proyecto. En este caso, simplemente lo llamaré bootstrap.

Aquí, cree un nuevo archivo de texto y llámelo 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.
<!
D
OCTYPE html> <html lang=N- <head> <title>Bootstrap Tutorial Tutorial Sample Page</title> <meta charset=”utf-8″> < <meta charset
m
eta name=”viewport” content=”width=device-width, initial-scale=1″> </head> <body> </body> </html> ¡No olvides guardar tu
archivo antes de seguir adelante!

2a. Cargar Bootstrap a través de CDN

Como ya se ha explicado, Bootstrap consiste principalmente en hojas de estilo y guiones. Como tal, pueden ser cargados en el encabezado y pie de página de su página web como otros activos tales como fuentes personalizadas. El marco ofrece una ruta de acceso CDN (red de entrega de contenido) para ello. Puede encontrarla en la página de descargas de Bootstrap, más abajo.

Para poner Bootstrap en tu página, simplemente pega el código de abajo en la sección <head> de tu plantilla. <link
rel=”hoja de estilos” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.
c

uando guarde el archivo, cualquier navegador que lo abra 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 su 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. Esto es lo que estoy haciendo para este tutorial porque también resulta en menos código para publicar.

2b. Anfitrión Bootstrap Localmente

Una forma alternativa de configurar Bootstrap es descargarlo a su 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úrese de obtener los archivos CSS y JS compilados. No necesitas los archivos fuente.

Una vez hecho esto, descomprima el archivo y copie su contenido en el mismo directorio que index.html. Después de eso, puede cargar el CSS de Bootstrap en su proyecto de la siguiente manera
:<link rel=”hoja de estilos” href=”bootstrap/css/bootstrap.min.css”>
Notará que esto incluye la ruta de archivo en la que se encuentra el archivo de Bootstrap. En su caso, asegúrese de que su ruta corresponde a su configuración real. Por ejemplo, los nombres de los directorios pueden diferir si ha descargado una versión diferente de Bootstrap.

3. Incluir jQuery

Para obtener la funcionalidad completa de Bootstrap, también necesita cargar la biblioteca jQuery. Aquí, también, tienes que tener la posibilidad de cargarlo remotamente o alojarlo localmente.

En el primer caso, encontrará el enlace a la última versión de jQuery aquí. Puedes usarlo para cargar la librería en tu página poniendo la línea de código debajo justo antes de donde dice </body> en tu página. <script
src=”https://code.jquery.com/jquery-3.3.1.slim.min.
j
s” integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=”anonymous=”>/script> Alternativamente
, descargue jQuery, descomprima y colóquelo en la carpeta del proyecto. Luego, inclúyalo en el mismo lugar de su archivo de esta manera:<script
src=”jquery-3.3.1.1.min.js;></script> Una vez más, asegúrese
de que la ruta corresponde a su configuración.

4. Cargar Javascript de arranque

El último paso para configurar Bootstrap es cargar la biblioteca JavaScript de Bootstrap. Éstos se incluyen en la versión descargada del marco de trabajo y también encontrará enlaces a fuentes remotas en el mismo lugar que antes. Sin embargo, lo cargaremos en un lugar diferente al de la hoja de estilo. En lugar del encabezado, va 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.
j
s” integrity=”sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy” crossorigin=”anonymous=”>script> O
localmente como así:<script src==
“bootstrap/js/bootstrap.min.js.js!>script>> script

5. Poniendo todo junto

Si ha seguido los pasos anteriores correctamente, debería terminar con un archivo como este para la solución remota
:<!
D
OCTYPE html> <html lang=”en”> <head> <title>Bootstrap Tutorial Tutorial Sample Page</title> <meta charset=”utf-8″> <meta name=”viewport=”>contenido=”width=device-width, initial-scale=1=1″> <link rel=”/”stylesheet=” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.
1
.3/css/bootstrap.min.css” integrity=”sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO” crossorigin==”anonymous=”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.
j
s” integrity=”sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy” crossorigin=”anonymous”></script> </body> </html> Alternativamente, si usted
está hospedando localmente, su plantilla de página debe parecerse al código de abajo:<!

D

OCTYPE html> <html lang=”en”> <head> <title>Bootstrap Tutorial Tutorial Sample Page</title> <meta charset=”utf-8″> <meta name=”viewport=”>contenido=”width=device-width, initial-scale=1=1″> <link rel=”stylesheet=” href=”bootstrap/css/bootstrap.

m

in.css”> </head> <body> <script src=”jquery-3.3.1.1.min.js”></script> <script src=”bootstrap/js/bootstrap.min.js.></script> </body> </html> Si eso es lo que tiene y ha guardado su trabajo,
ya está listo para pasar al siguiente paso.

Tutorial de Bootstrap Paso #3: Diseñe su página de aterrizaje

De acuerdo, eso fue, sin duda, mucho trabajo de preparación. Sin embargo, no fue muy difícil, ¿verdad? Además, ahora comienza la diversión.

Por el momento, cuando navegue a su sitio de muestra, simplemente debería 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 sus visitantes moverse por su sitio y descubrir el resto de sus 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>:
<DIFUNDE LA PALABRA-NUEVO –

<DIFUNDE LA PALABRA-ESPAÑOLA-ESPAÑOLLA-ESPAÑOLA
w
Ww.Subs-Team.Tv P r e s e n t e n t a.
A
bout</a> </li> <li class=”nav-item”> <a class=”nav-link” href=”>Contact</a> </li> </ul> </div> </nav> Alguna explicación del 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 su sitio web. También puede incluir un archivo de imagen del 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 defina 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 puede 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. Usted tiene 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 ¿Empieza 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.

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 desea cambiar el estilo predeterminado, no tiene 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 cree un archivo en blanco con su editor de texto y llámelo 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í, usted puede agregar CSS personalizado a su sitio. Por ejemplo, para cambiar el estilo de la barra de navegación y sus elementos, puede utilizar marcas como esta
:body { relleno: 0; margen: 0; fondo: #f2f6e9; } /*— barra de navegación —*/ .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í está 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 desea 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> Note la
clase container-fluid. Esta es otra de esas clases por defecto de Bootstrap. Aplicándolo al elemento div aplica automáticamente un montón de CSS a él.

La parte de fluido 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 ha creado un elemento HTML vacío. Esto empezará a cambiar ahora.

4. 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.

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

Hágalo de la misma manera que incluye CSS personalizado. Primero, cree un archivo de texto con el nombre main.js y colóquelo dentro de la carpeta de su sitio.

Luego, llámalo antes del cierre </body> tag inside 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 en realidad es establecer una imagen de fondo. Puede hacer esto así dentro de main.css:
.header { background-image: url(‘images/header-background.jpg’); background-size: cover; background-position: center; position: relative; }Si
coloca una imagen de tamaño suficiente en la ubicación especificada por la ruta anterior, obtendrá 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, creará otro elemento div dentro del que acaba de incluir anteriormente.
<div class==”overlayN- Entonces,
puede añadir lo siguiente en su archivo CSS personalizado:.overlay {
posición: absoluta; mín-altura: 100%; mín-ancho: 100%; izquierda: 0; superior: 0; fondo: rgba(0, 0, 0, 0, 0.6); }Esto
creará esta bonita sobreimpresión para la imagen que introdujo anteriormente:

bootstrap tutorial add overlay

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

Ahora es probable que desee añadir un título de página en forma de encabezado más algún texto del cuerpo. De esta manera, sus visitantes sabrán inmediatamente en qué sitio se encuentran y qué pueden esperar de él.

Para crearlos, simplemente añada este fragmento dentro del contenedor que configuró 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,
agregue la siguiente marcación a main.css..description {
izquierda: 50%; posición: absoluta; top: 45%; transformar: traducir(-50%, -55%); texto-alinear: centro; } .descripción h1 { color: #6ab446; } .description p { color: #fff; tamaño de fuente: 1.3rem; altura de línea: 1.5; }Cuando
lo haga, 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 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 uno en este tutorial de Bootstrap.

El marco ofrece muchas herramientas para crear botones de forma rápida y sencilla. Puedes encontrar muchos ejemplos aquí. En mi caso, añado la siguiente marca de revisión justo debajo del contenido de la página dentro del contenedor:<button
class=”btn btn-outline-secondary btn- btn-lg”>Tell Me More!</button> Además de
eso, añado este CSS a main.

c

ss:
.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 ve así:

bootstrap tutorial add call to action button

8. Configurar una sección de tres columnas

Ya estoy bastante satisfecho con la evolución de las cosas.

Sin embargo, aún no hemos terminado con la página.

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

Esta es una especialidad de Bootstrap ya que juega con su fuerza: 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″>Lorem <h3 class=”>Lorem ipsum</h3> <img src=”images/column-1″.
j
pg” 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.
j
pg” 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> </div> Lo primero que notará es
el elemento fila. Esto 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. Éstas indican que se trata de columnas y el tamaño que tendrán en las diferentes pantallas.

Para entender esto, usted necesita 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á que he 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; acolchado: 1em; posición: relativa; } .feature-title { color: #333; tamaño de fuente: 1.3rem; peso de fuente: 700; margen-inferior: 20px; texto-transformado: mayúsculas; }.features img { -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0, 0.
4
); -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0, 0.4); box-shadow: 1px 1px 4px 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

Observará que uno de los nuevos campos sigue vacío. Esto fue a propósito porque queremos añadirle un formulario de contacto. Esta es una práctica muy normal para 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;>Ponerse en contacto!</Subtítulos por aRGENTeaM

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

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

Hay mucho más que puede hacer con los formularios, que puede encontrar en la documentación. Sin embargo, para fines de demostración, 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; frontera: 1px sólido #589b37; color: #fff; margin-top: 20px; } .features .btn:hover { color de fondo: #333; frontera: 1px sólido #333; }Cuando
lo haces, obtienes un formulario como este:

bootstrap tutorial include contact form

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

Muy bien, ahora estamos llegando al final del tutorial de Bootstrap. Lo último que quiere añadir a su página de aterrizaje 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.
<pie class=”page-footer class=”> <div class=”container=”> <div class=”col-lg-8 col-md-8 col-sm-12″> <div class=”col-lg-8 col-md-8 col-sm-12=”>Text-uppercase font-weight-bold=”>Información Adicional <p>Lorem ipsum 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-12N”> <h6 class=”text-uppercase font-weight-bold”>Contacto </h6> <p>1640 Riverside Drive, Hill Valley, California
b
r/>[email protected] <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:

  • texto en mayúsculas
  • fuente-peso-negrita
  • centro de texto

Debería estar bastante claro por los nombres de las clases lo que hacen. Puedes encontrar más información sobre Bootstrap y tipografía aquí.

Además de lo anterior, puede utilizar un estilo como el siguiente:
.page-footer { color de fondo: #222; color: #ccc; relleno: 60px 0 30px; } .footer-copyright { color: #666; acolchado: 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. También es plenamente responsable. Sin embargo, en la vista móvil del navegador, la sección superior aún no ha salido bien.

bootstrap tutorial error on mobile design

Sin embargo, no se preocupe, usted puede corregir eso fácilmente con una simple consulta de los medios de comunicación. A menos que estés usando SASS para compilar tu sitio Bootstrap, estos funcionan 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, puede simplemente incluir un fragmento de código como este
:@media (ancho máximo: 575.98px) {.description { left: 0; padding: 0 15px; posición: absoluta; superior: 10%; transformar: ninguno; text-align: centro; } .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. Ponerlo todo en orden

Si usted ha estado siguiendo el proceso, ahora debería estar configurado con 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 receptivo.

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

Con esto, tienes todo lo que necesitas para crear una página de aterrizaje con Bootstrap.

Conclusión

Bootstrap es un framework de desarrollo de código abierto y front-end que cualquiera puede utilizar de forma gratuita. Le permite crear rápidamente prototipos de diseños, crear páginas web y, en general, empezar a trabajar.

Como has visto en este tutorial de Bootstrap para principiantes, sólo necesita 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 configurar e instalar Bootstrap y sus componentes, crear una página de aterrizaje sencilla que incluya algo de contenido básico y darle estilo. Puede crear menús de navegación, establecer imágenes de fondo, incluir botones, columnas y formularios de contacto.

Por supuesto, hay más que aprender. Gracias a este tutorial básico de Bootstrap, ya sabes lo suficiente como para seguir adelante por ti mismo. Si desea profundizar en el marco, un buen punto de partida es W3Schools. Aparte de eso, esperamos que le haya gustado este tutorial para principiantes y le gustaría saber de usted.

¿Tienes alguna idea sobre el tutorial de Bootstrap de arriba? ¿Preguntas, comentarios, peticiones? Háganoslo saber en la sección de comentarios a continuación!