Menginstal Bootstrap 3 di Aplikasi Rails

112

Saya mencoba menginstal Bootstrap 3.0 di aplikasi Rails saya. Saya baru saja menyelesaikan tutorial Michael Hartl dan sekarang mencoba membangun sistem saya sendiri menggunakan Bootstrap versi baru ini, tetapi saya memiliki beberapa pertanyaan yang tidak saya yakini.

Spesifikasi sistem saya:

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

Pertanyaan yang saya miliki:

  1. Permata apa yang terbaik untuk digunakan di Gemfile saya? Saya telah menemukan beberapa dari mereka.
  2. Apa yang saya impor custom.css.scss? Saya pernah membaca bahwa ini berbeda dari 2.3.2.
  3. Apakah ada hal lain yang harus saya lakukan agar Bootstrap berfungsi, atau apakah langkah-langkah lainnya sama dengan yang saya ikuti untuk Bootstrap 2.3.2?

Sunting

Inilah yang pertama kali dikatakan oleh proyek bootstrap-rails di GitHub :

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

Kemudian dikatakan untuk melakukan:

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

Apakah mereka melakukan hal yang sama, atau Anda harus melakukan keduanya?

ruby-on-rails ruby twitter-bootstrap-3 megashigger
sumber

Jawaban:

272

Sebenarnya Anda tidak membutuhkan gem untuk ini, berikut adalah langkah-langkah untuk menginstal Bootstrap 3 di RoR

  • Unduh Bootstrap

  • Menyalin:

    bootstrap-dist/css/bootstrap.css dan bootstrap-dist/css/bootstrap.min.css

    Untuk: vendor/assets/stylesheets

  • Menyalin:

    bootstrap-dist/js/bootstrap.js dan bootstrap-dist/js/bootstrap.min.js

    Untuk: vendor/assets/javascripts

  • Pembaruan: app/assets/stylesheets/application.css dengan menambahkan:

    *= require bootstrap.min

  • Pembaruan: app/assets/javascripts/application.js dengan menambahkan:

    //= require bootstrap.min

Dengan ini Anda bisa mengupdate bootstrap kapan saja Anda mau, tidak perlu menunggu gem diupdate. Juga dengan pendekatan ini, pipa aset akan menggunakan versi yang diperkecil dalam produksi.

elang
sumber
2
Saya setuju. Saya juga menemukan bahwa memasukkan file secara langsung mengalami lebih sedikit masalah dalam aset prakompilasi (misalnya, untuk mendorong ke Heroku).
Amy.js
26
Apakah ada keuntungan untuk menyertakan file yang diperkecil vendor/assets/{stylesheets|javascripts}? Sprocket harus mengecilkan file yang disertakan di dalamnya app/assets/{stylesheets|javascripts}.
jrhorn424
16
Bagaimana cara memasukkan file gambar dan font?
wwli
5
@wwli - Lihat jawaban saya di bawah. Ini menjelaskan cara menambahkan Glyphicons dan font.
rvg
4
mengapa Anda menyalin baik bootstrap dan bootstrap.min?
JohnMerlino
62

Seperti yang diketahui banyak orang, tidak perlu permata.

Langkah-langkah yang harus diambil:

  1. Unduh Bootstrap

  2. Menyalin 

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

    untuk: app/assets/stylesheets

  3. Menyalin 

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

    untuk: app/assets/javascripts

  4. Tambahkan ke: app/assets/stylesheets/application.css

    * = membutuhkan bootstrap

  5. Tambahkan ke: app/assets/javascripts/application.js

    // = membutuhkan bootstrap

Itu semuanya. Anda siap menambahkan template Bootstrap baru yang keren.

Mengapa, app/bukan vendor/?

Penting untuk menambahkan file ke app / assets , jadi di masa mendatang Anda akan dapat menimpa gaya Bootstrap.

