Sådan tilføjes og tilpasses Bootstrap 4 i en Rails 5-app

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!

tilpas bootstrap

.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.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.