Installazione di Bootstrap 3 sull’app Rails

Sto cercando di installare Bootstrap 3.0 sulla mia app Rails. Recentemente ho terminato il tutorial di Michael Hartl e ora sto provando a build il mio sistema usando questa nuova versione di Bootstrap, ma ho alcune domande di cui non sono sicuro.

Le mie specifiche di sistema:

  • OS X Mountain Lion su MBP
  • Rails 4.0
  • Ruby 2.0

Domande che ho:

  1. Qual è la gem migliore da usare nel mio Gemfile? Ho trovato alcuni di loro.
  2. Cosa posso importare sul mio custom.css.scss ? Ho letto da qualche parte che è diverso dal 2.3.2.
  3. C’è qualcos’altro che devo fare per far funzionare Bootstrap, o i passi rimanenti sono identici a quelli che ho seguito per Bootstrap 2.3.2?

modificare

Ecco cosa dice di fare il progetto bootstrap-rails su GitHub :

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

Quindi dice di fare:

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

Fanno la stessa cosa o devi farli entrambi?

In realtà non hai bisogno di gem per questo, ecco il passaggio per installare Bootstrap 3 in RoR

  • Scarica Bootstrap

  • Copia:

    bootstrap-dist/css/bootstrap.css e bootstrap-dist/css/bootstrap.min.css

    A: vendor/assets/stylesheets

  • Copia:

    bootstrap-dist/js/bootstrap.js e bootstrap-dist/js/bootstrap.min.js

    A: vendor/assets/javascripts

  • Aggiornamento: app/assets/stylesheets/application.css aggiungendo:

     *= require bootstrap.min 
  • Aggiornamento: app/assets/javascripts/application.js aggiungendo:

     //= require bootstrap.min 

Con questo puoi aggiornare bootstrap ogni volta che vuoi, non devi aspettare di essere aggiornato. Anche con questo approccio, la pipeline delle risorse utilizzerà versioni minificate in produzione.

Come molti sanno, non c’è bisogno di una gem.

Passi da compiere:

  1. Scarica Bootstrap
  2. copia

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

    a: app/assets/stylesheets

  3. copia

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

    a: app/assets/javascripts

  4. Aggiungi a: app/assets/stylesheets/application.css

    * = richiede bootstrap

  5. Aggiungi a: app/assets/javascripts/application.js

    // = richiede bootstrap

Questo è tutto. Sei pronto per aggiungere un nuovo modello Bootstrap.


Perché app/ anziché vendor/ ?

È importante aggiungere i file alle app / risorse , quindi in futuro sarete in grado di sovrascrivere gli stili Bootstrap.

Se in un secondo momento si desidera aggiungere un file custom.css.scss con stili personalizzati. Avrai qualcosa di simile a questo in application.css :

  *= require bootstrap *= require custom 

Se hai inserito i file bootstrap in app / asset , tutto funziona come previsto. Ma, se li hai inseriti in vendor / asset , i file Bootstrap verranno caricati per ultimi. Come questo:

   

Pertanto, alcune delle personalizzazioni non verranno utilizzate poiché gli stili Bootstrap le sovrascriveranno.

Motivo dietro questo

Rails cercherà le risorse in molte località; per ottenere un elenco di queste posizioni puoi farlo:

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

Nell’output vedrai che le app / risorse hanno la precedenza, quindi la caricano prima.

Questa risposta è per quelli di voi che cercano di installare Bootstrap 3 nella vostra app Rails senza usare una gem. Ci sono due semplici modi per farlo che richiedono meno di 10 minuti. Scegli quello che soddisfa meglio le tue esigenze. Glyphicon e Javascript funzionano e li ho testati con l’ultima versione beta di Rails 4.1.0.

  1. Utilizzo di Bootstrap 3 con Rails 4 – I file Bootstrap 3 vengono copiati nella directory del fornitore dell’applicazione.

  2. Aggiunta di Bootstrap da un CDN all’applicazione Rails : i file Bootstrap 3 vengono forniti dal CDN di Bootstrap .

Il numero 2 sopra è il più flessibile. Tutto quello che devi fare è cambiare il numero di versione che è memorizzato in un helper di layout. Quindi puoi eseguire la versione Bootstrap di tua scelta, che sia 3.0.0, 3.0.3 o versioni precedenti di Bootstrap 2.

Twitter ora ha una versione di bootstrap pronte all’uso con gem inclusa, quindi è più facile che mai aggiungerla a Rails.

Aggiungi semplicemente al tuo gemfile quanto segue:

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

bundle install e riavvia il tuo server per rendere i file disponibili attraverso la pipeline.

C’è anche il supporto per bussola e solo su sass: https://github.com/twbs/bootstrap-sass

Io uso https://github.com/yabawock/bootstrap-sass-rails

Il che è praticamente un’installazione diretta, aggiornamenti rapidi delle gem e followup e soluzioni rapide nel caso sia necessario.

gem bootstrap-sass

bootstrap-sass è facile da scaricare in Rails con la pipeline di asset.

Nel tuo Gemfile devi aggiungere la gem bootstrap-sass e assicurarti che la gem sass-rails sia presente – viene aggiunta alle nuove applicazioni Rails per impostazione predefinita.

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

bundle install e riavvia il tuo server per rendere i file disponibili attraverso la pipeline.

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

Per me, il modo più semplice per farlo è

1) Scaricare e decomprimere bootstrap nel vendor

2) Aggiungi il percorso di bootstrap alla tua configurazione

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

3) Richiedili

in css *= require css/bootstrap

in js //= require js/bootstrap

Fatto!

Questo metodo consente di caricare i caratteri senza alcuna altra configurazione speciale e non richiede il trasferimento dei file di avvio dalla loro directory autonoma.

Si spera che l’utilizzo di questo ramo risolva il problema:

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

Penso che la gem più aggiornata per la nuova versione di bootstrap sia form anjlab .

Ma non so se attualmente funzioni bene con altre gemme come simple_form quando fai rails generate simple_form:install --bootstrap , ecc. rails generate simple_form:install --bootstrap dover modificare alcuni inizializzatori o configurazioni per adattarsi alla nuova versione di bootstrap.

In realtà ho avuto una soluzione facile su questo in cui quasi mi gratto la testa su come farlo funzionare. hahah!

Bene, per prima cosa ho scaricato Bootstrap (la versione css e js compilata).

Poi ho incollato tutti i file cst bootstrap app/assets/stylesheets/ .

E poi ho incollato tutti i file js di bootstrap app/assets/javascripts/ .

Ho ricaricato la pagina e wallah! Ho appena aggiunto bootstrap nel mio RoR!