Bootstrap 3'ü Rails Uygulamasına Yükleme

Rails uygulamama Bootstrap 3.0 yüklemeye çalışıyorum. Yakın zamanda Michael Hartl'ın eğitimini bitirdim ve şimdi Bootstrap'in bu yeni sürümünü kullanarak kendi sistemimi kurmaya çalışıyorum, ancak emin olmadığım birkaç sorum var.

Sistem özelliklerim:

• MBP'de OS X Mountain Lion
• Raylar 4.0
• Ruby 2.0

Sahip olduğum sorular:

1. Gemfile'ımda kullanılacak en iyi mücevher hangisidir? Birkaç tane buldum.
2. Ne alacağım custom.css.scss? 2.3.2'den farklı bir yerde okudum.
3. Bootstrap'in çalışması için yapmam gereken başka bir şey var mı, yoksa kalan adımlar Bootstrap 2.3.2 için izlediklerimle aynı mı?

Düzenle

İşte GitHub'daki bootstrap-rails projesinin ilk olarak yapması gereken şey:

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

Sonra şunu yapmanı söylüyor:

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

Aynı şeyi mi yapıyorlar yoksa ikisini de yapmak zorunda mısınız?

Aslında bunun için gem'e ihtiyacınız yok, işte Bootstrap 3'ü RoR'da kurma adımı

• Bootstrap'i indirin

• Kopya:

  bootstrap-dist/css/bootstrap.css ve bootstrap-dist/css/bootstrap.min.css

  Kime: vendor/assets/stylesheets

• Kopya:

  bootstrap-dist/js/bootstrap.js ve bootstrap-dist/js/bootstrap.min.js

  Kime: vendor/assets/javascripts

• Güncelleme: app/assets/stylesheets/application.css ekleyerek:

  *= require bootstrap.min

• Güncelleme: app/assets/javascripts/application.js ekleyerek:

  //= require bootstrap.min

Bununla istediğiniz zaman bootstrap'i güncelleyebilirsiniz, gem'in güncellenmesini beklemenize gerek kalmaz. Ayrıca bu yaklaşımla varlıklar boru hattı üretimde küçültülmüş versiyonları kullanacaktır.

Birçoğunun bildiği gibi, bir mücevhere ihtiyaç yoktur.

Atılacak adımlar:

1. Bootstrap'i indirin
   • Doğrudan indirme bağlantısı Bootstrap 3.1.1
   • Veya http://getbootstrap.com/ adresine gidin

2. kopya

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

   için: app/assets/stylesheets

3. kopya

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

   için: app/assets/javascripts

4. Şuna ekle: app/assets/stylesheets/application.css

   * = önyükleme gerektirir

5. Şuna ekle: app/assets/javascripts/application.js

   // = önyükleme gerektir

Hepsi bu. Yeni ve harika bir Bootstrap şablonu eklemeye hazırsınız.

Neden app/yerine vendor/?

Dosyaları uygulamaya / varlıklara eklemek önemlidir , bu nedenle gelecekte Bootstrap stillerinin üzerine yazabileceksiniz.

Daha sonra custom.css.scssözel stiller içeren bir dosya eklemek isterseniz . Şuna benzer bir şeye sahip olacaksınız application.css:

 *= require bootstrap                                                            
 *= require custom  

Önyükleme dosyalarını uygulama / varlıklara yerleştirdiyseniz , her şey beklendiği gibi çalışır. Ancak, bunları satıcı / varlıklara yerleştirdiyseniz , Bootstrap dosyaları en son yüklenecektir. Bunun gibi:

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

Öyleyse, kişiselleştirmelerinizden bazıları Bootstrap stilleri onları geçersiz kılacağından kullanılmayacaktır.

Bunun arkasındaki sebep

Rails birçok konumdaki varlıkları arayacaktır; bu konumların bir listesini almak için bunu yapabilirsiniz:

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

Çıktıda, uygulamanın / varlıkların öncelikli olduğunu, dolayısıyla önce yüklediğini göreceksiniz .

