Введение

Узнайте, как включить React Bootstrap в свой проект

Установка

Лучший способ использовать React-Bootstrap — через пакет npm, который можно установить с помощью npm (или yarn, если вы предпочитаете).

Если вы планируете настраивать файлы Sass Bootstrap или не хотите использовать CDN для таблицы стилей, может быть полезно установить также обычный Bootstrap.

npm install react-bootstrap bootstrap

Импорт компонентов

Вы должны импортировать отдельные компоненты, например: react-bootstrap/Button а не всю библиотеку. Это позволяет загружать только те компоненты, которые вы используете, что значительно уменьшает объём кода, отправляемого клиенту.

import Button from 'react-bootstrap/Button';

// or less ideally
import { Button } from 'react-bootstrap';

Глобальные переменные браузера

Мы предоставляем react-bootstrap.js и react-bootstrap.min.js пакеты со всеми экспортированными компонентами на объекте window.ReactBootstrap. Эти пакеты доступны на unpkg, а также в пакете npm.

<script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script>

<script
  src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
  crossorigin></script>

<script
  src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
  crossorigin></script>

<script>var Alert = ReactBootstrap.Alert;</script>

Примеры

React-Bootstrap создал репозиторий с несколькими базовыми примерами CodeSandbox. Нажмите здесь, чтобы ознакомиться с ними.

Таблицы стилей

Поскольку React-Bootstrap не зависит от очень точной версии Bootstrap, мы не поставляем никаких включённых CSS. Однако для использования этих компонентов необходимы некоторые таблицы стилей.

CSS

{/* The following line can be included in your src/index.js or App.js file*/}

import 'bootstrap/dist/css/bootstrap.min.css';

Как и какие стили Bootstrap вы включаете, зависит от вас, но самый простой способ — включить последние стили с CDN. Дополнительную информацию о преимуществах использования CDN можно найти здесь.

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.6.0/css/bootstrap.min.css"
  integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
  crossorigin="anonymous"
/>

Sass

В случае использования Sass самый простой способ — включить исходные файлы Sass Bootstrap в свой основной Sass-файл, а затем потребовать его в своём src/index.js или App.js файле. Это относится к типичному приложению create-react-app, в других случаях вам может потребоваться настроить сборщик по вашему выбору для компиляции Sass/SCSS-таблиц стилей в CSS.

/* The following line can be included in a src/App.scss */

@import "~bootstrap/scss/bootstrap";

/* The following line can be included in your src/index.js or App.js file */

import './App.scss';

Настройка Bootstrap

Если вы хотите настроить тему Bootstrap или любые переменные Bootstrap, вы можете создать пользовательский Sass-файл:

/* The following block can be included in a custom.scss */

/* make the customizations */
$theme-colors: (
    "info": tomato,
    "danger": teal
);

/* import bootstrap to set changes */
@import "~bootstrap/scss/bootstrap";

… И импортировать его в основной Sass-файл.

/* The following line can be included in a src/App.scss */

@import "custom";

Расширенное использование

Для более продвинутых случаев использования и подробностей о настройке таблиц стилей см. документацию Bootstrap.

Темы

React-Bootstrap совместим с существующими темами Bootstrap. Просто следуйте инструкциям по установке выбранной вами темы.

Поддержка браузеров

Мы стремимся поддерживать все браузеры, поддерживаемые как React, так и Bootstrap.