Интеграция Bootstrap с React: руководство для разработчиков

 export default class Example extends React.Component { constructor(props) { super(props); this.toggle = this.toggle.bind(this); this.state = { isOpen: false }; } toggle() { this.setState({ isOpen: !this.state.isOpen }); } render() { return ( <div> <Navbar color="faded" light expand="md"> {/* Brandname */} <NavbarBrand href="/"> Demo </NavbarBrand> {/* Add toggler to auto-collapse */} <NavbarToggler onClick={this.toggle} /> <Collapse isOpen={this.state.isOpen} navbar> {/*Pull left */} <Nav className="ml-auto" navbar> <NavItem> <NavLink href="/link/"> Left Nav Link </NavLink> </NavItem> </Nav> {/* Pull right */} <Nav className="mr-auto" navbar> <UncontrolledDropdown nav inNavbar> <DropdownToggle nav caret> Bob </DropdownToggle> <DropdownMenu > <DropdownItem> Account </DropdownItem> <DropdownItem> Settings </DropdownItem> <DropdownItem divider /> <DropdownItem> Logout </DropdownItem> </DropdownMenu> </UncontrolledDropdown> </Nav> </Collapse> </Navbar> </div> ); } } 

Модальное окно

Компонент Reactionstrap Modal создает Bootstrap Modal с заголовком, телом и нижним колонтитулом.

Модальный компонент принимает несколько подпорок и обратных вызовов, чтобы сделать окно интерактивным и закрываемым.

Свойство isOpen определяет, будет ли модальный виден. Обратный вызов toggle можно использовать для переключения значения isOpen в управляющем компоненте.

Есть дополнительные реквизиты для добавления эффектов перехода. Доступные обратные вызовы включают onEnter , onExit , onOpened и onClosed :

 {/*For the modal to open, this.state.show should become true which is usually triggered by an onClick event */} {/* toggleModal would set state of show to false onClose*/} <Modal isOpen={this.state.show} toggle={this.toggleModal} > <ModalHeader toggle={this.toggle}> Modal title </ModalHeader> <ModalBody> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </ModalBody> <ModalFooter> <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '} <Button color="secondary" onClick={this.toggle}>Cancel</Button> </ModalFooter> </Modal> 

формы

Реактивная лента <Form> может быть встроенной или горизонтальной .

Компонент Input отображает элемент <input> . Мы можем FormGroup несколько компонентов Input в FormGroup для проверки состояния, правильного интервала и для доступа к другим функциям FormGroup.

Всегда полезно установить метку с помощью <Label> . Формам гораздо больше, и вы должны проверить документацию Bootstrap на формах .

Вот код для нашей формы обратной связи:

  <Form> <FormGroup row> <Label for="exampleEmail" sm={2}>Email</Label> <Col sm={10}> <Input type="email" name="email" id="exampleEmail" placeholder="with a placeholder" /> </Col> </FormGroup> <FormGroup row> <Label for="examplePassword" sm={2}>Password</Label> <Col sm={10}> <Input type="password" name="password" id="examplePassword" placeholder="password placeholder" /> </Col> </FormGroup> <FormGroup row> <Label for="exampleSelect" sm={2}>Select</Label> <Col sm={10}> <Input type="select" name="select" id="exampleSelect" /> </Col> </FormGroup> <FormGroup row> <Label for="exampleSelectMulti" sm={2}>Select Multiple</Label> <Col sm={10}> <Input type="select" name="selectMulti" id="exampleSelectMulti" multiple /> </Col> </FormGroup> <FormGroup row> <Label for="exampleText" sm={2}>Text Area</Label> <Col sm={10}> <Input type="textarea" name="text" id="exampleText" /> </Col> </FormGroup> </Form> 

ListGroup

Реактивная полоса ListGroup упрощает стилизацию и управление элементами списка в React. ListGroup оборачивает ListGroupItems , которые можно сделать интерактивными с помощью обратного вызова onClick .

Вот как выглядит код:

 <ListGroup> <ListGroupItem>Item 1</ListGroupItem> <ListGroupItem>Item 2</ListGroupItem> <ListGroupItem>...</ListGroupItem> </ListGroup>; 

Кнопки

Кнопки являются неотъемлемой частью любой дизайнерской основы. Для кнопок есть реактивный компонент <Button> . Помимо active и disabled свойств, мы можем использовать color и size чтобы установить стиль кнопки (основной, успех и т. Д.) И размер (‘lg’, ‘sm’ и т. Д.):

 {/*ButtonToolbar helps to organize buttons */} <div> <Button color="primary">primary</Button>{' '} <Button color="secondary">secondary</Button>{' '} <Button color="success">success</Button>{' '} <Button color="info">info</Button>{' '} <Button color="warning">warning</Button>{' '} <Button color="danger">danger</Button>{' '} <Button color="link">link</Button> </div> 

Демонстрация: пользовательский интерфейс приложения списка контактов с реактивной лентой

Вот пример демонстрации, созданной с использованием компонентов, обсуждаемых в этом руководстве.

Проверьте это и поэкспериментируйте с ним, чтобы ознакомиться с реактивным ремнем:

Резюме

Теперь мы рассмотрели все, что вам нужно знать, чтобы использовать Bootstrap с React.

Нет недостатка в библиотеках для интеграции Bootstrap с React, и мы рассмотрели некоторые из самых популярных вариантов. Мы также исследовали популярную библиотеку под названиемactstrap. Если у вас возникли сомнения, не забудьте проверить страницу документации, чтобы узнать больше о доступных компонентах.

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

Если у вас есть основы Bootstrap за поясом, но вы не знаете, как поднять свои навыки Bootstrap на следующий уровень, ознакомьтесь с нашим курсом «Создайте свой первый сайт с Bootstrap 4», чтобы быстро и весело познакомиться с мощью Bootstrap.