Aprenda cómo incluir React Bootstrap en su proyecto
Installation#
La mejor manera de consumir React-Bootstrap es a través del paquete npm que puede instalar con npm (o yarn si lo prefiere).
si planea personalizar los archivos SASS de Bootstrap, o no quiere usar un CDN para la hoja de estilos, puede ser útil instalar también vanilla Bootstrap.,
npm install react-bootstrap bootstrap
importando componentes#
debe importar componentes individuales como:react-bootstrap/Button en lugar de toda la biblioteca.Al hacerlo, solo se obtienen los componentes específicos que utiliza, lo que puede reducir significativamente la cantidad de código que termina enviando al cliente.
import Button from 'react-bootstrap/Button';// or less ideallyimport { Button } from 'react-bootstrap';
Navegador globals#
ofrecemos react-bootstrap.js yreact-bootstrap.min.js paquetes con todos los componentsexported en el window.ReactBootstrap objeto. Estas bolsas están disponibles en unpkg, así como en el paquete npm.,
Examples#
React-Bootstrap ha iniciado un repositorio con algunos ejemplos básicos de CodeSandbox.Haga clic aquí para verlas.
Stylesheets #
debido a que React-Bootstrap no depende de una versión muy precisa de Bootstrap, no incluimos ningún CSS. Sin embargo, se requiere una hoja de estilos para usar estos componentes.
CSS#
{/* The following line can be included in your src/index.js or App.js file*/}import 'bootstrap/dist/css/bootstrap.min.css';
Cómo y qué estilos de Bootstrap incluye depende de usted, pero la forma más sencilla es incluir los últimos estilos de la CDN. Puede encontrar más información sobre los beneficios de usar una CDN aquí.,
Sass#
en caso de que esté utilizando Sass, la forma más sencilla es incluir los archivos SASS de origen del Bootstrap en su archivo SASS principal y luego requerirlo en su archivo src/index.js o App.js.Esto se aplica a una aplicación típica create-react-app en otros casos de uso es posible que tenga que configurar el bundler de su elección para compilar hojas de estilo Sass/SCSS a CSS.
personalizar Bootstrap#
Si desea personalizar el tema Bootstrap o cualquier variable de Bootstrap, puede crear un archivo SASS personalizado:
… E importarlo en el Archivo principal Sass.,
/* The following line can be included in a src/App.scss */@import "custom";
uso avanzado#
vea los documentos de Bootstrap para casos de uso más avanzados y detalles sobre la personalización de hojas de estilo.
Themes#
React-Bootstrap es compatible con los temas Bootstrap existentes. Simplemente siga las instrucciones de instalación para el tema de su elección.
compatibilidad con navegadores #
nuestro objetivo es admitir todos los navegadores compatibles con bothreact y Bootstrap.