istnieje kilka różnych sposobów integracji Bootstrap z aplikacją Rails 5, ale uruchomimy to, instalując oficjalny klejnot bootstrap. Instrukcje na stronie Gem ’ s github są świetne, więc poniższe jest naprawdę tylko przedrukiem tego, co tam znajdziesz.
Dodaj klejnot do swojego Gemfile.
#GEMFILE gem 'bootstrap', '~> 4.3.1' Uruchombundle install w wierszu poleceń.
$ bundle install Dołącz Bootstrap CSS
potwierdź, że plik CSS aplikacji używa rozszerzenia.scss. Może to być plik .css, w którym to przypadku musisz go zmienić za pomocą następujących opcji:
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss Usuń dowolny *= require I *= require_tree z pliku Sassa, a zamiast tego użyj @import do importowania plików Sassa. Następnie zaimportuj style bootstrap!
//app/assets/stylesheets/application.scss @import "bootstrap"; masz już gotowe wszystkie style bootstrap! Jeszcze nie skończyliśmy.
Dołącz Bootstrap Javascript
wiele komponentów Bootstrap opiera się na Javascript i jQuery, więc musimy zaimportować pliki Bootstrap javascript i zainstalować jQuery, jeśli zajdzie taka potrzeba. jQuery jest już dołączony, jeśli Twoja wersja Rails jest mniejsza niż 5.1. W takim przypadku po prostu dołącz bootstrap i popper (Bootstrap biblioteki Javascript zależy od pozycjonowania) do pliku manifestu app/assets/javascripts/application.js.
//app/assets/javascripts/application.js //= require popper //= require bootstrap Jeśli Twoja wersja Rails to 5.1+, musisz dołączyć jQuery. Aby to zrobić, zainstalujjquery-rails gem,bundle intsall, a następnie dodaj biblioteki do pliku manifestuapplication.js. Na przykład:
#GEMFILE gem 'jquery-rails' $ bundle install //app/assets/javascripts/application.js //= require jquery3 //= require popper //= require bootstrap teraz jesteśmy gotowi, aby dostosować style!
Dostosuj Bootstrap
istnieje wiele zmiennych Bootstrap, które można zdefiniować, aby nadać aplikacji własny niestandardowy styl. Po prostu szybko zmienimy kolor tła ciała i kolory motywu, aby szybko pokazać, jak zacząć. Najważniejsze jest to, że musisz ustawić te zmienne przed linią@import "bootstrap";.
zmienimy kolory motywu, aby pasowały do motywu sygnału z tej strony o tematyce Bootstrap i zmienimy tło ciała na jasnoszare.
//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 teraz możesz używać standardowych stylów Bootstrap, ale będą one miały własne kolory!
.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 istnieje wiele innych ciekawych sztuczek i narzędzi, które zapewnia Bootstrap, aby jeszcze bardziej dostosować wygląd i działanie aplikacji. Polecam przeczytanie dokumentacji, aby dowiedzieć się więcej, ale mam nadzieję, że powyższe pomoże Ci zacząć.
