Tutorial Bootstrap


tutorial de bootstrap 4


Oreja es un marco front-end que lo ayuda a crear sitios web receptivos para dispositivos móviles de manera más rápida y fácil. Desarrollado por primera vez por Twitter, Bootstrap ahora se utiliza para cualquier cosa, desde el desarrollo de aplicaciones web hasta temas de WordPress. También es completamente gratuito, versátil e intuitivo..

Con Bootstrap, puede conjurar páginas web complejas a partir de HTML estándar y personalizarlas según sus necesidades. Bootstrap también viene con una serie de complementos jQuery que pueden proporcionar funcionalidades adicionales como carruseles, botones, información sobre herramientas y más.

Por último, pero no menos importante, le brinda muchos accesos directos para crear páginas web que le ahorrarán tiempo y energía. Todo lo que necesita es una comprensión básica de HTML y CSS para crear que sean receptivos, móviles primero y compatibles con todos los navegadores modernos.

PD. Bootstrap no es una opción perfecta para principiantes completos. Algún conocimiento de HTML y CSS sería útil. Alternativamente, puede usar creadores de sitios web o WordPress para crear un sitio web.

Cómo crear un sitio web usando Bootstrap (tabla de contenido):

  1. Paso 1: Configuración y resumen
    1. Crea una página HTML
    2. Cargar Bootstrap a través de CDN o alojarlo localmente
    3. Incluir jQuery
    4. Cargar JavaScript de Bootstrap
    5. Ponlo todo junto
  2. Paso 2: Diseña tu página de destino
    1. Agregar una barra de navegación
    2. Incluir CSS personalizado
    3. Crear un contenedor de contenido de página
    4. Agregar imagen de fondo y JavaScript personalizado
    5. Agregar una superposición
    6. Incluya el título de una página y el texto del cuerpo
    7. Crear un botón de CTA
    8. Configurar una sección de tres columnas
    9. Agregar un formulario de contacto
    10. Crear un pie de página de dos columnas
    11. Agregar consultas de medios
    12. Obtenga su sitio web en vivo

Tiempo total para crear un sitio web usando Bootstrap: 3-4 horas.
Nivel de habilidad: Principiante a Intermedio

Paso 1: configuración y descripción general


Para usar Bootstrap, primero debe integrarlo en su entorno de desarrollo, también conocido como página web. Para eso, tiene dos posibilidades diferentes: cargarlo de forma remota o descargar y usar Bootstrap localmente. Sin embargo, para ambos, primero necesitas algo para cargarlo.,

1. Crear una página HTML

Como primer paso, crearemos una plantilla HTML simple como base donde usaremos Bootstrap. Para eso, lo primero que desea hacer es crear una carpeta en su computadora o servidor para los archivos del proyecto. En este caso, simplemente lo llamaré oreja. Aquí, crea un nuevo archivo de texto y llámalo index.html. Ábralo con un editor de texto de su elección (p. Ej.. Bloc++) y luego pegue el siguiente código en él.





Página de muestra del tutorial de Bootstrap








No olvides guardar tu archivo antes de continuar!

2a. Cargar Bootstrap a través de CDN

Como ya se explicó, Bootstrap consiste principalmente en hojas de estilo y scripts. Como tal, se pueden cargar en el encabezado y pie de página de su página web como otros activos, como fuentes personalizadas. El marco ofrece una ruta de acceso CDN (red de entrega de contenido) para eso. Puedes encontrarlo en el Página de descarga de Bootstrap, más abajo.

Para obtener Bootstrap en su página, simplemente pegue el siguiente código en el sección de tu plantilla.

Cuando ahora 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 tendrán el marco en la memoria caché de su navegador. Si ese es el caso, no tendrán que volver a cargarlo cuando visiten su sitio, lo que aumentará el tiempo de carga de la página. Como consecuencia, este es el método recomendado para sitios activos..

