Желая использовать сеточные системы и панели навигации на личном веб-сайте, который я создавал, я решил установить 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 и вставить их в свой проект там, где они вам понадобятся!