Saiba como incluir Reagir de Inicialização em seu projeto
Instalação#
A melhor maneira de consumir a Reagir-Bootstrap é através da npm pacote whichyou pode instalar com o npm (ou yarn se você preferir).
se planeia personalizar os ficheiros Sass do Bootstrap, ou não quer usar um CDN para a ‘stylesheet’, poderá ser útil também para instilar o vanilla Bootstrap.,
npm install react-bootstrap bootstrap
importar componentes#
deve importar componentes individuais como:react-bootstrap/Button em vez de toda a biblioteca.Ao fazê-lo, é necessário incluir apenas os componentes específicos que utiliza, o que pode reduzir significativamente a quantidade de código que acaba por enviar ao cliente.
import Button from 'react-bootstrap/Button';// or less ideallyimport { Button } from 'react-bootstrap';
Navegador globals#
oferecemos react-bootstrap.js ereact-bootstrap.min.js pacotes com todos os componentsexported no window.ReactBootstrap objeto. Estes dados estão disponíveis na unpkg, bem como no pacote npm.,
exemplos#
React-Bootstrap iniciou um acordo de recompra com alguns exemplos básicos do CodeSandbox.Clique aqui para verificá-los.
Stylesheets#
Because React-Bootstrap doesn’t depend on a very precise version ofbootstrap, we don’t ship with any included CSS. No entanto, a somestylesheet é necessária para usar estes componentes.
CSS#
{/* The following line can be included in your src/index.js or App.js file*/}import 'bootstrap/dist/css/bootstrap.min.css';
Como e quais os estilos de Bootstrap que você inclui depende de você, mas a maneira mais simples é incluir os estilos mais recentes da CDN. Pode encontrar-se aqui um pouco mais de informação sobre os benefícios da utilização de uma CDN.,
Sass#
No caso de estar a usar a SAS, a forma mais simples é incluir o ficheiro de código Sass do Bootstrap no seu ficheiro Sass principal e depois requerê-lo no seu ficheirosrc/index.js ouApp.js ficheiro.Isto aplica-se a uma aplicação típica create-react-app noutros casos de Utilização, poderá ter de setupar o bundler à sua escolha para compilar folhas de estilo Sass/SCSS para CSS.
personalizar o Bootstrap#
Se desejar personalizar o tema Bootstrap ou qualquer variables Bootstrap, poderá criar um ficheiro Sass personalizado:
… E importá-lo no ficheiro SAS principal.,
/* The following line can be included in a src/App.scss */@import "custom";
Advanced usage#
See the Bootstrap docs for more advanced use cases and details about customizing stylesheets.
temas#
Reat-Bootstrap é compatível com os temas de Bootstrap existentes. Siga apenas as instruções de instalação para o seu tema de escolha.
Browser support#
we aim to support all browsers supported by bothreact and Bootstrap.