a Bootstrap integrálásának néhány különböző módja van a Rails 5 alkalmazásba, de a hivatalos bootstrap gem telepítésével működni fogunk. A gem github oldalán található utasítások nagyszerűek, tehát a következő valójában csak egy újranyomtatása annak, amit ott talál.
adja hozzá a drágakövet aGemfile – hez.
#GEMFILE gem 'bootstrap', '~> 4.3.1' futtassa a bundle install parancssorban.
$ bundle install tartalmazza a Bootstrap CSS
erősítse meg, hogy az alkalmazás css fájlja .scss kiterjesztést használ. Lehet, hogy egy .css fájl, amely esetben a következőkkel kell módosítania:
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss távolítson el minden *= require and *= require_tree utasítások a Sass fájlból, és ehelyett használja a @import Sass fájlok importálásához. Ezután importálja a bootstrap stílusokat!
//app/assets/stylesheets/application.scss @import "bootstrap"; most már minden bootstrap stílus készen áll! Még nem végeztünk.
tartalmazza a Bootstrap Javascriptet
sok Bootstrap összetevő a JavaScriptre és a jQuery-re támaszkodik, ezért importálnunk kell a Bootstrap javascript fájlokat, és telepítenünk kell a jQuery-t, ha szükséges. jQuery már tartalmazza, ha a Rails verzió kevesebb 5.1. Ebben az esetben egyszerűen vegye fel a bootstrap-ot és a popper-t (a Javascript könyvtár bootstrap-je a pozícionálástól függ) a app/assets/javascripts/application.js manifest fájlba.
//app/assets/javascripts/application.js //= require popper //= require bootstrap Ha a Rails verziója 5.1+, akkor be kell illesztenie a jQuery-t. Ehhez telepítse a jquery-rails gem, bundle intsall majd adja hozzá a könyvtárakat a application.js manifest fájlhoz. Például:
#GEMFILE gem 'jquery-rails' $ bundle install //app/assets/javascripts/application.js //= require jquery3 //= require popper //= require bootstrap most készen állunk a stílusok testreszabására!
Bootstrap testreszabása
sok Bootstrap változó van, amelyeket megadhat, hogy az alkalmazás saját egyéni stílusát adja meg. Csak gyorsan megváltoztatjuk a test háttérszínét és a téma színeit, hogy gyorsan megmutassuk, hogyan kell elkezdeni. A lényeg az, hogy ezeket a változókat a @import "bootstrap"; sor előtt kell beállítania.
megváltoztatjuk a téma színeit, hogy megfeleljenek a Bootstrap theming webhely jeltémájának, és a test hátterét világosszürkére változtatjuk.
//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 most már használhatja a szabványos Bootstrap stílusokat, de az Ön egyedi színei lesznek!
.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 sok más ügyes trükk és segédprogram van, amelyet a Bootstrap nyújt az alkalmazás megjelenésének további testreszabásához. Azt javaslom, hogy olvassa el a dokumentációt, hogy többet megtudjon, de remélem, hogy a fentiek segítenek az indulásban.
