Il existe différentes façons d’intégrer Bootstrap dans votre application Rails 5, mais nous le ferons fonctionner en installant la gemme d’amorçage officielle. Les instructions sur la page github de la gemme sont géniales, donc ce qui suit n’est vraiment qu’une réimpression de ce que vous y trouverez.
Ajoutez la gemme à votre Gemfile.
#GEMFILE gem 'bootstrap', '~> 4.3.1' Exécutez bundle install dans votre ligne de commande.
$ bundle install Incluez le CSS Bootstrap
Confirmez que votre fichier css d’application utilise une extension .scss. Il peut s’agir d’un fichier .css auquel cas vous devrez le modifier avec les éléments suivants :
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss Supprimez tout *= require et *= require_tree instructions du fichier Sass, et utilisez à la place @import pour importer des fichiers Sass. Importez ensuite les styles bootstrap!
//app/assets/stylesheets/application.scss @import "bootstrap"; Vous avez maintenant tous les styles de bootstrap prêts à l’emploi! Nous n’avons pas tout à fait fini cependant.
Incluez le Javascript d’amorçage
La plupart des composants d’amorçage reposent sur Javascript et jQuery, nous devons donc importer les fichiers javascript d’amorçage et installer jQuery si nécessaire. jQuery est déjà inclus si votre version de Rails est inférieure à 5.1. Dans ce cas, incluez simplement bootstrap et popper (un bootstrap de bibliothèque Javascript dépend du positionnement) dans votre fichier manifeste app/assets/javascripts/application.js.
//app/assets/javascripts/application.js //= require popper //= require bootstrap Si votre version de Rails est 5.1 +, vous devrez inclure jQuery. Pour ce faire, installez la gemme jquery-railsbundle intsall puis ajoutez les bibliothèques à votre fichier manifeste application.js. Par exemple:
#GEMFILE gem 'jquery-rails' $ bundle install //app/assets/javascripts/application.js //= require jquery3 //= require popper //= require bootstrap Maintenant, nous sommes prêts à personnaliser les styles!
Personnaliser le Bootstrap
Il existe de nombreuses variables d’amorçage que vous pouvez définir pour donner à votre application son propre style personnalisé. Nous allons simplement changer rapidement la couleur d’arrière-plan du corps et les couleurs du thème pour montrer rapidement comment commencer. Le point clé est que vous devez définir ces variables avant votre ligne @import "bootstrap";.
Nous allons changer les couleurs du thème pour qu’elles correspondent au thème signal de ce site de thématisation Bootstrap et changer l’arrière-plan de notre corps en gris clair.
//app/assets/stylesheets/application.scss $body-bg: #e2e2e2; $theme-colors: ( "primary": #FF304F, "secondary": #CACACA, "success": #015668, "info": #0F81C7, "warning": #0DE2EA, "danger": #06648C, "light": #ececec, "dark": #222222 ); @import "bootstrap"; //bootstrap gem Maintenant, vous pouvez utiliser les styles Bootstrap standard mais ils auront vos couleurs personnalisées!
.container .row .col-md %button.btn.btn-primary Primary %button.btn.btn-secondary Secondary %button.btn.btn-success Success %button.btn.btn-danger Danger %button.btn.btn-warning Warning %button.btn.btn-info Info %button.btn.btn-light Light %button.btn.btn-dark Dark Il existe de nombreuses autres astuces et utilitaires utiles que Bootstrap fournit pour personnaliser davantage l’apparence de votre application. Je vous recommande de lire la documentation pour en savoir plus, mais j’espère que ce qui précède vous aidera à démarrer.
