Instalowanie Bootstrap 3 w aplikacji Rails

112

Próbuję zainstalować Bootstrap 3.0 w mojej aplikacji Rails. Niedawno ukończyłem samouczek Michaela Hartla i teraz próbuję zbudować własny system przy użyciu nowej wersji Bootstrap, ale mam kilka pytań, których nie jestem pewien.

Moje specyfikacje systemowe:

  • OS X Mountain Lion na MBP
  • Szyny 4.0
  • Ruby 2.0

Mam pytania:

  1. Jaki klejnot najlepiej wykorzystać w moim pliku Gemfile? Kilka z nich znalazłem.
  2. Co mam zaimportować na swoje custom.css.scss? Czytałem gdzieś, że różni się od 2.3.2.
  3. Czy jest jeszcze coś, co muszę zrobić, aby Bootstrap działał, czy też pozostałe kroki są identyczne z tymi, które wykonałem dla Bootstrap 2.3.2?

Edytować

Oto co najpierw mówi projekt bootstrap-rails na GitHub :

gem 'anjlab-bootstrap-rails', :require => 'bootstrap-rails',
                              :github => 'anjlab/bootstrap-rails'

Następnie mówi:

gem 'anjlab-bootstrap-rails', '>= 3.0.0.0', :require => 'bootstrap-rails'

Czy oni robią to samo, czy też musisz robić oba?

ruby-on-rails ruby twitter-bootstrap-3 megashigger
źródło

Odpowiedzi:

272

Właściwie nie potrzebujesz do tego klejnotu, oto krok, aby zainstalować Bootstrap 3 w RoR

  • Pobierz Bootstrap

  • Kopiuj:

    bootstrap-dist/css/bootstrap.css i bootstrap-dist/css/bootstrap.min.css

    Do: vendor/assets/stylesheets

  • Kopiuj:

    bootstrap-dist/js/bootstrap.js i bootstrap-dist/js/bootstrap.min.js

    Do: vendor/assets/javascripts

  • Aktualizacja: app/assets/stylesheets/application.css poprzez dodanie:

    *= require bootstrap.min

  • Aktualizacja: app/assets/javascripts/application.js poprzez dodanie:

    //= require bootstrap.min

Dzięki temu możesz zaktualizować bootstrap w dowolnym momencie, nie musisz czekać na aktualizację klejnotu. Również w przypadku tego podejścia potok zasobów będzie używać zminimalizowanych wersji w środowisku produkcyjnym.

jastrząb
źródło
2
Zgadzam się. Zauważyłem również, że bezpośrednie wstawianie plików powoduje mniej problemów w prekompilowaniu zasobów (np. Przy wysyłaniu do Heroku).
Amy.js
26
Czy jest jakaś korzyść z włączenia zminimalizowanych plików vendor/assets/{stylesheets|javascripts}? Koła zębate powinny zminimalizować pliki, które są zawarte w app/assets/{stylesheets|javascripts}.
jrhorn424
16
Jak dołączyć pliki obrazów i czcionek?
wwli
5
@wwli - Zobacz moją odpowiedź poniżej. Wyjaśnia, jak dodać glify i czcionki.
rvg
4
dlaczego kopiujesz zarówno bootstrap, jak i bootstrap.min?
JohnMerlino,
62

Jak wielu wie, klejnot nie jest potrzebny.

Kroki do podjęcia:

  1. Pobierz Bootstrap

  2. Kopiuj 

    bootstrap/dist/css/bootstrap.css
bootstrap/dist/css/bootstrap.min.css

    do: app/assets/stylesheets

  3. Kopiuj 

    bootstrap/dist/js/bootstrap.js
bootstrap/dist/js/bootstrap.min.js

    do: app/assets/javascripts

  4. Dołączyć do: app/assets/stylesheets/application.css

    * = wymagany bootstrap

  5. Dołączyć do: app/assets/javascripts/application.js

    // = wymagaj bootstrap

To wszystko. Jesteś gotowy, aby dodać nowy fajny szablon Bootstrap.

Dlaczego app/zamiast vendor/?

Ważne jest, aby dodać pliki do aplikacji / zasobów , aby w przyszłości móc nadpisywać style Bootstrap.