Bu cevap, Bootstrap 3'ü Rails uygulamanıza bir mücevher kullanmadan yüklemek isteyenler içindir. Bunu yapmanın 10 dakikadan kısa süren iki basit yolu vardır. İhtiyaçlarınıza en uygun olanı seçin. Glyphicons ve Javascript çalışıyor ve onları en son Rails 4.1.0 beta sürümüyle test ettim.

1. Bootstrap 3'ü Rails 4 ile Kullanma - Bootstrap 3 dosyaları uygulamanızın satıcı dizinine kopyalanır.

2. Bir CDN'den Rails uygulamanıza Bootstrap ekleme - Bootstrap 3 dosyaları Bootstrap CDN'den sunulur .

Yukarıdaki 2 numara en esnek olanıdır. Tek yapmanız gereken, bir düzen yardımcısında depolanan sürüm numarasını değiştirmek. Böylece, 3.0.0, 3.0.3 veya hatta daha eski Bootstrap 2 sürümleri olsun, seçtiğiniz Bootstrap sürümünü çalıştırabilirsiniz.

Twitter'da artık gem dahil, sass için hazır bir önyükleme sürümü var , bu yüzden onu Rails'e eklemek her zamankinden daha kolay.

Basitçe gemfile dosyanıza aşağıdakileri ekleyin:

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

bundle install ve dosyaları ardışık düzen üzerinden kullanılabilir hale getirmek için sunucunuzu yeniden başlatın.

Yalnızca pusula ve sass desteği de vardır: https://github.com/twbs/bootstrap-sass

Kullandığım https://github.com/yabawock/bootstrap-sass-rails

Oldukça basit olan kurulum, hızlı mücevher güncellemeleri ve takipleri ve gerektiğinde hızlı düzeltmeler.

gem bootstrap-sass

bootstrap-sass'ın varlık ardışık düzeniyle Rails'e düşmesi kolaydır.

Gemfile'ınıza bootstrap-sass gemini eklemeniz ve sass-rails geminin mevcut olduğundan emin olmanız gerekir - varsayılan olarak yeni Rails uygulamalarına eklenir.

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

bundle install ve dosyaları ardışık düzen üzerinden kullanılabilir hale getirmek için sunucunuzu yeniden başlatın.

Kaynak: http://rubydoc.info/gems/bootstrap-sass/3.0.3.0/frames

Benim için bunu yapmanın en basit yolu

1) Bootstrap'i indirin ve vendor

2) Yapılandırmanıza önyükleme yolunu ekleyin

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

3) Onları gerektirir

css'de *= require css/bootstrap

js'de //= require js/bootstrap

Bitti!

Bu yöntemler, yazı tiplerinin başka herhangi bir özel yapılandırma olmadan yüklenmesini sağlar ve önyükleme dosyalarının kendi kendine yeten dizinlerinin dışına taşınmasını gerektirmez.

Bu şubeyi kullanmak umarım sorunu çözecektir:

gem 'twitter-bootstrap-rails',
  git: 'git://github.com/seyhunak/twitter-bootstrap-rails.git',
  branch: 'bootstrap3'

Yeni önyükleme sürümü için en güncel cevher form anjlab olduğunu düşünüyorum .

Ancak, şu anda basit_form gibi diğer değerli taşlarla iyi çalışıp çalışmadığını bilmiyorum rails generate simple_form:install --bootstrap, vb. Yeni önyükleme sürümüne uyması için bazı başlatıcıları veya yapılandırmaları düzenlemeniz gerekebilir.

Aslında bunun nasıl çalışacağına dair neredeyse kafamı kaşıdığım bu konuda kolay bir çözüm buldum. hahah!

İlk önce Bootstrap'i (derlenmiş css ve js sürümü) indirdim.

Sonra tüm bootstrap css dosyalarını app/assets/stylesheets/.

Ve sonra tüm bootstrap js dosyalarını app/assets/javascripts/.

Sayfayı ve wallah'ı yeniden yükledim! RoR'uma yeni önyükleme ekledim!