Sin embargo, para experimentar y desarrollar, o si desea ser independiente de una conexión a Internet, también puede obtener su propia copia de Bootstrap. Esto es lo que estoy haciendo para este tutorial porque también produce menos código para publicar.

2b. Host Bootstrap localmente

Una forma alternativa de configurar Bootstrap es descargarlo en su disco duro y usar 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 compilados CSS y JS. No necesitas los archivos fuente.

Una vez que lo haya hecho, 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 esta manera:

Notarás que esto incluye la ruta del archivo en la que puedes encontrar el archivo 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 descarga una versión diferente de Bootstrap.

3. Incluir jQuery

Para obtener la funcionalidad completa de Bootstrap, también debe cargar la biblioteca jQuery. Aquí también tiene la posibilidad de cargarlo de forma remota o alojarlo localmente.

En el primer caso, encontrará el enlace a la última versión de jQuery aquí. Puede usarlo para cargar la biblioteca en su página colocando la línea de código debajo justo antes de donde dice en tu pagina.

Alternativamente, descargar jQuery (clic derecho> Guardar enlace como…), descomprímalo y póngalo en la carpeta del proyecto. Luego, inclúyalo en el mismo lugar que su archivo de esta manera:

Nuevamente, asegúrese de que la ruta corresponda a su configuración.

4. Cargar JavaScript de Bootstrap

El último paso para configurar Bootstrap es cargar la biblioteca JavaScript de Bootstrap. Estos se incluyen en la versión descargada del marco 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 para jQuery.

Puedes llamarlo remotamente así:

O localmente así:

5. Ponlo todo junto

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

   Página de muestra del tutorial de Bootstrap         

Alternativamente, si está alojando localmente, la plantilla de su página debería parecerse al código siguiente:

   Página de muestra del tutorial de Bootstrap         

Si eso es lo que tiene y guardó su trabajo, ahora está listo para pasar al siguiente paso.

Paso 2: diseña tu página de destino


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

En este momento, cuando navega a su sitio de muestra, simplemente debería ver una página en blanco. Hora de cambiar eso.

1. Agregar una barra de navegación

Lo primero que queremos hacer es agregar 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 eso, usaremos el barra de navegación clase. éste es uno de elementos por defecto de Bootstrap. Crea un elemento de navegación que responde de manera predeterminada y colapsará automáticamente en pantallas más pequeñas. También ofrece soporte incorporado para agregar marcas, esquemas de color, espaciado y otros componentes..

Lo usaremos como a continuación y lo publicaremos justo debajo del etiqueta:

 Logo   