Jika nanti Anda ingin menambahkan custom.css.scssfile dengan gaya kustom. Anda akan memiliki sesuatu yang mirip dengan ini di application.css:

 *= require bootstrap                                                            
 *= require custom

Jika Anda menempatkan file bootstrap di app / assets , semuanya berfungsi seperti yang diharapkan. Tetapi, jika Anda menempatkannya di vendor / aset , file Bootstrap akan dimuat terakhir. Seperti ini:

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

Jadi, beberapa penyesuaian Anda tidak akan digunakan karena gaya Bootstrap akan menimpanya.

Alasan dibalik ini

Rel akan mencari aset di banyak lokasi; untuk mendapatkan daftar lokasi ini Anda bisa melakukan ini:

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

Dalam output Anda akan melihat bahwa app / assets diutamakan, sehingga memuatnya terlebih dahulu.

pemberian
sumber
4
Bukankah urutan pernyataan require dalam file application.css mengontrol urutan file dimuat daripada urutan direktori dalam daftar jalur? Urutan jalur biasanya mengontrol versi mana dari gest file yang dimuat jika ditemukan di beberapa direktori yang termasuk dalam daftar jalur. Jika tidak, bagaimana urutan pernyataan yang dibutuhkan mulai berlaku?
Kickingbull
2
Harap jangan menyalin versi yang diperkecil, jika tidak, Anda akan mendapatkan penyertaan ganda nanti (sepertinya 'require_tree.' Berfungsi seperti itu?). Saya tidak dapat membuka dropdown apa pun setelah menginstal permata booty hanya karena penyertaan ganda ini.
Kourindou Hime
1
Komentar @Kourindou Hime sepertinya menarik perhatian. Saya tidak dapat membuka dropdown sampai saya menghapus file .min.
Paco Abato
35

Jawaban ini untuk Anda yang ingin menginstal Bootstrap 3 di aplikasi Rails Anda tanpa menggunakan permata. Ada dua cara sederhana untuk melakukan ini yang membutuhkan waktu kurang dari 10 menit. Pilih salah satu yang paling sesuai dengan kebutuhan Anda. Glyphicons dan Javascript berfungsi dan saya telah mengujinya dengan versi beta terbaru dari Rails 4.1.0 juga.

  1. Menggunakan Bootstrap 3 dengan Rails 4 - File Bootstrap 3 disalin ke direktori vendor aplikasi Anda.

  2. Menambahkan Bootstrap dari CDN ke aplikasi Rails Anda - File Bootstrap 3 disajikan dari CDN Bootstrap .

Nomor 2 di atas adalah yang paling fleksibel. Yang perlu Anda lakukan hanyalah mengubah nomor versi yang disimpan di pembantu tata letak. Jadi, Anda dapat menjalankan versi Bootstrap pilihan Anda, baik versi 3.0.0, 3.0.3, atau bahkan rilis Bootstrap 2 yang lebih lama.

rvg
sumber
Sepertinya tidak bisa membuat ini bekerja. Itu terus mencari localhost:3000/fonts/glyphicons-halflings-regular.svgsebagai contoh di konsol Chrome, dan glyphicons tidak muncul (sebagai 404).
Steve
1
@ Steve - Saya berasumsi bahwa Anda mengalami masalah dalam pengembangan dan Anda memilih # 1 di atas. Jika itu akurat, saya akan memeriksa ulang apakah Anda menyalin direktori font Bootstrap dan semua isinya ke /vendor/assets/dalam proyek Anda. Anda juga harus memeriksa application.css untuk memastikan Anda membutuhkan bootstrap.min dan @ font-face overrides. SCSS banyak digunakan hari ini. Jika Anda menggunakannya maka Anda perlu mengubah 'src: url' menjadi 'src: asset-url' di @ font-face override. Ada juga contoh proyek di bagian bawah postingan yang mungkin bisa membantu.
rvg
Saya tidak memiliki masalah akhir dengan font - bekerja dengan baik dalam pengembangan tetapi tidak dalam produksi. Akhirnya hanya menempatkannya di publik / font
ChrisJ
22

