En 2011, Twitter introdujo el marco Bootstrap. Desde entonces, este marco CSS ha visto dos reescrituras importantes, la más reciente (Bootstrap 3) lanzada en 2013. Bootstrap 3 transformó la biblioteca de CSS al implementar un enfoque móvil primero que dejó el marco completamente receptivo.
A partir de 2022, Bootstrap está en la versión cinco y es uno de los marcos frontend más populares. Tiene una extensa lista de componentes preconstruidos y una impresionante colección de complementos de JavaScript. En este artículo, aprenderá cómo usar Bootstrap y aprovechar al máximo sus funciones.
Instalación de Bootstrap en su proyecto
Hay tres formas de usa Bootstrap en tu proyecto. Puede descargar y alojar los archivos CSS y JavaScript, instalarlos en su proyecto usando npm o copiar y pegar los enlaces cdn apropiados en su proyecto.
Con el enfoque cdn, debe recordar colocar el enlace Bootstrap antes de cualquier otro enlace CSS en la etiqueta principal de su archivo HTML.
Algunos componentes de Bootstrap tienen actividades funcionales, como alternar y posicionar botones que requieren la importación de scripts de JavaScript y Popper. Por lo tanto, si tiene la intención de utilizar algún componente funcional, también deberá agregar la etiqueta de secuencia de comandos a su archivo HTML.
Lo último que necesita para comenzar a usar Bootstrap es el mirador etiqueta.
Dado que Bootstrap es una tecnología móvil primero, el mirador etiqueta ayudará en el diseño receptivo. Una forma simple de usar bootstrap en su proyecto es simplemente copiar Plantilla de inicio de Bootstrap.
Crear un sitio web con Bootstrap
Cuando está creando un nuevo sitio web, una de las primeras cosas que debe considerar es el diseño. Después de eso, puede pasar a otros componentes como botones y tipografía.
Bootstrap tiene una colección de componentes estructurales que puede usar para organizar elementos en una página web. Estas estructuras de diseño incluyen:
- Contenedores
- Cuadrícula
- columnas
- canalones
- puntos de ruptura
Usando una versión ligeramente alterada de la plantilla de inicio de Bootstrap, puede comenzar a delinear la estructura de su página web y agregar nuevos componentes.
El archivo index.html
Etiquetas meta requeridasBootstrap CSS
Oreja
Separar Popper y Bootstrap JS
La clase de contenedor Bootstrap
El arranque envase class rellena, contiene y alinea los elementos de su página web. Si planea usar Bootstrap cuadrícula predeterminada, entonces necesitará usar también Bootstrap envase clase. Hay tres tipos de envase clases; envase, contenedor-líquido, y contenedor-{punto de interrupción}. La clase de contenedor es el contenedor predeterminado; responde y tiene un ancho fijo en cada uno de los seis puntos de interrupción de Bootstrap.
Los seis puntos de interrupción predeterminados de Bootstrap incluyen:
- Extra Pequeño: Menos de 576px.
- Pequeña: Mayor o igual a 576px.
- Medio: Mayor o igual a 768px.
- Grande: Mayor o igual a 992px.
- X-Grande: Mayor o igual a 1200px.
- XX-Grande: Mayor o igual a 1400px.
Para usar Bootstrap envase en su proyecto, simplemente puede agregar la clase de contenedor deseada a la externa división en tu página web.
Usando el contenedor de Bootstrap
colocar elementos del sitio web aquí Insertar el código anterior en el cuerpo de su archivo HTML existente hará que su página web responda y también creará relleno en cada lado de su página web.
El sistema de cuadrícula Bootstrap
La cuadrícula de Bootstrap utiliza un sistema de doce columnas que se basa en el fila y columna clases de cuadrícula, así como la clase de contenedor. Cada fila tiene doce columnas y cualquier elemento puede abarcar una o más de estas columnas. La clase de columna indicará cuántas columnas debe ocupar un elemento. Por ejemplo, un elemento que utiliza el col-2 la clase se extenderá a través de dos columnas, un elemento usando el col-3 la clase abarcará tres columnas, y así sucesivamente.
El sistema de cuadrícula Bootstrap se basa en el módulo flexbox. Si solo dos columnas ocupan una fila, dividirán el espacio por igual entre ellas. los canal La clase es uno de los elementos estructurales de Bootstrap y controla el espacio entre cada columna en el sistema de red. Cada cuadrícula la columna tiene 12px de relleno en cada lado.
Uso del sistema de cuadrícula de Bootstrap
contenido principal en una página web
Artículo
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae
obcaecati illo laboriosam a, voluptate molestias eum velit, distintio impedit
ratione facere numquam, optio eligendi delectus cumque quos.
Insertar el código anterior en el contenedor div creará un sistema de cuadrícula Bootstrap de tres filas y dos columnas. La primera fila en la parte superior contendrá la barra de navegación, la tercera fila en la parte inferior contendrá el pie de página del sitio web y la segunda fila en el medio contendrá el contenido de la página web. La segunda fila tiene dos columnas: el artículo principal y un aparte.
Crear un archivo CSS local y agregar un borde a cada sección de la cuadrícula le permitirá verlo con mayor claridad.
El archivo style.css
.fila{
borde: 2px azul sólido;
}
.col, .col-sm-4{
borde: 2px rojo sólido;
}
Vincular al archivo CSS anterior creará el siguiente resultado en su navegador:
Una diferencia obvia en la imagen de arriba es el tamaño de las columnas. Por lo general, dos (o más) columnas en una fila ocupan la misma cantidad de espacio a menos que indique explícitamente lo contrario. los col-sm-4 class en el código HTML anterior asegura que la segunda columna solo abarque cuatro de las doce columnas en la fila. los SM en el col-sm-4 La clase representa el punto de interrupción pequeño, por lo que la sección aparte solo ocupará cuatro columnas desde el punto de interrupción pequeño y superior.
Componentes de arranque
Una vez que haya decidido el diseño de su página web, el siguiente paso es agregar elementos de creación de sitios web, que Bootstrap llama componentes. La lista de componentes de Bootstrap incluye:
- barra de navegación
- Botones
- Grupo de botones
- Grupo de lista
- Tarjetas
- Colapso
- Listas deplegables
La clase de barra de navegación Bootstrap
Cada barra de navegación de Bootstrap requiere la barra de navegación clase. También requieren el uso de la o asignando la palabra clave "navegación" al Bootstrap papel atributo en el padre de la barra de navegación división. Para que la barra de navegación responda, deberá usar el colapsar el complemento de JavaScript.
El arranque barra de navegación la clase usa un aria-actual atributo que toma el valor "página" para indicar la página actual, o "verdadero" para indicar la sección actual de una página web. El valor que asigne dependerá de la estructura de su sitio web (página única o varias páginas). También debe utilizar el clase activa para indicar la página o sección actual.
Usando la barra de navegación de Bootstrap
Sustitución de la navegación fila del Bootstrap cuadrícula con el código anterior creará el siguiente resultado en su navegador:
Hay varias otras clases importantes y atributos de Bootstrap en el código anterior, como el Marca de barra de navegación clase, que apunta a la sección del logotipo de su barra de navegación. los barra de navegación también es completamente sensible gracias a la colapsar el complemento de JavaScript.
Barra de navegación receptiva
Puede recordar que Bootstrap tiene seis predeterminados puntos de interrupción y uno de esos puntos de interrupción es grande (lg). los barra de navegación-expand-lg clase en el anterior se expande en una lista horizontal de elementos de navegación en el punto de interrupción grande y superior, y esa lista vuelve a ser un botón en cualquier punto de interrupción inferior a grande.
Si desea obtener más información sobre la creación de sitios web receptivos, hemos preparado un artículo que describe cómo hacer esto con consultas de medios en HTML y CSS.
El componente de botón Bootstrap
El arranque botón componente utiliza el y requiere que establezca el escribe atributo a "botón".
Bootstrap tiene varios tipos de botones. Para crear el botón más convencional, usaría el btn clase, pero para crear un botón de hamburguesa como en el código anterior, usaría el alternar la barra de navegación clase.
¿Cuándo debería usar Bootstrap?
Bootstrap es conocido como uno de los marcos CSS más populares porque es un pionero. Mucho antes de que el diseño receptivo fuera tan común en el desarrollo de software, Bootstrap se transformó en un marco completamente receptivo.
A lo largo de los años, Bootstrap ha seguido avanzando y mejorando, convirtiéndose en la opción número uno para las principales empresas, como Twitter y Spotify. Sin embargo, no siempre será la mejor opción para sus necesidades de desarrollo de software. Por ejemplo, si está creando una aplicación React, hay un sistema de diseño llamado MUI que está personalizado para las aplicaciones React.
Material-UI tiene un nuevo nombre y tiene como objetivo crear un nuevo sistema de diseño alternativo a Material Design. Así es como puede usar MUI en proyectos ReactJS.
Leer siguiente
- Programación
- Gorjeo
- Consejos de codificación
- Programación
- Herramientas de programación
Kadeisha Kean es una desarrolladora de software de pila completa y escritora técnica/tecnológica. Tiene la clara habilidad de simplificar algunos de los conceptos tecnológicos más complejos; producir material que pueda ser fácilmente entendido por cualquier novato en tecnología. Le apasiona escribir, desarrollar software interesante y viajar por el mundo (a través de documentales).
Suscríbete a nuestro boletín
¡Únase a nuestro boletín para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse
