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:

Permata apa yang terbaik untuk digunakan di Gemfile saya? Saya telah menemukan beberapa dari mereka.
Apa yang saya impor custom.css.scss? Saya pernah membaca bahwa ini berbeda dari 2.3.2.
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

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:

Unduh Bootstrap
- Tautan unduhan langsung Bootstrap 3.1.1
- Atau buka http://getbootstrap.com/

Menyalin

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

untuk: app/assets/stylesheets

Menyalin

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

untuk: app/assets/javascripts

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

* = membutuhkan bootstrap
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.

Menggunakan Bootstrap 3 dengan Rails 4 - File Bootstrap 3 disalin ke direktori vendor aplikasi Anda.
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

11

Saya menggunakan https://github.com/yabawock/bootstrap-sass-rails

Yang merupakan pemasangan yang cukup mudah, pembaruan dan tindak lanjut permata yang cepat dan perbaikan cepat jika diperlukan.

— Nick Ginanto
sumber

1

Permata ini sudah usang (seperti yang mereka tunjukkan sendiri). Gunakan port SASS resmi sebagai gantinya: github.com/twbs/bootstrap-sass (Juga lihat jawaban ini: stackoverflow.com/a/20875719/3451975 )

— Jeehut

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