Guía de Bootstrap
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 manera 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.
Bootstrap 3.3 7
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.
Alineación de la barra de herramientas
Si estás empezando con estos frameworks, te sugiero que eches un vistazo a la documentación oficial de React y Bootstrap. También te animo a que veas el completo vídeo tutorial que hay a continuación para profundizar en ellos.
Además, si eres un desarrollador de frontend, casi seguro que has utilizado o al menos has oído hablar de Bootstrap, Foundation y Bulma. Todos ellos son frameworks CSS responsivos (mobile-first) con características robustas y utilidades incorporadas.
Sólo tendrás que incluir un enlace a la CDN en la sección head de tu archivo de entrada a la aplicación. En una aplicación React típica creada con create-react-app, eso sería en el archivo public/index.html.
Si estás utilizando una herramienta de construcción o un módulo de bundler como webpack, esta sería la opción preferida para añadir Bootstrap a tu aplicación React. Puedes iniciar fácilmente la instalación ejecutando lo siguiente:
La ventaja de este método es que prácticamente todos los componentes de Bootstrap se incluyen como un componente de React en estas bibliotecas. Por ejemplo, un componente modal completo de Bootstrap podría ahora importarse fácilmente como <Modal /> en nuestra aplicación React.
Ejemplos de 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
