40 years old Motor Mechanic (General ) Rodrick from Happy Valley-Goose Bay, has lots of hobbies and interests which include jewellery, and fossils. Has travelled since childhood and has been to numerous spots, like Barcelona.

Hay muchas formas diferentes de edificar un sitio web. Desde WordPress, Joomla!, Drupal y otros creadores de sitios, 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 absolutamente libre, versátil y también intuitivo.

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

A continuación,
aprenderás qué es Bootstrap, cómo configurarlo y edificar una página de aterrizaje o bien
landing pagesencillapara un sitio paso a paso.

Al final, queremos 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 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 comprender cómo usarlo.

Un proyecto de código abierto

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

El proyecto siguió creciendo hasta que por último decidieron
lanzarlo al público para su empleo gratis en 2011.

Desde entonces, el apoyo a Bootstrap ha continuado tanto por la parte de ciertos desarrolladores originales como de un enorme conjunto de colaboradores.

Ha pasado por múltiples actualizaciones importantes a lo largo de los años (la última, Bootstrap 4, en el mes de enero de dos mil dieciocho) que, entre otras cosas,
han añadido su renombrado 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. diseño pagina web psicologo

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

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, yo 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 utilizar para realizar tareas estándar de forma más rápida y fácil.

En el caso de Bootstrap,
estas labores estándar son la creación de patrones de diseño como formularios, menús, columnas, botones y otros componentesque se necesitan con frecuencia 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 desde 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 próximos ejemplos lo aclararán.

Lo esencial 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 ahora? diseño web en santiago veamos cómo funciona precisamente.

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

Para emplear Bootstrap,
primero precisas 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 usar Bootstrap de forma local.

Sin embargo, para los dos,
primero precisas 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, la primera cosa que debes hacer es
crear una carpeta en tu PC o bien servidorpara los archivos de proyecto. En un caso así, simplemente lo llamaremos bootstrap.

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

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

¡No olvides guardar tu fichero 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 bien
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 adaptadas.

El marco de trabajo o bien
frameworkofrece una ruta de acceso CDN (red de entrega de contenido o bien
content delivery network) para esto.
Puedes hallarla 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.

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

Usar el método recóndito es una buena 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 lugar, 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 bien si deseas 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 duroy emplear los ficheros localmente.

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

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

Una vez hecho esto,
descomprime el fichero 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 de archivo en la que se encuentra el fichero 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 inmediatamente antes de donde dice </body> en tu página.

Alternativamente,
puedes descargar jQuery, descomprimilo y ponerlo en la carpetita del proyecto. Luego, inclúyelo en exactamente el mismo sitio de tu fichero 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 enlaces a fuentes recónditas en el mismo sitio que antes.

Sin embargo,
lo cargaremos en un lugar 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 correctamente,
debería terminar con un archivo 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 instante, cuando navega a tu lugar 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 manera 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 vamos a poner 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 bien 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 usa para la marca de tu sitio. También puedes incluir un archivo 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 el mismo nombre alrededor del elemento real de la barra de navegación.


• 
  navbar-toggler-icon:Como seguramente puedes adivinar, esto crea el icono en el que los usuarios hacen click 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 permiten 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. diseño tiendas online guadalajara

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

Lo precedente basta para añadir una barra de navegación a su sitio. No obstante, de momento, todavía semeja poquísimo, puesto que se ve así:

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 sitio queremos añadir los nuestros propios.

2. Incluir CSS personalizado

Afortunadamente, si deseas mudar el estilo predeterminado,
no tienes que vadear una enorme 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 ficheros CSS que puedes usar para sobreescribir el estilo existente.

Para ello, sencillamente
crea un fichero 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 lugar Bootstrap así:

Este es el código para una hoja de estilo que reside en el directorio primordial.
Si decides poner tu nombre dentro de la carpetita 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:

Y aquí puedes ver el resultado:

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 en tanto que todo lo que precisas para esto es
esto debajo de 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 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 y en todo momento habrá espacio a los dos 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 es debido a que sólo has creado un elemento HTML vacío.

Esto empezará a mudar ahora.

4. Agregar 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 bien
landing page
.

Para ello,
tendremos que utilizar algo de jQuerypara hacer que la imagen se extienda hasta el final de la pantalla.

Hazlo de la misma manera que incluyes CSS adaptado. Primero, crea un fichero de texto con el nombre
main.jsy colócalo dentro de la carpetita de tu sitio.

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

Después de eso,
puedes copiar y pegar este pedazo 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í en
main.css:

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

5. Agregar una sobreimpresión

Para que la imagen de fondo sea más elegante,
también añadiremos una sobreimpresión. Para esto, crea otro elemento
divdentro del que terminas de incluir.

Entonces, puedes añadir lo siguiente en tu archivo 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, a fin de que tus visitantes sepan de manera inmediata en qué sitio se encuentran se hallan y qué pueden esperar de él.

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

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

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

Está empezando a marchar, ¿no?

7. Crear un botón CTA

Ninguna página de aterrizaje o
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 error no incluir cómo crear un botón de este género 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 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. No obstante,
aún no hemos terminado.

A continuación,
vamos a crear tres columnas bajo el contenido principalpara obtener información adicional.

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

Así se hace en este caso:

Lo primero que notarás es el elemento

row
o fila, que
es preciso cuando se crean columnas a fin de que actúen como un contenedor para la cuadrícula.

En cuanto a las columnas, todas y cada una 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 distintas pantallas.

Para entender esto, precisas saber que, en una cuadrícula de Bootstrap, t
odas las columnas de una fila siempre 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 (12 dividido por 3 es cuatro), pero la pantalla completa en dispositivos pequeños (doce 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 forma que puedan escalar así como la pantalla en la que se ve la página.

Además de eso, tienes el próximo estilo incluido en el lugar habitual:

Cuando
se agrega bajo el contenido principal y se guarda, se ve así:

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 dejar que los visitantes se pongan en contacto.

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

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 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 luego 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 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 2 columnas.

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

Además del marcado habitual de la cuadrícula, esta sección resalta
algunas posibilidades para alterar 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 precedente, puedes emplear un estilo como el siguiente:

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

11. Agregar 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 compendiar tu sitio Bootstrap, esto marcha de igual forma que en otros casos,
sólo hay que tomar en consideración los puntos de rotura 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 similar a la que se muestra a continuación.

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

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

Con esto,
tienes todo cuanto precisas 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 permite crear rápidamente prototipos de diseño, crear páginas web y, link building españa , comenzar a trabajar.

Como has visto en este tutorial de Bootstrap para principiantes,
sólo precisas conocimientos básicos de HTML, CSS y ciertos jQuery opcionales. Aunque no es tan cómodo como utilizar 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 fácil 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. Como es natural, 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 ahondar en este marco de trabajo, un buen punto de inicio es W3Schools.

Esperamos que te haya agradado 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.