Det er noen forskjellige måter å integrere Bootstrap i Rails 5 app, men vi får det til å fungere ved å installere den offisielle bootstrap gem. Instruksjonene på gem ‘ s github-side er flotte, så følgende er egentlig bare et utskrift av hva du finner der.
Legg perlen til din Gemfile.
#GEMFILE gem 'bootstrap', '~> 4.3.1' Kjørbundle install i kommandolinjen.
$ bundle install Inkluder Bootstrap CSS
Bekreft at din søknad css-fil bruker en.scss forlengelse. Det kan være en .css fil i så fall må du endre den med følgende:
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss *= require og *= require_tree setninger fra sass-filen, og bruk i stedet @import for å importere sass-filer. Deretter importere bootstrap stiler!
//app/assets/stylesheets/application.scss @import "bootstrap"; du har nå fått alle bootstrap stiler klar til å gå! Vi er ikke helt ferdige skjønt.
Inkluder Bootstrap Javascript
Mange Av Bootstrap komponenter stole På Javascript og jQuery, så vi må importere Bootstrap javascript-filer og installere jQuery hvis vi må. jQuery er allerede inkludert hvis Rails-versjonen er mindre 5.1. I så fall inkluderer du bare bootstrap og popper (Et Javascript – bibliotek bootstrap avhenger av for posisjonering) i dinapp/assets/javascripts/application.js manifest-fil.
//app/assets/javascripts/application.js //= require popper //= require bootstrap hvis Rails-versjonen din er 5.1+ , må du inkludere jQuery. For å gjøre det, installer jquery-rails perlen, bundle intsall og legg deretter til bibliotekene iapplication.js manifest-filen. For eksempel:
#GEMFILE gem 'jquery-rails' $ bundle install //app/assets/javascripts/application.js //= require jquery3 //= require popper //= require bootstrap nå er vi klare til å tilpasse stilene!
Tilpass Bootstrap
Det er mange Bootstrap variabler som du kan definere for å gi din app sin egen stil. Vi vil bare raskt endre kroppens bakgrunnsfarge og temafarger for raskt å vise hvordan du kommer i gang. Nøkkelpunktet er at du må sette disse variablene før@import "bootstrap"; – linjen.
vi vil endre tema farger for å matche signal tema fra Denne Bootstrap theming området og endre kroppen vår bakgrunn til en lys grå.
//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 Nå kan du bruke standard Bootstrap stiler, men de vil ha dine egne farger!
.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 Det er mange andre pene triks og verktøy Som Bootstrap gir for å tilpasse utseendet og følelsen av din app. Jeg vil anbefale å lese gjennom dokumentasjonen for å lære mer, men jeg håper det ovenfor hjelper deg med å komme i gang.