Jeśli później zechcesz dodać custom.css.scssplik z niestandardowymi stylami. Będziesz mieć coś podobnego do tego w application.css:

 *= require bootstrap                                                            
 *= require custom

Jeśli umieściłeś pliki bootstrap w aplikacji / zasobach , wszystko działa zgodnie z oczekiwaniami. Ale jeśli umieścisz je w dostawcy / zasobach , pliki Bootstrap zostaną załadowane jako ostatnie. Lubię to:

<link href="/assets/custom.css?body=1" media="screen" rel="stylesheet">
<link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet">

Dlatego niektóre z Twoich dostosowań nie będą używane, ponieważ style Bootstrap je zastąpią.

Powód tego

Railsy będą szukać zasobów w wielu lokalizacjach; aby uzyskać listę tych lokalizacji, możesz to zrobić:

$ rails console
> Rails.application.config.assets.paths

W danych wyjściowych zobaczysz, że aplikacja / zasoby mają pierwszeństwo, dlatego ładuje się je najpierw.

givanse
źródło
4
Czy kolejność instrukcji require w pliku application.css nie wpływa na kolejność wczytywania plików, a nie na kolejność katalogów na liście ścieżek? Kolejność ścieżek zazwyczaj określa, która wersja pliku zostanie załadowana, jeśli zostanie znaleziona w wielu katalogach zawartych na liście ścieżek. Jeśli nie, w jaki sposób wpływa na kolejność wymagań?
Kickingbull,
2
Nie kopiuj zminimalizowanych wersji, w przeciwnym razie otrzymasz podwójne dołączenie później (wygląda na to, że 'require_tree.' Działa w ten sposób?). Nie mogłem otworzyć żadnych list rozwijanych po zainstalowaniu klejnotu booty tylko z powodu tego podwójnego uwzględnienia.
Kourindou Hime
1
Komentarz @Kourindou Hime wydaje się wart uwagi. Nie mogłem otworzyć menu, dopóki nie usunąłem plików .min.
Paco Abato,
35

Ta odpowiedź jest dla tych z Was, którzy chcą zainstalować Bootstrap 3 w swojej aplikacji Rails bez użycia klejnotu. Są na to dwa proste sposoby, które zajmują mniej niż 10 minut. Wybierz ten, który najlepiej odpowiada Twoim potrzebom. Glyphicons i Javascript działają i przetestowałem je również z najnowszą wersją beta Rails 4.1.0.

  1. Używanie Bootstrap 3 z Railsami 4 - Pliki Bootstrap 3 są kopiowane do katalogu dostawcy twojej aplikacji.

  2. Dodawanie Bootstrap z CDN do aplikacji Rails - Pliki Bootstrap 3 są udostępniane z Bootstrap CDN .

Numer 2 powyżej jest najbardziej elastyczny. Wszystko, co musisz zrobić, to zmienić numer wersji przechowywany w pomocniku układu. Możesz więc uruchomić wybraną wersję Bootstrap, niezależnie od tego, czy jest to 3.0.0, 3.0.3, czy nawet starsza wersja Bootstrap 2.

rvg
źródło
Nie wydaje się, żeby to działało. Ciągle wyszukuje localhost:3000/fonts/glyphicons-halflings-regular.svgjako przykład w konsoli Chrome, a glify nie pojawiają się (jako 404).
Steve
1
@Steve - Zakładam, że masz problem z programowaniem i wybrałeś punkt 1 powyżej. Jeśli to prawda, sprawdzę dokładnie, czy skopiowałeś katalog czcionek Bootstrap i całą jego zawartość do /vendor/assets/swojego projektu. Powinieneś również sprawdzić plik application.css, aby upewnić się, że potrzebujesz pliku bootstrap.min i że masz nadpisania @ font-face. SCSS jest obecnie szeroko stosowany. Jeśli tego używasz, musisz zmienić „src: url” na „src: asset-url” w nadpisaniach @ font-face. Na dole posta znajduje się również przykładowy projekt, który może pomóc.
rvg
Nie miałem końca problemów z czcionkami - działało dobrze podczas programowania, ale nie w produkcji. Skończyło się na umieszczeniu ich w public / fonts
ChrisJ
22

