Existuje několik různých způsobů, jak integrovat Bootstrap do Kolejnice 5 aplikace, ale můžeme pracovat i po instalaci oficiální bootstrap gem. Pokyny na stránce GitHub gem jsou skvělé, takže následující je opravdu jen dotisk toho, co tam najdete.
přidejte drahokam do svého Gemfile.
#GEMFILE gem 'bootstrap', '~> 4.3.1' spusťte bundle install v příkazovém řádku.
$ bundle install Obsahovat Bootstrap CSS
Potvrďte, že vaše aplikace css soubor používá .scss rozšíření. To může být .css soubor v takovém případě budete muset změnit následující:
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss Odstranit všechny *= require*= require_tree prohlášení od Sass souboru, a místo toho použít @import importovat Sass soubory. Poté importujte styly bootstrap!
//app/assets/stylesheets/application.scss @import "bootstrap"; Nyní máte všechny bootstrap styly připravené jít! Ještě jsme ale neskončili.
Obsahovat Bootstrap Javascript
Mnoho Bootstrap komponenty spoléhat na Javascript a jQuery, takže musíme dovážet Bootstrap javascript soubory a nainstalovat jQuery, když to potřebujeme. jQuery je již zahrnuta, pokud vaše verze Rails je menší 5.1. V takovém případě jednoduše zahrňte bootstrap a popper (bootstrap knihovny JavaScriptu závisí na umístění) do souboru manifestu app/assets/javascripts/application.js.
//app/assets/javascripts/application.js //= require popper //= require bootstrap Pokud je vaše verze Rails 5.1+, budete muset zahrnout jQuery. K tomu, namontujte jquery-rails gem, bundle intsall a pak přidat do knihovny application.js soubor manifestu. Například:
#GEMFILE gem 'jquery-rails' $ bundle install //app/assets/javascripts/application.js //= require jquery3 //= require popper //= require bootstrap Nyní jsme připraveni přizpůsobit styly!
Přizpůsobit Bootstrap
Existuje mnoho Bootstrap proměnné, které můžete definovat, aby vaše aplikace svůj vlastní styl. Rychle změníme barvu pozadí těla a barvy motivu, abychom rychle ukázali, jak začít. Klíčovým bodem je, že musíte tyto proměnné nastavit před řádek @import "bootstrap";.
změníme barvy motivu tak, aby odpovídaly motivu signálu z tohoto webu Bootstrap theming a změníme pozadí těla na světle šedou.
//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 Nyní můžete použít standardní Bootstrap styly, ale budou mít své vlastní barvy!
.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 Existuje mnoho jiné elegantní triky a nástroje, které Bootstrap nabízí dále přizpůsobit vzhled a dojem z vaší aplikace. Doporučil bych si přečíst dokumentaci, abych se dozvěděl více,ale doufám, že výše uvedené vám pomůže začít.