Twitter sekarang memiliki versi bootstrap yang siap sass dengan permata disertakan, jadi lebih mudah dari sebelumnya untuk menambahkannya ke Rails.

Cukup tambahkan ke gemfile Anda berikut ini:

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

bundle install dan mulai ulang server Anda agar file tersedia melalui pipeline.

Ada juga dukungan untuk kompas dan sass-only: https://github.com/twbs/bootstrap-sass

Eneko Alonso
sumber
Terima kasih. Poin kunci dari github readme untuk pemula; "Jika Anda baru saja membuat aplikasi Rails baru, aplikasi itu mungkin datang dengan file .css. Jika file ini ada, itu akan disajikan sebagai pengganti Sass, jadi ganti namanya ..."
Brett
5

gem bootstrap-sass

bootstrap-sass mudah untuk dimasukkan ke dalam Rails dengan aliran aset.

Di Gemfile Anda, Anda perlu menambahkan gem bootstrap-sass, dan memastikan bahwa permata sass-rails ada - secara default ditambahkan ke aplikasi Rails baru.

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

bundle install dan mulai ulang server Anda agar file tersedia melalui pipeline.

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

Bruno
sumber
3

Bagi saya, cara termudah untuk melakukannya adalah

1) Unduh dan unzip bootstrap ke file vendor

2) Tambahkan jalur bootstrap ke konfigurasi Anda

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

3) Membutuhkan mereka

di css *= require css/bootstrap

di js //= require js/bootstrap

Selesai!

Metode ini membuat font dimuat tanpa konfigurasi khusus lainnya dan tidak perlu memindahkan file bootstrap keluar dari direktori mandiri mereka.

vinhboy
sumber
3

Dengan menggunakan cabang ini diharapkan akan menyelesaikan masalah:

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

Menurut saya permata paling mutakhir untuk versi bootstrap baru adalah bentuk anjlab .

Tetapi saya tidak tahu apakah saat ini berfungsi dengan baik dengan permata lain seperti simple_form ketika Anda melakukannya rails generate simple_form:install --bootstrap, dll. Anda mungkin harus mengedit beberapa penginisialisasi atau konfigurasi agar sesuai dengan versi bootstrap yang baru.

tbraun89
sumber
Terima kasih atas tanggapannya. Jadi 'gem anjlab' di Gemfile saya adalah satu-satunya yang harus saya lakukan @ tbraun89?
megashigger
Readme ada di halaman github. Permata saat ini adalah gem "anjlab-bootstrap-rails", "~> 3.0.0.1".
tbraun89
Dalam readme mereka melakukan ini:gem 'anjlab-bootstrap-rails', '>= 3.0.0.0', :require => 'bootstrap-rails'
tbraun89
Terima kasih! Saya menambahkan sesuatu dalam pertanyaan. Bisakah Anda menjelaskan bagian setelah 'edit'?
megashigger
Yang pertama memuat file langsung dari github sehingga ketika Anda melakukan pembaruan bundel, Anda akan memiliki versi terbaru, yang kedua memuat permata dari rubygems yang saat ini adalah versi 3.0.0.1. (2 hari)
tbraun89
0

Saya benar-benar memiliki solusi yang mudah untuk yang satu ini di mana saya hampir menggaruk-garuk kepala tentang cara membuatnya bekerja. hahah!

Nah, pertama saya mengunduh Bootstrap (versi css dan js yang dikompilasi).

Kemudian saya menempelkan semua file css bootstrap ke app/assets/stylesheets/ .

Dan kemudian saya menempelkan semua file bootstrap js ke app/assets/javascripts/ .

Saya memuat ulang halaman dan wallah! Saya baru saja menambahkan bootstrap di RoR saya!

di sana
sumber