Желая использовать сеточные системы и панели навигации на личном веб-сайте, который я создавал, я решил установить response-bootstrap, модуль узла, который загружает функции начальной загрузки через отдельные компоненты React.

Установка немного отличалась от обычной в том смысле, что, хотя вы по-прежнему используете npm install react-bootstrap --save, вы должны также установить загрузочный css. Это связано с тем, что нет стандартной темы начальной загрузки, которую используют все, и поэтому вместо загрузки темы по умолчанию, которая занимает место или ее нужно удалить, разработчики решили, что было бы лучше, если бы каждый человек, использующий response-bootstrap, загрузил нужный css с самого начала. Хотя вы можете создать ссылку на загрузочный css из файла index.html или импортировать загрузочный css в свой файл index.css, как и в приложении, отличном от React, мне показалось, что проще запустить npm install bootstrap --save, установив глобальную загрузку как модуль узла. После этого вы просто импортируете в свой файл index.js:

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

Теперь вы можете начать использовать response-bootstrap!

Просмотрев всю документацию, я решил сначала интегрировать компонент ‹ Grid / › в свой основной App.js, чтобы обеспечить базовую структуру страницы. К счастью, документация очень помогла разобраться, как это сделать. Например, чтобы создать разделы NavBar и Обо мне, я написал:

<Grid>
  <Row> 
    <Col md={4}>
      <NavBar />
    </Col>
    <Col md={8}>
      <About />
    </Col>
  </Row>
</Grid>

Одна «проблема», с которой я столкнулся, заключалась в том, что если у вас открыта консоль разработчика либо с левой, либо с правой стороны экрана, даже немного, она переместит последний столбец (здесь ‹About /›) в следующий ряд, создавая впечатление, что он не работает. Небольшая проблема, которую большинство людей не заметит, но она сводила меня с ума.

Теперь, работая с этой сеткой, вы можете использовать с ней любые другие модули. Например, я использовал Routes, поэтому мой App.js выглядел так:

<HashRouter>
  <Grid>
    <Row>
      <Col md={4}>
        <Route path='/' component={NavBar} />
      </Col>
      <Col md={8}>
        <Route path='/about' component={About} />
        <Route path='/projects' component={Projects} />
     </Col>
    </Row>
  </Grid>
</HashRouter>

Это позволяет мне всегда иметь ‹NavBar /› в левой части экрана, а затем, в зависимости от того, участвует ли пользователь в / о или / проектах, иметь соответствующий компонент в правой части экрана.

Теперь вы можете просмотреть оставшиеся компоненты Bootstrap и вставить их в свой проект там, где они вам понадобятся!