Alguna explicación del código:

  • navbar-expand-md – Esto indica en qué punto la barra de navegación se expande desde el 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 algo mayor que 768px.
  • marca-barra de navegación – 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 alternar para el menú contraído. La pieza data-toggle = "colapso" 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 una identificación CSS (definida por el # #) y envolver un div con el mismo nombre alrededor del actual barra de navegación elemento.
  • icono de barra de navegación – Como probablemente pueda 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 lista que contiene los elementos del menú. Estos últimos se denotan con elemento de navegación y enlace de navegación.

    ¿Por qué estoy explicando esto tanto??

    Porque ese es el punto de Bootstrap. Tiene todos estos estándares que le permiten crear elementos con algunas clases de HTML y CSS rápidamente. No tiene que escribir ningún CSS para proporcionar estilo, todo ya está configurado en Bootstrap. Además, ¡todo es móvil y listo para usar! ¿Estás comenzando a ver lo útil que es esto??

    Lo anterior es suficiente para agregar una barra de navegación a su sitio. Sin embargo, por el momento, todavía parece muy poco.

    tutorial de bootstrap agregar barra de navegación

    Eso se debe a que no tiene mucho estilo adjunto. Si bien puedes agregar colores predeterminados (por ejemplo, dando a la barra de navegación una clase como bg-dark navbar-dark), en su lugar, queremos agregar el nuestro.

    2. Incluir CSS personalizado

    Afortunadamente, si desea cambiar el estilo predeterminado, no tiene que pasar por una gran biblioteca de hojas de estilo y hacer los cambios a mano. En cambio, al igual que con un tema secundario de WordPress, puede agregar sus propios archivos CSS que puede usar para sobrescribir el estilo existente.

    Para eso, simplemente cree un archivo en blanco con su editor de texto y llámelo main.css. Guárdelo, luego agréguelo a la sección principal de su sitio Bootstrap de esta manera:

    Este es el código para una hoja de estilo que reside en el directorio principal. Si decide colocar su interior css carpeta, asegúrese de incluir la ruta correcta en el enlace.

    Desde aquí, puede agregar CSS personalizado a su sitio. Por ejemplo, para diseñar la barra de navegación y sus elementos, puede usar marcas como esta:

    cuerpo { relleno: 0; margen: 0; fondo: # f2f6e9; } /*--- barra de navegación ---*/ .barra de navegación { fondo: # 6ab446; } .enlace de navegación, .navbar-brand { color: #fff; cursor: puntero; } .nav-link { margen derecho: 1em! importante; } .nav-link: hover { color: # 000; } .navbar-collapse { justify-content: flex-end; }

    Y aqui esta el resultado:

    barra de navegación de estilo tutorial de bootstrap

    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 realmente fácil en Bootstrap, ya que todo lo que necesitas es debajo de la etiqueta de la barra de navegación:

    Observe la fluido contenedor clase. Esta es otra de esas clases de Bootstrap predeterminadas. Aplicándolo a la div El elemento aplica automáticamente un montón de CSS.

    los -líquido parte se asegura de que el contenedor se extienda por todo el ancho de la pantalla. También hay solo un envase, que tiene anchos fijos aplicados, por lo que siempre habrá espacio en ambos lados de la pantalla.

    Sin embargo, si ahora vuelve a cargar la página, aún no verá nada (a menos que use las herramientas de desarrollador). Esto se debe a que solo creó un elemento HTML vacío. Esto comenzará a cambiar ahora.

    4. Agregue una imagen de fondo y JavaScript personalizado

    Como siguiente paso en este tutorial de Bootstrap, queremos incluir una imagen de fondo de pantalla completa para el encabezado de nuestra página de destino. Para eso, tendremos que usar un poco de jQuery para que la imagen se extienda por toda la pantalla.

    Lo hace 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 etiqueta dentro index.html.

    Después de eso, puede copiar y pegar este fragmento de código para hacer que

    elemento estirado en toda la pantalla:

    $ (documento) .ready (función () { $ ('. header'). height ($ (window) .height ()); })

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

    .encabezado { background-image: url ('images / header-background.jpg'); tamaño de fondo: cubierta; posición de fondo: centro; posición: relativa; }

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

    tutorial de arranque incluye imagen de fondo del encabezado

    5. Agregar una superposición

    Para que la imagen de fondo sea más elegante, también agregaremos una superposición. Para eso, creará otro elemento div dentro del que acaba de incluir anteriormente.

    Luego, puede agregar lo siguiente en su archivo CSS personalizado:

    .superposición { posición: absoluta; altura mínima: 100%; ancho min: 100%; izquierda: 0; arriba: 0; fondo: rgba (0, 0, 0, 0.6); }

    Esto creará esta bonita superposición para la imagen que ingresó anteriormente:

    tutorial de bootstrap agregar superposición

    6. Incluya el título de una página y el texto del cuerpo

    Ahora probablemente desee agregar un título de página en forma de encabezado más texto del cuerpo. De esa manera, sus visitantes sabrán de inmediato en qué sitio se encuentran y qué pueden esperar de él..

    Para crearlos, simplemente agregue este fragmento dentro del contenedor que configuró en el último paso, debajo de la superposición:

    Bienvenido a la página de destino!

    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, en pharetra sem ullamcorper.

    Después de eso, agregue el siguiente marcado a main.css.

    .descripción { izquierda: 50%; posición: absoluta; arriba: 45%; transformar: traducir (-50%, -55%); alinear texto: centro; } .descripción h1 { color: # 6ab446; } .descripción p { color: #fff; tamaño de fuente: 1.3rem; altura de línea: 1.5; }

    Cuando lo haga, la página de destino ahora se ve así:

    tutorial de bootstrap agregar título y descripción de la página

    Realmente está empezando a unirse, ¿no es así??

    7. Crear un botón de CTA

    Ninguna página de destino está completa sin una llamada a la acción, generalmente en forma de 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 rápida y fácilmente. Puedes encontrar muchos ejemplos aquí. En mi caso, agrego el siguiente marcado justo debajo del contenido de la página dentro del envase:

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

    .botón de descripción { borde: 1px sólido # 6ab446; fondo: # 6ab446; radio de borde: 0; color: #fff; } .botón de descripción: desplazar { borde: 1px sólido #fff; fondo: #fff; color: # 000; }

    Después de guardar y volver a cargar, se ve así:

    tutorial de bootstrap agregar botón de llamada a la acción

    8. Configure una sección de tres columnas

    Ya estoy bastante satisfecho con cómo se están formando 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: creando una cuadrícula. Aquí se explica cómo hacerlo en este caso:

    Lorem ipsum

    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.

    Lorem ipsum

    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.

    Lo primero que notará es el fila elemento. Necesita esto siempre que cree columnas para actuar como contenedor de la cuadrícula.

    En cuanto a las columnas, todas tienen varias clases: col-lg-4, col-md-4 y col-sm-12. Estos denotan que estamos tratando con columnas y el tamaño que tendrán en diferentes pantallas.

    Para comprender esto, debe saber que en una cuadrícula Bootstrap, todas las columnas en 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 grande y mediano pantallas (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 incluí imágenes y agregué .imagen fluida clase para ellos. Esto es para que sean receptivos para que se escalen junto con una pantalla en la que se ve la página.

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

    .caracteristicas { margen: 4em automático; relleno: 1em; posición: relativa; } .título-característica { color: # 333; tamaño de fuente: 1.3rem; peso de fuente: 700; margen inferior: 20px; transformación de texto: mayúscula; } .características 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); margen inferior: 16px; }

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

    tutorial de arranque agregar sección de tres columnas

    9. Agregar un formulario de contacto

    Notará que uno de los nuevos campos aún está vacío. Esto fue a propósito porque queremos agregarle 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 bastante fácil:

    Ponerse en contacto!

    Por ahora, ya no debería tener que explicar el marcado para crear columnas. Esto es lo que significa el resto del marcado:

    • grupo de forma – Se utiliza para ajustar campos de formulario para formatear.
    • control de forma – Denota campos de formulario como entradas, áreas de texto, etc..

    Hay mucho más que puede hacer con los formularios, que puede encontrar en el documentación. Sin embargo, para fines de demostración, lo anterior es suficiente. Colóquelo dentro de la columna vacía restante y luego agregue este estilo en main.css:

    .características .form-control, .funciones de entrada { radio de borde: 0; } .características .btn { color de fondo: # 589b37; borde: 1px sólido # 589b37; color: #fff; margen superior: 20 px; } .características .btn: hover { color de fondo: # 333; borde: 1px sólido # 333; }

    Cuando lo haces, obtienes un formulario como este:

    tutorial de arranque incluye formulario de contacto

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

    Muy bien, ahora estamos llegando al final del tutorial de Bootstrap. Lo último que desea agregar a su página de destino es una sección de pie de página con dos columnas. Por ahora, esto ya no debería representar un problema para ti.

    Información Adicional

    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.

    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.

    Contacto

    1640 Riverside Drive, Hill Valley, California
    [correo electrónico protegido]
    + 01 234 567 88
    + 01 234 567 89

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

    • texto en mayúscula
    • font-weight-bold
    • centro de texto

    Debe quedar bastante claro a partir de los nombres de las clases que hacen. Puede encontrar más información sobre Bootstrap y la tipografía. aquí.

    Además de lo anterior, puede usar un estilo como este:

    .pie de página { color de fondo: # 222; color: #ccc; acolchado: 60px 0 30px; } .pie de página con copyright { color: # 666; acolchado: 40px 0; }

    Esto da como resultado un hermoso pie de página que se ve así:

    tutorial de arranque incluye pie de página

    11. Agregar consultas de medios

    La página está básicamente lista por ahora. También es totalmente responsable. Sin embargo, en la vista móvil del navegador, la sección superior aún no sale del todo bien.

    error de tutorial de arranque en diseño móvil

    Sin embargo, no se preocupe, puede corregirlo con bastante facilidad con una simple consulta de medios. A menos que esté utilizando SASS para compilar su sitio Bootstrap, estos funcionan de la misma manera que en otros casos. Solo necesitas tener en cuenta puntos de interrupción preestablecidos incluido en Bootstrap.

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

    @media (ancho máximo: 575.98px) { .descripción { izquierda: 0; relleno: 0 15px; posición: absoluta; arriba: 10%; transformar: ninguno; alinear texto: centro; } .descripción h1 { tamaño de fuente: 2em; } .descripción p { tamaño de fuente: 1.2rem; } .caracteristicas { margen: 0; } }

    Después de eso, todo es como debería ser:

    tutorial de bootstrap agregar consulta de medios

    12. Cargue su sitio web en un servidor web

    Si ha estado siguiendo, ahora debería estar configurado con un sitio web terminado que también en dispositivos móviles y que sea completamente receptivo.

    Sin embargo, hasta ahora, nadie más que tú puedes verlo. Para cambiar eso, necesita un servidor web y un dominio. De esa manera, las personas pueden ingresar la dirección de su sitio web en la barra de su navegador y luego acceder a su sitio web Bootstrap recientemente acuñado en línea.

    Para permitirles hacerlo, debe cargar el sitio en su servidor. Puede hacerlo con un cliente FTP como FileZilla. Recopile su dirección de host FTP, nombre de usuario y contraseña de su proveedor de alojamiento para conectarse a su servidor de forma remota. Cuando lo haga, debería poder ver los archivos y directorios que están actualmente allí..

    cargar el sitio web de arranque al servidor a través de ftp

    Navegue al directorio al que apunta su dominio (generalmente el directorio raíz). Una vez que haya hecho eso, simplemente busque la carpeta con sus archivos Bootstrap en su disco duro, marque todos los archivos dentro y luego arrástrelos al servidor para comenzar la carga. El proceso tardará un tiempo en terminar dependiendo de la velocidad de su conexión, así como del número y tamaño de los archivos..

    Sin embargo, una vez hecho, cuando acceda a su dominio, debería poder ver el sitio terminado en la ventana de su navegador.

    tutorial de arranque terminado página de aterrizaje

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

    Hablando de eso, si desea tener el código completo de la página, incluidos el CSS y JavaScript personalizados, puede descargarlos todos aquí. Con esto, tiene todo lo que necesita para crear una página de inicio con Bootstrap.

    Conclusión

    Bootstrap es un marco de desarrollo front-end de código abierto que cualquiera puede usar de forma gratuita. Le permite crear prototipos rápidamente, crear páginas web y, en general, comenzar a ejecutar.

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

    Por ahora, ya sabe cómo configurar e instalar Bootstrap y sus componentes, crear una página de destino simple, incluir 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 para aprender..

    Gracias a este tutorial básico de Bootstrap, ahora sabes lo suficiente para seguir avanzando por ti mismo. Si desea profundizar en el marco, un buen punto de partida es W3Schools. Aparte de eso, esperamos que te haya gustado este tutorial para principiantes y te gustaría escuchar tus pensamientos y experiencias al respecto.

    Actualización: también creamos una hoja de trucos de arranque para principiantes en versiones .pdf y .png.

    ¿Tienes alguna idea sobre el tutorial de Bootstrap anterior? Preguntas, comentarios, solicitudes? Háganos saber en la sección de comentarios!

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me