există câteva moduri diferite de a integra Bootstrap în aplicația Rails 5, dar o vom face să funcționeze instalând bijuteria oficială bootstrap. Instrucțiunile de pe pagina GitHub a gemului sunt grozave, așa că următoarele sunt într-adevăr doar o reeditare a ceea ce veți găsi acolo.
adăugați bijuteria laGemfile.
#GEMFILE gem 'bootstrap', '~> 4.3.1' rulațibundle install în linia de comandă.
$ bundle install includeți BOOTSTRAP CSS
confirmați că fișierul css al aplicației utilizează o extensie.scss. Poate fi un fișier .css caz în care va trebui să îl modificați cu următoarele:
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss eliminați orice *= require și *= require_tree declarații din fișierul Sass și, în schimb, utilizați @import pentru a importa fișiere Sass. Apoi importați stilurile bootstrap!
//app/assets/stylesheets/application.scss @import "bootstrap"; acum ai toate stilurile bootstrap gata pentru a merge! Nu am terminat încă.
includeți JavaScript Bootstrap
multe dintre componentele Bootstrap se bazează pe Javascript și jQuery, deci trebuie să importăm fișierele javascript Bootstrap și să instalăm jQuery dacă avem nevoie. jQuery este deja inclus în cazul în care versiunea Rails este mai puțin 5.1. În acest caz, pur și simplu includ bootstrap și popper (o bibliotecă JavaScript bootstrap depinde de pentru poziționare) în app/assets/javascripts/application.js fișier manifest.
//app/assets/javascripts/application.js //= require popper //= require bootstrap dacă versiunea Rails este 5.1+, atunci va trebui să includă jQuery. Pentru a face acest lucru, instalați jquery-rails gem, bundle intsall și apoi adăugați bibliotecile la Fișierul manifest application.js. De exemplu:
#GEMFILE gem 'jquery-rails' $ bundle install //app/assets/javascripts/application.js //= require jquery3 //= require popper //= require bootstrap acum suntem gata pentru a personaliza stilurile!
Personalizați Bootstrap
există o mulțime de variabile Bootstrap pe care le puteți defini pentru a oferi aplicației propriul stil personalizat. Vom schimba rapid culoarea de fundal a corpului și culorile temei pentru a arăta rapid cum să începeți. Punctul cheie este că trebuie să setați aceste variabile înainte de linia @import "bootstrap";.
vom schimba culorile temei pentru a se potrivi cu tema semnalului de pe acest site tematic Bootstrap și vom schimba fundalul corpului nostru într-un Gri deschis.
//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 acum Puteți utiliza stilurile Bootstrap standard, dar vor avea culorile personalizate!
.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 există multe alte trucuri și utilități îngrijite pe care Bootstrap le oferă pentru a personaliza în continuare aspectul aplicației dvs. Aș recomanda citirea documentației pentru a afla mai multe, dar sper că cele de mai sus vă ajută să începeți.