Twitter ma teraz gotową do użycia wersję bootstrapu z dołączonym gemem, więc dodanie go do Railsów jest łatwiejsze niż kiedykolwiek.

Po prostu dodaj do swojego pliku gem:

gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2
gem 'bootstrap-sass', '~> 3.1.1'

bundle install i zrestartuj serwer, aby udostępnić pliki za pośrednictwem potoku.

Istnieje również obsługa tylko kompasu i sass: https://github.com/twbs/bootstrap-sass

Eneko Alonso
źródło
Dzięki. Kluczowy punkt z pliku readme na githubie dla początkujących; „Jeśli właśnie wygenerowałeś nową aplikację Railsów, może ona zawierać zamiast niej plik .css. Jeśli ten plik istnieje, będzie obsługiwany zamiast Sass, więc zmień jego nazwę ...”
Brett
5

gem bootstrap-sass

bootstrap-sass można łatwo przenieść do Railsów za pomocą potoku aktywów.

W swoim Gemfile musisz dodać gem bootstrap-sass i upewnić się, że gem sass-rails jest obecny - jest on dodawany domyślnie do nowych aplikacji Railsowych.

gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2 gem 'bootstrap-sass', '~> 3.0.3.0'

bundle install i zrestartuj serwer, aby udostępnić pliki za pośrednictwem potoku.

Źródło: http://rubydoc.info/gems/bootstrap-sass/3.0.3.0/frames

Bruno
źródło
3

Dla mnie najłatwiej to zrobić

1) Pobierz i rozpakuj bootstrap do vendor

2) Dodaj ścieżkę ładowania początkowego do pliku config

config.assets.paths << Rails.root.join("vendor/bootstrap-3.3.6-dist")

3) Wymagaj ich

w css *= require css/bootstrap

w js //= require js/bootstrap

Gotowe!

Ta metoda sprawia, że ​​czcionki ładują się bez żadnej innej specjalnej konfiguracji i nie wymagają przenoszenia plików bootstrap z ich samodzielnego katalogu.

Vinhboy
źródło
3

Mamy nadzieję, że użycie tej gałęzi rozwiąże problem:

gem 'twitter-bootstrap-rails',
  git: 'git://github.com/seyhunak/twitter-bootstrap-rails.git',
  branch: 'bootstrap3'
chanakya devraj
źródło
1

Myślę, że najbardziej aktualną perełką nowej wersji bootstrapa jest forma anjlab .

Ale nie wiem, czy obecnie działa dobrze z innymi klejnotami, takimi jak simple_form, kiedy to robisz rails generate simple_form:install --bootstrap, itp. Być może będziesz musiał edytować niektóre inicjatory lub konfiguracje, aby pasowały do ​​nowej wersji bootstrap.

tbraun89
źródło
Dzięki za odpowiedzi. Więc „gem anjlab” w moim pliku Gemfile to wszystko, co muszę zrobić @ tbraun89?
megashigger
Plik Readme znajduje się na stronie github. Obecny klejnot to gem "anjlab-bootstrap-rails", "~> 3.0.0.1".
tbraun89
W gem 'anjlab-bootstrap-rails', '>= 3.0.0.0', :require => 'bootstrap-rails'
pliku
Dzięki! Dodałem coś w pytaniu. Czy mógłbyś wyjaśnić część po „edycji”?
megashigger
Pierwsza ładuje pliki bezpośrednio z github, więc kiedy wykonujesz aktualizację paczki, będziesz mieć najnowszą wersję, druga ładuje klejnot z rubygems, która w tej chwili jest w wersji 3.0.0.1. (2 dni)
tbraun89
0

Właściwie miałem łatwe obejście tego problemu, w którym prawie drapię się po głowie, jak to działa. hahah!

Cóż, najpierw pobrałem Bootstrap (skompilowana wersja css i js).

Następnie wkleiłem wszystkie pliki css bootstrap do pliku app/assets/stylesheets/.

Następnie wkleiłem wszystkie pliki js bootstrap do pliku app/assets/javascripts/.

Ponownie załadowałem stronę i opiszę! Właśnie dodałem bootstrap w moim RoR!

tamaladrain
źródło