Bootstrap voidaan integroida Rails 5-sovellukseen muutamalla eri tavalla, mutta saamme sen toimimaan asentamalla virallisen bootstrap-jalokiven. Gemin github-sivun ohjeet ovat loistavia, joten seuraava on oikeastaan vain uusintapainos siitä, mitä löydät sieltä.
Lisää jalokivi Gemfile.
#GEMFILE gem 'bootstrap', '~> 4.3.1' Run bundle install komentorivillä.
$ bundle install Include the Bootstrap CSS
Confirm that your application CSS file uses a .scss extension. Se voi olla .css tiedosto, jolloin sitä on muutettava seuraavasti:
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss Poista mikä tahansa *= require ja *= require_tree lausumat Sass-tiedostosta, ja käytä sen sijaan @import Sass-tiedostojen tuomiseen. Tuo sitten bootstrap tyylejä!
//app/assets/stylesheets/application.scss @import "bootstrap"; sinulla on nyt kaikki bootstrap-tyylit valmiina! Emme ole vielä valmiita.
sisältävät Bootstrap JavaScriptin
monet Bootstrap-komponentit tukeutuvat Javascriptiin ja jqueryyn, joten Bootstrap javascript-tiedostot on tuotava ja jQuery tarvittaessa asennettava. jQuery on jo mukana, jos Rails versio on vähemmän 5.1. Siinä tapauksessa, yksinkertaisesti sisällyttää bootstrap ja popper (Javascript kirjasto bootstrap riippuu paikannus) teidän app/assets/javascripts/application.js manifest tiedosto.
//app/assets/javascripts/application.js //= require popper //= require bootstrap Jos Rails-versiosi on 5.1+, sinun on sisällytettävä mukaan jQuery. Tätä varten asenna jquery-rails gem, bundle intsall ja lisää sitten kirjastot application.js manifest-tiedostoon. Esimerkiksi:
#GEMFILE gem 'jquery-rails' $ bundle install //app/assets/javascripts/application.js //= require jquery3 //= require popper //= require bootstrap nyt ollaan valmiita muokkaamaan tyylejä!
Mukauta Bootstrap
on olemassa paljon Bootstrap-muuttujia, jotka voit määrittää antamaan sovelluksellesi oman mukautetun tyylin. Me vain nopeasti muuttaa kehon taustaväri ja teema värit nopeasti näyttää, miten päästä alkuun. Olennaista on, että nämä muuttujat on asetettava ennen @import "bootstrap"; – riviä.
vaihdamme teeman värit vastaamaan tämän Bootstrap-teemasivuston signal-teemaa ja muutamme vartalomme taustan vaaleanharmaaksi.
//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 nyt voit käyttää tavallisia Bootstrap-tyylejä, mutta niissä on omat värisi!
.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 Bootstrap tarjoaa monia muita siistejä temppuja ja apuohjelmia, joiden avulla voit edelleen muokata sovelluksen ulkoasua. Suosittelen lukemaan asiakirjat lisätietoja, mutta toivon, että edellä auttaa sinut alkuun.
