der er et par forskellige måder at integrere Bootstrap i din Rails 5-app, men vi får det til at fungere ved at installere den officielle bootstrap-perle. Instruktionerne på perlens github-side er gode, så det følgende er egentlig bare et genoptryk af, hvad du finder der.
Tilføj perlen til din Gemfile.
#GEMFILE gem 'bootstrap', '~> 4.3.1' Kør bundle install i din kommandolinje.
$ bundle install Inkluder Bootstrap CSS
Bekræft, at din applikation css-fil bruger en.scss udvidelse. Det kan være en .css fil, i hvilket tilfælde du bliver nødt til at ændre den med følgende:
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss Fjern enhver *= require og *= require_tree udsagn fra sass-filen, og brug i stedet @import til at importere Sass-filer. Derefter importere bootstrap stilarter!
//app/assets/stylesheets/application.scss @import "bootstrap"; Du har nu fået alle bootstrap stilarter klar til at gå! Vi er dog ikke helt færdige.
Inkluder Bootstrap Javascript
mange af Bootstrap-komponenterne er afhængige af Javascript og jforgery, så vi er nødt til at importere Bootstrap javascript-filerne og installere jforgery, hvis vi har brug for det. er allerede inkluderet, hvis din Rails version er mindre 5.1. I så fald skal du blot inkludere bootstrap og popper (et Javascript-bibliotek bootstrap afhænger af positionering) i din app/assets/javascripts/application.js manifest-fil.
//app/assets/javascripts/application.js //= require popper //= require bootstrap Hvis din Rails-version er 5.1+, skal du medtage JK. For at gøre det skal du installere jquery-rails gem, bundle intsall og derefter tilføje bibliotekerne til din application.js manifest-fil. For eksempel:
#GEMFILE gem 'jquery-rails' $ bundle install //app/assets/javascripts/application.js //= require jquery3 //= require popper //= require bootstrap nu er vi klar til at tilpasse stilarterne!
Tilpas Bootstrap
der er mange Bootstrap-variabler, som du kan definere for at give din app sin egen brugerdefinerede stil. Vi ændrer bare hurtigt kroppens baggrundsfarve og temafarverne for hurtigt at vise, hvordan man kommer i gang. Nøglepunktet er, at du skal indstille disse variabler før din @import "bootstrap"; linje.
Vi ændrer temafarverne for at matche signaltemaet fra dette Bootstrap-temasite og ændre vores kropsbaggrund til en lysegrå.
//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 bruge standard Bootstrap stilarter, men de vil have dine brugerdefinerede farver!
.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 Der er mange andre pæne tricks og værktøjer, som Bootstrap giver for yderligere at tilpasse udseendet og følelsen af din app. Jeg vil anbefale at læse dokumentationen for at lære mere, men jeg håber, at ovenstående hjælper dig i gang.
