Importar bootstrap
Quiere que el diseño refleje el aspecto de su marca. Quieres tener la funcionalidad necesaria para satisfacer las necesidades de tus visitantes sin salirte del presupuesto. Y quieres crear diseños responsivos que muestren elementos como botones y formularios de forma consistente, sin importar el dispositivo o el navegador que esté utilizando el visitante.
Si construyes con Bootstrap, puedes tachar este último punto de tu lista. Bootstrap es un marco de trabajo de código abierto que permite crear rápidamente sitios web con capacidad de respuesta y proyectos web para dispositivos móviles. Como ofrece una colección de código reutilizable, no tendrás que construir un sitio desde cero.
Dado que Bootstrap facilita y agiliza la creación de sitios web responsivos, atrae a muchos desarrolladores frontales y a los principiantes en particular. Sin embargo, no todos lo recomiendan. A continuación veremos por qué Bootstrap es tan popular y cuándo es ideal utilizarlo, y cuándo no.
Hay algunos factores que impulsan la popularidad de Bootstrap. El primero y más importante es que es de código abierto y, por lo tanto, su descarga y uso son gratuitos. También es totalmente personalizable y compatible con todos los navegadores modernos. Sin embargo, esto es cierto para muchos frameworks CSS.
Bootstrap
}Con el fragmento anterior, los elementos anidados -incluyendo el contenido generado a través de ::before y ::after- heredarán el tamaño de caja especificado para ese .selector-for-some-widget. Aprende más sobre el modelo de caja y el tamaño en Trucos de CSS. Reinicio de estilo Para mejorar la renderización entre navegadores, Bootstrap v4.6 utiliza el Reinicio para corregir inconsistencias entre navegadores y dispositivos, a la vez que proporciona reinicios ligeramente más opinables a elementos HTML comunes. Uso de agrupadores de módulos Lo más probable es que utilices agrupadores de módulos como Webpack, Parcel o rollup.js, que facilitan la inclusión directa del paquete en tu proyecto. Para ello, utiliza npm o yarn para obtener la última versión de Vue.js, Bootstrap v4 y BootstrapVue: # Con npm
Vue.use(IconsPlugin)Theming Bootstrap Si quieres cambiar los estilos por defecto de Bootstrap (por ejemplo, el $body-color), tienes que usar los archivos scss de Bootstrap y BootstrapVue. Crea tu propio archivo scss (por ejemplo, app.scss) que contenga tus definiciones personalizadas y los 2 @import al final: // Definir los valores predeterminados de las variables
Uso de Bootstrap
La clase contenedora de Bootstrap acolcha, contiene y alinea los elementos de tu página web. Si piensas utilizar la rejilla por defecto de Bootstrap, tendrás que utilizar también la clase contenedor de Bootstrap. Hay tres tipos de clases contenedoras: container, container-fluid y container-{breakpoint}. La clase container es el contenedor por defecto; es responsivo y tiene un ancho fijo en cada uno de los seis puntos de ruptura de Bootstrap.
La cuadrícula de Bootstrap utiliza un sistema de doce columnas que se basa en las clases de cuadrícula row y col, así como en la clase container. Cada fila tiene doce columnas, y cualquier elemento puede abarcar una o más de estas columnas. La clase column indicará cuántas columnas debe ocupar un elemento. Por ejemplo, un elemento que utilice la clase col-2 abarcará dos columnas, un elemento que utilice la clase col-3 abarcará tres columnas, y así sucesivamente.
El sistema de cuadrícula de Bootstrap se basa en el módulo flexbox. Si sólo dos columnas ocupan una fila, se repartirán el espacio por igual entre ellas. La clase gutter es uno de los elementos estructurales de Bootstrap, y controla el espacio entre cada columna en el sistema de cuadrícula. Cada columna de la cuadrícula tiene 12px de relleno a cada lado.
Bootstrap cdn
Ahora vamos a crear una plantilla básica de Bootstrap incluyendo los archivos CSS y JS de Bootstrap vía CDN. Bootstrap requiere una biblioteca de terceros Popper.js para algunos de sus componentes como los popovers y los tooltips. Puedes incluirla por separado o simplemente incluir Bootstrap JS junto con Popper.
Recomendamos añadir Bootstrap en tu proyecto a través de una CDN (Content Delivery Network) porque la CDN ofrece un beneficio de rendimiento al reducir el tiempo de carga, ya que alojan los archivos en múltiples servidores repartidos por todo el mundo, de modo que cuando un usuario solicite el archivo se le servirá desde el servidor más cercano a él. También estamos utilizando los enlaces de la CDN en nuestros ejemplos:
Los atributos integridad y crossorigin han sido añadidos a los enlaces CDN para implementar la Integridad de Subrecursos (SRI). Se trata de una función de seguridad que le permite mitigar el riesgo de ataques procedentes de CDN comprometidas, garantizando que los archivos que su sitio web obtiene (de una CDN o de cualquier otro lugar) se han entregado sin modificaciones inesperadas o maliciosas. Funciona permitiéndole proporcionar un hash criptográfico con el que debe coincidir un archivo obtenido.