Los mejores tutoriales de Bootstrap para diseño web receptivo

Bootstrap es un marco de interfaz de usuario popular para el desarrollo web. Contiene componentes prediseñados y elementos de diseño para diseñar contenido HTML. Los navegadores modernos como Chrome, Firefox, Opera, Safari e Internet Explorer son compatibles con Bootstrap.

Bootstrap incluye un sistema de cuadrícula receptivo para diferentes diseños. Es un excelente punto de partida para crear un sitio web compatible con dispositivos móviles. También incluye funcionalidad de JavaScript opcional como contenido plegable, carruseles y modales.

Historial de versiones

Twitter desarrolló originalmente el marco Bootstrap como una herramienta interna. Lo lanzaron como un proyecto de código abierto en agosto de 2011.

Bootstrap 2 se lanzó en enero de 2012. Una de las características principales fue la introducción del sistema de cuadrícula receptiva de 12 columnas. Bootstrap 3 apareció en agosto de 2013, cambiando a un diseño plano y un enfoque móvil primero. Bootstrap 4 está disponible en versión beta a partir de agosto de 2017 y ahora incluye Sass y Flexbox.

Bootstrap 4 estuvo en desarrollo durante dos años antes de lanzar algunas versiones beta durante 2017, mientras que la primera versión estable salió en enero de 2018. Algunos cambios notables incluyen:

  • Movido de Less a Sass;
  • Trasladado a Flexbox y sistema de rejilla mejorado;
  • Tarjetas agregadas (reemplazando pozos, miniaturas y paneles);
  • ¡Y mucho más!

En el momento de escribir este artículo, la última versión de Bootstrap es 4.1.3. Si desea mantenerse al día con las noticias de los anuncios, sígalos aquí.

Instalación

Hay dos opciones principales para agregar Bootstrap a su proyecto web. Puede vincular a fuentes disponibles públicamente o descargar el marco directamente.

Vinculación a otra fuente

Puede agregar Bootstrap CSS utilizando un elemento dentro de su página web que hace referencia a una Red de entrega de contenido (CDN):

Agregar los elementos JavaScript de Bootstrap es similar con los elementos que generalmente se colocan en la parte inferior de su etiqueta '' Es posible que primero deba incluir algunas dependencias. Preste especial atención al orden indicado:

Nota: Estos son solo ejemplos y pueden cambiar sin previo aviso. Consulte un CDN para obtener enlaces actuales para incluir en su proyecto.

Descargar / Instalar

Puede descargar e instalar los archivos fuente de Bootstrap con Bower, Composer, Meteor o npm. Esto permite un mayor control y la opción de incluir o excluir módulos según sea necesario.

npm install bootstrap

gem 'bootstrap', '~> 4.1.3'

Nota: Estos son solo ejemplos y pueden cambiar sin previo aviso. Consulte el sitio web en blanco 'rel =' nofollow '> Bootstrap para obtener los enlaces más actualizados.

El sistema de cuadrícula Bootstrap

El sistema de cuadrícula es un sistema de caja flexible móvil primero para construir rápidamente diseños de todas las formas y tamaños adecuados para todos los dispositivos. Se basa en un diseño de 12 columnas y tiene varios niveles, uno para cada rango de consulta de medios.

Bootstrap viene con clases de cuadrícula predefinidas para su uso en el marcado. Vea más detalles y ejemplos en //getbootstrap.com/docs/4.1/layout/grid/

Funciones de Boostrap

Más información:

Bootstrap tiene documentación completa con muchos ejemplos y una plantilla HTML para comenzar (esta plantilla solo tiene un script incluido; no contiene una configuración del sistema de cuadrícula si eso es lo que está buscando).

Además, puede encontrar temas gratuitos y de pago que se basan en el marco de Bootstrap para proporcionar un aspecto más personalizado y elegante.

Recursos de Bootstrap:

Blog oficial de Bootstrap

Inspiración del sitio Bootstrap

Muestra de sitios creados con Bootstrap

Linter HTML para proyectos que utilizan Bootstrap

Elementos de diseño y fragmentos de código para Bootstrap

Recursos de código, tema y complementos para Bootstrap

Introducción al tutorial de Bootstrap

El uso de Bootstrap facilita el diseño de un sitio web totalmente receptivo y es un marco que vale la pena aprender.

¿Qué es un sitio web adaptable?

