Le système de grille de React est-il équivalent au système de grille de Bootstrap ?

Question

Je cherche à commencer à styliser mon application React. J'ai déjà utilisé le système de grille de Bootstrap et je cherche maintenant le système de grille de React. Qu'est-ce que les développeurs React utilisent généralement pour le système de grille / la mise en page de leur application ?

Remerciements

Answer 1

Si vous ne ciblez que les navigateurs modernes (c.-à-d. ceux qui disposent de l'option support de flexbox ), vous pouvez vous renseigner sur les points suivants react-flexbox-grid qui offre un ensemble de composants React qui mettent en œuvre les concepts de grille habituels comme Row y Column . Je l'ai utilisé avec succès dans quelques projets.

Cette option permet d'éviter d'avoir recours à toute une bibliothèque d'interfaces utilisateur et de n'utiliser que les parties de la grille.

Answer 2

J'ai simplement utilisé bootstrap, soit en stylisant directement avec bootstrap css, soit en utilisant ceci react-bootstrap bibliothèque.

Answer 3

Je ne suis pas sûr de ce que vous entendez par système de grille React, car il s'agit toujours d'un système de grille CSS. Cependant, dans mes projets, j'utilise react-bootstrap et je suppose que c'est ce que vous recherchez. La seule mise en garde est que vous devez inclure le fichier css bootstrap (par exemple de c.d.n.), à part cela, elle fonctionne très bien et a une excellente documentation.

P.S. Si vous souhaitez n'utiliser que le système de grille, vous devrez alors trouver des css avec la grille bootstrap uniquement, puis importer uniquement les composants de la grille dans la bibliothèque - Grid , Row y Col .

Answer 4

J'ai utilisé le système de grille bootstraps pendant longtemps, mais au bout d'un moment, j'en ai eu assez d'ajouter un tas de classes et cela a commencé à rendre mon HTML illisible. Je suggère d'utiliser flexbox . Il s'agit d'un excellent remplacement et il est en train de devenir la norme pour les conceptions réactives. Il est également pris en charge par tous les principaux navigateurs ce qui est agréable.

Answer 5

Jetez un coup d'œil à fluide-réaction J'ai construit. Il n'a pas besoin de CSS supplémentaire.

<Container>
    <Row>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">1</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">2</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">3</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">4</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">5</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">6</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">7</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">8</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">9</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">10</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">11</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">12</Col>
    </Row>
</Container>