Tutorial de Bootstrap para WordPress
Hay muchas maneras diferentes de edificar un lugar web. Desde Wordpress, Joomla!, Drupal Trademark y otros autores 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 bien
frameworkde
front-endque te ayuda a crear sitios web más rápida y fácilmente.
Desarrollado en un principio por Twitter, Bootstrap ya se emplea para muchas cosas,
desde el desarrollo de aplicaciones web hasta temas de WordPress.
Es totalmente libre, versátil y también intuitivo.
Razones suficientes a fin de 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 bien
landing pagesencillapara un sitio paso a paso.
Al final, deseamos que tengas un conocimiento básico de cómo usar Bootstrap a fin de que puedas continuar aprendiendo.
Tutorial de Bootstrap Paso 1: ¿Qué es Bootstrap?
La primera una parte de este tutorial para principiantes se concentra en
saber precisamente 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 asistir 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 ciertos desarrolladores originales como de un enorme grupo de colaboradores.
Ha pasado por múltiples actualizaciones importantes durante los años (la última, Bootstrap 4, en el mes de enero de 2018) que, entre otras cosas,
han añadido su conocido sistema de cuadrícula, diseño plano, un enfoque para móvil y CSS moderno.
Por ahora, el
framework
se halla entre las herramientas de desarrollo web más populares de la red.
Entre otras cosas, se ha transformado en el segundo proyecto más señalado 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 bien
frameworkpara el desarrollo
front-end
.
No te preocupes si no sabes lo que eso significa, tampoco lo sabía cuando empecé a armar este artículo.
En la programación de ordenadores,
un
frameworkes algo así como una biblioteca. Contiene herramientas, piezas y funciones existentes que se pueden usar para realizar labores estándar de forma más rápida y fácil.
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 componentesque se precisan habitualmente en los sitios web.
Bootstrap te ayuda a configurarlos ofertando
un gran número de clases de CSS que puedes aplicar fácilmente a elementos HTMLpara crear los componentes del lugar que precisas.
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 jQueryque pueden administrar 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 CSSpara crear sitios adaptables a móviles y compatibles con todos los navegadores modernos.
¿Todo bastante claro hasta el momento? Entonces veamos cómo marcha exactamente.
Tutorial de Bootstrap Paso 2: Configuración y descripción general
Para usar Bootstrap,
primero necesitas integrarlo en tu ambiente de desarrollo, también conocido como página web.
Para ello,
tienes 2 posibilidades diferentes:
- Cargarlo remotamente, o
- Descargarlo y emplear Bootstrap de forma local.
Sin embargo, para ambos,
primero necesitas algo en lo que cargarlo.
1. Crear una página HTML
Como diseño web murcia ,
crearemos una plantilla HTML simple, como base donde usaremos Bootstrap.
Para ello, lo primero que debes hacer es
crear una carpetita en tu computador o bien servidorpara los archivos de proyecto. En este caso, sencillamente 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 poner un ejemplo, Bloc de notas++ o bien Texto sublime) y luego pega el código de abajo en él:
¡No olvides guardar tu fichero ya antes de proseguir adelante!
2-a. Cargar Bootstrap a través de CDN
Como ya hemos explicado, Bootstrap
consiste principalmente en hojas de estilo o
style sheetsy
scripts
.
Como tal,
puedes cargarlos en el encabezado y pie de página de tu página webcomo otros activos tales como fuentes personalizadas.
El marco de trabajo o bien
frameworkofrece una ruta de acceso CDN (red de entrega de contenido o
content delivery network) para esto.
Puedes localizarla en la página de descargas de Bootstrap.
Para poner Bootstrap en tu página, sencillamente
pega el código de abajo en la sección <head> de tu plantilla.
Cuando guardes el fichero,
cualquier navegador en que lo abras cargará automáticamente los activos de Bootstrap.
Usar el método recóndito es una gran idea,ya que muchos usuarios ya tienen el
frameworken 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 probar y desarrollar, o bien si quieres ser independiente de una conexión a Internet,
también puedes conseguir tu propia copia de Bootstrap.
2-b. Alojar Bootstrap Localmente
Una forma alternativa de
configurar Bootstrap es descargarlo a tu disco duroy emplear los archivos localmente.
Las opciones de descarga se encuentran en exactamente el mismo sitio que los enlaces a la versión remota.
Aquí,
asegúrate de obtener los archivos CSS y JS compilados. No precisas los archivos fuente.
Una vez hecho esto,
descomprime el archivo y copia su contenido en exactamente el mismo directorio que index.html.
Después de eso, puedes cargar el CSS de Bootstrap en su proyecto de la siguiente manera:
Notarás que
esto incluye la ruta del archivo en la que se halla 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 utilizarlo 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.
Alternativamente,
puedes descargar jQuery, descomprimilo y colocarlo en la carpetita del proyecto. Entonces, inclúyelo en el mismo sitio de tu archivo de esta manera:
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 Bootstrapy también encontrarás links a fuentes remotas en exactamente el mismo lugar que ya antes.
Sin embargo,
lo vamos a cargar en un sitio diferente al de la hoja de estilo o bien
style
. En vez del encabezado, ve al pie de página, justo después de la llamada a jQuery.
Puedes llamarlo remotamente así:
O también localmente como:
5. Poniendo esto todo junto
Si ha seguido los pasos precedentes apropiadamente,
debería terminar con un fichero como este para la solución remota:
Alternativamente,
si estás hospedando Bootstrap localmente, tu plantilla de página debe parecerse al código de abajo:
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 empieza 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 deseamos hacer es añadir una barra de navegación en la parte superior de la página.
Esto deja a tus visitantes moverse por tu lugar 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>:
Algunas explicaciones sobre el código:
navbar-expand-md:Esto indica 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 un caso así, 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. También puedes incluir un fichero de imagen o bien 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 fin de datos con un
identificador de CSS (definido por el signo #)y envolver un
divcon exactamente 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-itemy
nav-link.
¿Por qué estoy explicando tanto esto?Porque ese es el propósito de Bootstrap.
Tienes todos estos estándares que le dejan crear rápidamente elementos con ciertas clases HTML y CSS.
No es preciso redactar 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?
< marketing digital monterrey para añadir una barra de navegación a su sitio. No obstante, por el momento, todavía semeja muy poco, pues se ve así:
Eso es por el hecho de que no tiene mucho estilo. Si bien
es posible añadir colores por defecto(por servirnos de un ejemplo, dando a la barra de navegación una clase como
bg-dark navbar-dark), en su lugar deseamos añadir los nuestros.
2. Incluir CSS personalizado
Afortunadamente, si quieres mudar el estilo predeterminado,
no tienes que franquear una gran biblioteca de hojas de estilo y hacer los cambios a mano.
En cambio, de la misma forma que con un tema hijo de WordPress,
puedes añadir tus propios ficheros CSS que puedes emplear para sobrescribir el estilo existente.
Para ello, sencillamente
crea un fichero en blanco con su editor de texto y llámalo main.css.
Guárdalo, y después añádelo a la sección primordial de tu sitio Bootstrap así:
Este es el código para una hoja de estilo que radica en el directorio primordial.
Si decides poner tu nombre dentro de la carpeta css, asegúrate de incluir la senda correcta en el enlace.
Desde aquí,
puedes añadir 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:
Y aquí puedes ver el resultado:
Se ve mejor que ya antes, ¿no?
3. Crear un Contenedor de Contenido de Página
Después de la barra de navegación,
lo siguiente que quieres es un contenedor para el contenido de la página.
Esto es muy fácil en Bootstrap ya que todo lo que precisas para esto es
esto bajo la etiqueta navbar:
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 una parte de
fluidse 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, con 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 utilices las herramientas para desarrolladores). Esto se debe a que sólo has creado un elemento HTML vacío.
Esto empezará a cambiar ahora.
4. Añadir una imagen de fondo y JavaScript personalizado
Como siguiente paso en este tutorial de Bootstrap, deseamos
incluir una imagen de fondo a pantalla completa para el encabezado de nuestra página de aterrizaje o
landing page
.
Para ello,
tendremos que emplear algo de jQuerypara hacer que la imagen se extienda hasta el final de la pantalla.
Hazlo de igual modo que incluyes CSS personalizado. Primero, crea un fichero de texto con el nombre
main.jsy colócalo en la carpeta de tu sitio.
Luego, llámalo ya antes de la etiqueta de cierre </body> dentro de
index.html.
Después de eso,
puedes copiar y pegar este trozo de códigopara hacer que el factor <header> se extienda a lo largo de toda la pantalla:
Entonces,
lo único que queda es establecer una imagen de fondo. Puedes hacer esto así dentro de
main.css:
Si colocas una imagen de tamaño suficiente en la ubicación concretada por la ruta precedente,
obtendrás un resultado afín a éste:
5. Añadir una sobreimpresión
Para que la imagen de fondo sea más muy elegante,
también añadiremos una sobreimpresión. Para esto, crea otro elemento
divdentro del que acabas de incluir.
Entonces, puedes añadir lo siguiente en tu fichero CSS personalizado:
Esto creará esta bonita sobreimpresión para la imagen que has introducido anteriormente:
6. Incluir un título de página y un cuerpo de texto
Ahora, probablemente desees
añadir un título en forma de encabezado más algún texto del cuerpo, para que tus visitantes sepan de forma inmediata en qué lugar se hallan se encuentran y qué pueden esperar de él.
Para crearlos, sencillamente añade este fragmento en el contenedor que has configurado en el último paso, debajo de la sobreimpresión:
Después de eso, agrega la siguiente marcación a
main.css:
Cuando lo hagas,
la página de destino se verá así:
Está empezando a funcionar, ¿no?
7. Crear un botón CTA
Ninguna página de aterrizaje o bien
landing pageestá 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 fallo no incluir cómo crear un botón de esta clase en este tutorial de Bootstrap.
Bootstrap ofrece muchas herramientas para crear botones de forma rápida y sencilla. Puedes hallar muchos ejemplos.
En este caso, añade la siguiente marca justo bajo el contenido de la página en el contenedor:
Además de eso, añade este CSS a
main.css:
Después de guardar y recargar, se verá así:
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 3 columnas debajo del contenido principalpara obtener información auxiliar.
Esta es una especialidad de Bootstrap, en tanto que juega con su fortaleza: crear una reja.
Así se hace en este caso:
Lo primero que notarás es el elemento
row
o fila, que
es necesario cuando se crean columnas a fin de que actúen como un contenedor para la cuadrícula.
En cuanto a las columnas, todas tienen varias clases:
col-lg-4,
col-md-4y
col-sm-12, indicando que se trata de
columnso columnas y el tamaño que tendrán en las diferentes pantallas.
Para entender esto, necesitas saber que, en una cuadrícula de Bootstrap, t
odas las columnas de una fila siempre y en toda circunstancia suman el número 12.
Por lo tanto, darles las clases precedentes quiere decir que
ocuparán una tercera parte de la pantalla en pantallas grandes y medianas (doce dividido por 3 es 4), mas 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-fluida exactamente 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 sitio habitual:
Cuando
se agrega bajo el contenido primordial y se guarda, se ve así:
Habrás observado que uno de los nuevos campos sigue vacío. presupuesto para pagina web es porque
queremos añadirle un formulario de contacto.
Esta es una
práctica muy normal en las páginas de destino para dejar que los visitantes se pongan en contacto.
Crear un formulario de contacto en Bootstrap es muy fácil:
En este instante, ya no debería tener que explicar la marcación para crear columnas. Esto es lo que significa el resto:
form-group– Se emplea 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 localizarlo en la documentación.
Sin embargo, para fines demostrativos, lo anterior es suficiente. Colócalo dentro de la columna que queda vacía y después añade este estilo en
main.css:
Cuando lo hayas hecho,
obtendrás un formulario como este:
10. Crear un pie de página de 2 columnas
Estamos llegando al final del tutorial de Bootstrap.
Lo último que tienes que 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 enorme problema para ti:
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 emplear un estilo como el siguiente:
Esto resulta en
un hermoso pie de página que se ve así:
11. Añadir consultas de medios
La página ya está lista y es plenamente adaptativa. No obstante,
en la vista móvil del navegador, la sección superior aún no salide bien.
No te preocupes,
puedes corregir esto fácilmente con una simple consulta de medios o bien
media queries.
A menos que estés utilizando SASS para compilar tu lugar Bootstrap, esto marcha de la misma forma que en otros casos,
sólo hay que tomar en consideración los puntos de ruptura preestablecidos incluidos en el Bootstrap.
Como consecuencia, p
ara corregir el inconveniente anterior, puedes sencillamente incluir un fragmento de código como este:
Después de eso, todo es como debe ser:
13. Poner todo en orden
Si has seguido el proceso, ahora
deberías tener configurada una página muy afín a la que se muestra a continuación.
Se ve excelente, ¿no? Además,
también funciona en móviles y es absolutamente adapatativo.
No está mal para unas pocas líneas de código, ¿verdad?
Con esto,
tienes todo lo que necesitas para crear una
landing pagecon Bootstrap.
Conclusión
Bootstrap es un
frameworko marco de trabajo para el desarrollo de código abierto y
front-endque cualquiera puede usar de manera gratuita.
Te deja crear rápidamente prototipos de diseño, crear páginas web y, generalmente, comenzar a trabajar.
Como has visto en este tutorial de Bootstrap para principiantes,
sólo necesitas conocimientos básicos de HTML, CSS y ciertos jQuery opcionales. Aunque no es tan cómodo como utilizar WordPress, Bootstrap sigue siendo una opción alternativa válida para crear un sitio.
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 proseguir adelante por ti mismo. Si quieres 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, solicitudes?Háznoslo saber en la sección de comentarios a continuación.
