Installazione di Bootstrap 3 sull'app Rails

112

Sto cercando di installare Bootstrap 3.0 sulla mia app Rails. Di recente ho terminato il tutorial di Michael Hartl e ora sto cercando di creare il mio sistema utilizzando 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 gemma migliore da usare nel mio Gemfile? Ne ho trovati alcuni.
  2. Cosa importa sul mio custom.css.scss? Ho letto da qualche parte che è diverso da 2.3.2.
  3. C'è qualcos'altro che devo fare per far funzionare Bootstrap o i passaggi 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 farle entrambe?

ruby-on-rails  ruby  twitter-bootstrap-3 
— megashigger
fonte

Risposte:

272

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

    Per: vendor/assets/stylesheets

  • Copia:

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

    Per: 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 il bootstrap ogni volta che vuoi, non è necessario aspettare che gem venga aggiornato. Anche con questo approccio la pipeline degli asset utilizzerà versioni minificate in produzione.

— falco
fonte
2
Sono d'accordo. Ho anche scoperto che l'inserimento diretto dei file comporta meno problemi nella precompilazione delle risorse (ad esempio, per il push su Heroku).
— Amy.js
26
C'è qualche vantaggio nell'includere i file minimizzati vendor/assets/{stylesheets|javascripts}? Le ruote dentate dovrebbero minimizzare i file inclusi in app/assets/{stylesheets|javascripts}.
— jrhorn424
16
Come includere file di immagini e caratteri?
— wwli
5
@wwli - Vedi la mia risposta di seguito. Spiega come aggiungere i glificoni e i caratteri.
— rvg
4
perché stai copiando sia bootstrap che bootstrap.min?
— JohnMerlino
62

Come molti sanno, non c'è bisogno di una gemma.

Passaggi da eseguire:

  1. Scarica Bootstrap

  2. copia 

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

    per: app/assets/stylesheets

  3. copia 

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

    per: 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 fantastico modello Bootstrap.

Perché app/invece di vendor/?

È importante aggiungere i file all'app / asset , quindi in futuro sarai in grado di sovrascrivere gli stili di Bootstrap.

Se in seguito desideri aggiungere un custom.css.scssfile 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 / assets , i file Bootstrap verranno caricati per ultimi. Come questo:

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

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

Motivo dietro questo

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

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

Nell'output vedrai che l' app / asset ha la precedenza, caricandola per prima.

— givanse
fonte
4
L'ordine delle istruzioni require nel file application.css non controlla l'ordine in cui i file vengono caricati piuttosto che l'ordine delle directory nell'elenco dei percorsi? L'ordine dei percorsi controlla tipicamente quale versione di un file gest caricata se si trova in più directory incluse nell'elenco dei percorsi. In caso negativo, come entra in gioco l'ordine delle istruzioni require?
— Kickingbull
2
Per favore non copiare le versioni minificate, altrimenti riceverai una doppia inclusione in seguito (sembra che 'require_tree.' Funzioni in questo modo?). Non sono riuscito ad aprire alcun menu a discesa dopo aver installato la gemma booty solo a causa di questa doppia inclusione.
— Kourindou Hime
1
Il commento di @Kourindou Hime sembra meritare attenzione. Non ho potuto aprire i menu a discesa finché non ho rimosso i file .min.
— Paco Abato
35

Questa risposta è per quelli di voi che desiderano installare Bootstrap 3 nella propria app Rails senza utilizzare una gemma. Ci sono due semplici modi per farlo che richiedono meno di 10 minuti. Scegli quello che si adatta meglio alle tue esigenze. Glyphicons e Javascript funzionano e li ho testati anche con l'ultima 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. Aggiungere Bootstrap da un CDN alla tua applicazione Rails - I file Bootstrap 3 vengono serviti dal CDN 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 anche versioni precedenti di Bootstrap 2.

— rvg
fonte
Non riesco a farlo funzionare. Continua a cercare localhost:3000/fonts/glyphicons-halflings-regular.svgcome esempio nella console Chrome e i glyphicons non vengono visualizzati (come 404).
— Steve
1
@ Steve - Ho pensato che tu stia avendo il problema in fase di sviluppo e che tu abbia scelto il numero 1 sopra. Se è corretto, verificherei due volte di aver copiato la directory dei font Bootstrap e tutto il suo contenuto /vendor/assets/nel tuo progetto. Dovresti anche controllare il tuo application.css per assicurarti di richiedere bootstrap.min e di avere le sostituzioni @ font-face. SCSS è ampiamente utilizzato in questi giorni. Se lo stai usando, devi cambiare 'src: url' in 'src: asset-url' nelle sostituzioni @ font-face. C'è anche un progetto di esempio in fondo al post che può aiutare.
— rvg
Non ho avuto problemi con i font: hanno funzionato bene durante lo sviluppo ma non nella produzione.
— Ho
22

Twitter ora ha una versione sass-ready di bootstrap 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 sass: https://github.com/twbs/bootstrap-sass

— Eneko Alonso
fonte
Grazie. Un punto chiave del readme di GitHub per i neofiti; "Se hai appena generato una nuova app Rails, potrebbe venire invece con un file .css. Se questo file esiste, verrà servito al posto di Sass, quindi rinominalo ..."
— Brett
5

gem bootstrap-sass

bootstrap-sass è facile da inserire in Rails con la pipeline degli asset.

Nel tuo Gemfile devi aggiungere bootstrap-sass gem e assicurarti che sia presente sass-rails gem - viene aggiunto 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

— Bruno
fonte
3

Per me, il modo più semplice per farlo è

1) Scarica e decomprimi bootstrap in vendor

2) Aggiungi il percorso di bootstrap al tuo file config

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 fa caricare i caratteri senza altre configurazioni speciali e non richiede lo spostamento dei file bootstrap fuori dalla loro directory autonoma.

— vinhboy
fonte
3

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'
— chanakya devraj
fonte
1

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

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

— tbraun89
fonte
Grazie per la risposta. Quindi 'gem anjlab' nel mio Gemfile è tutto ciò che devo fare @ tbraun89?
— megashigger
Il file readme è sulla pagina GitHub. La gemma attuale è gem "anjlab-bootstrap-rails", "~> 3.0.0.1".
— tbraun89
Nel file readme lo fanno:gem 'anjlab-bootstrap-rails', '>= 3.0.0.0', :require => 'bootstrap-rails'
— tbraun89
Grazie! Ho aggiunto qualcosa alla domanda. Potresti chiarire la parte dopo "modifica"?
— megashigger
Il primo carica i file direttamente da GitHub così quando esegui un aggiornamento bundle avrai la versione più recente, il secondo carica la gemma da rubygems che è la versione 3.0.0.1 al momento. (2 giorni)
— tbraun89
0

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

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

Quindi ho incollato tutti i file css bootstrap nel file app/assets/stylesheets/.

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

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

— therealadrain
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.