Un sitio web receptivo es un sitio web que cambia el tamaño y reorganiza los elementos de la página según el tamaño de su navegador. Con un sitio web receptivo, si cambia el tamaño de su navegador, puede ver que los cambios ocurren en tiempo real. Bootstrap hace que su sitio web responda por usted.

Cómo agregar Bootstrap a su página

Agregar bootstrap a su página es un proceso rápido, simplemente agregue lo siguiente a las etiquetas en su código.

También deberá agregar lo siguiente entre las bodyetiquetas en su código. Con bootstrap usarás etiquetas. Al usar muchas de las funciones de Bootstrap, cada etiqueta tendrá su propio conjunto único de clases aplicadas que le permitirá a la etiqueta realizar su tarea. Otras secciones de esta guía de Bootstrap mostrarán más ejemplos de cómo Bootstrap usa etiquetas. (Las etiquetas no son exclusivas de Bootstrap, sin embargo, Bootstrap las utiliza).

A continuación se muestra el código que se agregaría a las bodyetiquetas en su código para terminar de comenzar. Tenga en cuenta que mientras esto crea el contenedor, la página seguirá en blanco hasta que agregue contenido al contenedor.

Congratulations!

Bootstrap is now working on this page

Plantillas

Las plantillas son conjuntos de herramientas prediseñados que facilitan la creación de una nueva página web. Si tiene una idea general del diseño que desea, o si desea buscar ideas en una biblioteca de plantillas de diseño comunes, las plantillas Bootstrap eliminan gran parte del tedio y las frustraciones del proceso de compilación inicial. Esta asistencia le ayuda a concentrarse en los detalles más finos del proyecto en lugar de preguntarse por qué CSS no coopera.

Empezando

Enlaces de plantilla

Barra de navegación

El marco Bootstrap le proporciona una función de barras de navegación de llamadas. En resumen, una barra de navegación (también conocida como barras de navegación) es un encabezado en la parte superior de la página para mostrar información de navegación.

Cómo utilizar

Para usar las barras de navegación de Bootstrap, agregue un elemento en la parte superior dentro del elemento de su página web. Hay varios estilos que puede agregar para personalizar la visualización de sus barras de navegación.

Ejemplo de código

Este es el código necesario para hacer una barra de navegación básica.

 Site Name 
      
  • Home
  • Page 1
  • Page 2
  • Page 3

Estilos de barra de navegación

Bootstrap proporciona un conjunto de clases en el marco de Bootstrap para diseñar sus barras de navegación. Estas clases son las siguientes:

Agregar menús desplegables a la barra de navegación

Puede incluir un menú desplegable dentro de una barra de navegación. Esta característica requiere que incluya el archivo javascript de Bootstrap para que funcione.

  • Drop down
    • Item 1
    • Item 2
    • Item 3
  • Agregar botones a la barra de navegación

    Puede agregar botones en la barra de navegación. Las clases existentes del botón Bootstrap funcionan, sin embargo, deberá incluir la clase navbar-btnal final de la lista de clases.

    Button

    Agregar formularios a la barra de navegación

    También puede agregar formularios a la barra de navegación. Esto podría usarse para tareas como un campo de búsqueda, un campo de inicio de sesión rápido, etc.

     Search 

    Alinear elementos a la derecha en la barra de navegación

    En algunos casos, es posible que desee alinear elementos en una barra de navegación a la derecha (por ejemplo, un botón de inicio de sesión o registro). Para hacer esto, necesitará usar la navbar-rightclase.

     Site Name 
          
    • Home
    • Page 1
    • Page 2
    • Page 3
    • Action Link #1
    • Action Link #2

    Visualización de la barra de navegación independientemente del desplazamiento

    En algunos casos, es posible que desee mantener la barra de navegación en la parte superior o inferior de la pantalla, independientemente del desplazamiento. Deberá agregar la clase navbar-fixed-topo navbar-fixed-bottomal elemento.

     Site Name 
          
    • Home
    • Page 1
    • Page 2
    • Page 3

    Colapsando la barra de navegación

    En una pantalla pequeña (como un teléfono o una tableta), la barra de navegación ocupará demasiado espacio. Afortunadamente, existe la opción de colapsar la barra de navegación. Puede lograr esto usando el siguiente ejemplo.

     Site Name 
          
    • Home
    • Page 1
    • Page 2
    • Page 3

    Ejemplos de barra de navegación