Installation de Twitter Bootstrap

Twitter Bootstrap, bien que discutable pour certains, reste pratique pour démarrer une appli web en mode responsive.

J'ai donc choisi de l'utiliser sur ce tutoriel, l'inconvénient majeur étant qu'il utilise jQuery (et jQuery, c'est le mal, surtout avec du code JS moderne).

Pour parer cet inconvénient, on ne va pas installer Bootstrap depuis les dépôts officiels.

Bootstrap-sass est un paquet NPM qui étend et compile Twitter Bootstrap en SASS. Seule la partie SASS est utilisée (donc pas de JS depuis Bootstrap). On l'installe en ligne de commande comme ceci :

npm i bootstrap-sass --save-dev

Puis on l'utilise en ajoutant ces 2 lignes au début du fichier app\/Resources\/scss\/style.scss :

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

React-bootstrap est un autre paquet NPM bien utile. Il remplace jQuery dans Bootstrap par du JS React. Il a seulement besoin du CSS de Bootstrap (généré par le SASS du paquet précédemment cité). On a donc 2 packages complémentaires. On aura aussi besoin de liens bootstrap compatibles avec le routeur. Pour l'installation de ces paquets :

npm i react-bootstrap react-router-bootstrap --save

Last updated