Ci sono alcuni modi diversi per integrare Bootstrap nella tua app Rails 5, ma lo faremo funzionare installando la gemma bootstrap ufficiale. Le istruzioni sulla pagina github della gemma sono fantastiche, quindi quanto segue è in realtà solo una ristampa di ciò che troverai lì.
Aggiungi la gemma al tuo Gemfile.
#GEMFILE gem 'bootstrap', '~> 4.3.1' Esegui bundle install nella riga di comando.
$ bundle install Includere il Bootstrap CSS
Confermare che il file css dell’applicazione utilizza un .scss estensione. Potrebbe essere un .css file nel qual caso dovrete cambiarlo con il seguente:
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss Rimuovere qualsiasi *= require e *= require_tree dichiarazioni del Sass file, invece di usare @import per importare i file Sass. Quindi importa gli stili di bootstrap!
//app/assets/stylesheets/application.scss @import "bootstrap"; Ora hai tutti gli stili di bootstrap pronti per partire! Non abbiamo ancora finito.
Includere il Bootstrap Javascript
Molti dei componenti Bootstrap si basano su Javascript e jQuery, quindi abbiamo bisogno di importare i file Bootstrap javascript e installare jQuery se necessario. jQuery è già incluso se la versione di Rails è inferiore a 5.1. In tal caso, è sufficiente includere bootstrap e popper (un bootstrap della libreria Javascript dipende dal posizionamento) nel file manifest app/assets/javascripts/application.js.
//app/assets/javascripts/application.js //= require popper //= require bootstrap Se la versione di Rails è 5.1+, dovrai includere jQuery. Per fare ciò, installare la gemmajquery-railsbundle intsall e quindi aggiungere le librerie al file manifestapplication.js. Per esempio:
#GEMFILE gem 'jquery-rails' $ bundle install //app/assets/javascripts/application.js //= require jquery3 //= require popper //= require bootstrap Ora siamo pronti per personalizzare gli stili!
Personalizza Bootstrap
Ci sono molte variabili Bootstrap che puoi definire per dare alla tua app il proprio stile personalizzato. Cambieremo rapidamente il colore di sfondo del corpo e i colori del tema per mostrare rapidamente come iniziare. Il punto chiave è che devi impostare queste variabili prima della riga@import "bootstrap";.
Cambieremo i colori del tema per abbinare il tema del segnale da questo sito di tematizzazione Bootstrap e cambiare il nostro sfondo del corpo in un grigio chiaro.
//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 Ora puoi usare gli stili di Bootstrap standard ma avranno i tuoi colori personalizzati!
.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 Ci sono molti altri trucchi e utilità che Bootstrap fornisce per personalizzare ulteriormente l’aspetto della tua app. Consiglierei di leggere la documentazione per saperne di più, ma spero che quanto sopra ti aiuti a iniziare.
