det finns några olika sätt att integrera Bootstrap i din Rails 5 app, men vi får det att fungera genom att installera den officiella bootstrap gem. Instruktionerna på gem ’ s github-sida är bra, så Följande är egentligen bara en utskrift av vad du hittar där.
Lägg till pärlan i ditt Gemfile.
#GEMFILE gem 'bootstrap', '~> 4.3.1' kör bundle install I kommandoraden.
$ bundle install inkludera BOOTSTRAP CSS
bekräfta att din ansökan css-fil använder en .scss förlängning. Det kan vara en .css fil i vilket fall du måste ändra den med följande:
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss Ta Bort Alla *= require och *= require_tree uttalanden från sass-filen och använd istället @import för att importera Sass-filer. Importera sedan bootstrap-stilar!
//app/assets/stylesheets/application.scss @import "bootstrap"; Du har nu alla bootstrap-stilar redo att gå! Vi är inte riktigt klara.
inkludera Bootstrap Javascript
många av Bootstrap-komponenterna är beroende av Javascript och jQuery, så vi måste importera Bootstrap javascript-filerna och installera jQuery om vi behöver. jQuery ingår redan om din Rails-version är mindre 5.1. I så fall inkluderar du bara bootstrap och popper (ett Javascript-bibliotek bootstrap beror på för positionering) i din app/assets/javascripts/application.js manifest-fil.
//app/assets/javascripts/application.js //= require popper //= require bootstrap om din Rails-version är 5.1+ måste du inkludera jQuery. För att göra det, installera jquery-rails gem, bundle intsall och lägg sedan till biblioteken i din application.js manifest-fil. Till exempel:
#GEMFILE gem 'jquery-rails' $ bundle install //app/assets/javascripts/application.js //= require jquery3 //= require popper //= require bootstrap Nu är vi redo att anpassa stilar!
anpassa Bootstrap
det finns många Bootstrap-variabler som du kan definiera för att ge din app sin egen anpassade stil. Vi ändrar bara snabbt bakgrundsfärgen och temafärgerna för att snabbt visa hur du kommer igång. Nyckelpunkten är att du måste ställa in dessa variabler före din @import "bootstrap"; linje.
vi ändrar temafärgerna för att matcha signaltemat från den här Bootstrap-temasidan och ändrar vår kroppsbakgrund till en ljusgrå.
//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 Nu kan du använda standard Bootstrap stilar men de kommer att ha dina egna färger!
.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 finns många andra snygga knep och verktyg som Bootstrap tillhandahåller för att ytterligare anpassa utseendet på din app. Jag rekommenderar att du läser igenom dokumentationen för att lära dig mer, men jag hoppas att ovanstående hjälper dig att komma igång.
