Utilisation du Bootstrap en React

16 Juil Utilisation du Bootstrap en React

Toujours le même principe, on installe Boostrap dans notre projet

yarn add react-bootstrap

Dans notre fichier index.html sité dans le dossier public, on ajoute le lien cdn du Bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

On suppose qu’on va utiliser la partie Navbar du Bootstrap dans notre fichier Component, donc on a besoin d’importer

import { Navbar, Nav, NavItem, MenuItem, NavDropdown } from 'react-bootstrap';

Ensuite dans notre Render on met

<Navbar>
  <Navbar.Header>
    <Navbar.Brand>
      <a href="#home">React-Bootstrap</a>
    </Navbar.Brand>
  </Navbar.Header>
  <Nav>
    <NavItem eventKey={1} href="#">
      Link
    </NavItem>
    <NavItem eventKey={2} href="#">
      Link
    </NavItem>
    <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
      <MenuItem eventKey={3.1}>Action</MenuItem>
      <MenuItem eventKey={3.2}>Another action</MenuItem>
      <MenuItem eventKey={3.3}>Something else here</MenuItem>
      <MenuItem divider />
      <MenuItem eventKey={3.4}>Separated link</MenuItem>
    </NavDropdown>
  </Nav>
</Navbar>

Pour avoir la liste complète des components, rendez vous sur cette URL