Cài đặt Bootstrap 3 trên ứng dụng Rails

Tôi đang cố cài đặt Bootstrap 3.0 trên ứng dụng Rails của mình. Gần đây tôi đã hoàn thành hướng dẫn của Michael Hartl và hiện đang cố gắng xây dựng hệ thống của riêng mình bằng cách sử dụng phiên bản Bootstrap mới này, nhưng tôi có một số câu hỏi mà tôi không chắc chắn.

Thông số kỹ thuật hệ thống của tôi:

• OS X Mountain Lion trên MBP
• Đường ray 4.0
• Ruby 2.0

Câu hỏi tôi có:

1. Đá quý tốt nhất để sử dụng trong Gemfile của tôi là gì? Tôi đã tìm thấy một vài trong số họ.
2. Tôi nhập gì vào của tôi custom.css.scss? Tôi đọc ở đâu đó rằng nó khác với 2.3.2.
3. Tôi phải làm gì khác để Bootstrap hoạt động hay các bước còn lại giống với những bước tôi đã làm cho Bootstrap 2.3.2?

Biên tập

Đây là những gì dự án bootstrap-rails trên GitHub lần đầu tiên yêu cầu làm:

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

Sau đó, nó nói phải làm:

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

Họ có làm điều tương tự không, hay bạn phải làm cả hai?

Thực ra bạn không cần gem cho việc này, đây là bước cài đặt Bootstrap 3 trong RoR

• Tải xuống Bootstrap

• Sao chép:

  bootstrap-dist/css/bootstrap.css và bootstrap-dist/css/bootstrap.min.css

  Đến: vendor/assets/stylesheets

• Sao chép:

  bootstrap-dist/js/bootstrap.js và bootstrap-dist/js/bootstrap.min.js

  Đến: vendor/assets/javascripts

• Cập nhật: app/assets/stylesheets/application.css bằng cách thêm:

  *= require bootstrap.min

• Cập nhật: app/assets/javascripts/application.js bằng cách thêm:

  //= require bootstrap.min

Với điều này, bạn có thể cập nhật bootstrap bất kỳ lúc nào bạn muốn, không cần đợi gem được cập nhật. Cũng với cách tiếp cận này, đường ống nội dung sẽ sử dụng các phiên bản rút gọn trong sản xuất.

Như nhiều người đã biết, không cần đá quý.

Các bước thực hiện:

1. Tải xuống Bootstrap
   • Link tải trực tiếp Bootstrap 3.1.1
   • Hoặc truy cập http://getbootstrap.com/

2. Sao chép

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

   đến: app/assets/stylesheets

3. Sao chép

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

   đến: app/assets/javascripts

4. Thêm vào: app/assets/stylesheets/application.css

   * = yêu cầu bootstrap

5. Thêm vào: app/assets/javascripts/application.js

   // = request bootstrap

Đó là tất cả. Bạn đã sẵn sàng để thêm một mẫu Bootstrap thú vị mới.

Tại sao app/thay vì vendor/?

Điều quan trọng là phải thêm tệp vào ứng dụng / nội dung , vì vậy trong tương lai, bạn sẽ có thể ghi đè các kiểu Bootstrap.

Nếu sau này bạn muốn thêm custom.css.scsstệp với các kiểu tùy chỉnh. Bạn sẽ có một cái gì đó tương tự như thế này trong application.css:

 *= require bootstrap                                                            
 *= require custom  

Nếu bạn đã đặt các tệp bootstrap trong ứng dụng / nội dung , mọi thứ sẽ hoạt động như mong đợi. Tuy nhiên, nếu bạn đã đặt chúng trong nhà cung cấp / tài sản , các tệp Bootstrap sẽ được tải sau cùng. Như thế này:

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

Vì vậy, một số tùy chỉnh của bạn sẽ không được sử dụng vì các kiểu Bootstrap sẽ ghi đè chúng.

Lý do đằng sau điều này

Rails sẽ tìm kiếm tài sản ở nhiều vị trí; để có được danh sách các vị trí này, bạn có thể làm như sau:

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

Trong đầu ra, bạn sẽ thấy rằng ứng dụng / nội dung được ưu tiên, do đó tải nó trước.

Câu trả lời này dành cho những ai đang muốn Cài đặt Bootstrap 3 trong ứng dụng Rails của mình mà không cần sử dụng đá quý. Có hai cách đơn giản để thực hiện việc này chỉ mất chưa đến 10 phút. Chọn một trong những phù hợp với nhu cầu của bạn tốt nhất. Glyphicons và Javascript hoạt động và tôi cũng đã thử nghiệm chúng với bản beta mới nhất của Rails 4.1.0.

1. Sử dụng Bootstrap 3 với Rails 4 - Các tệp Bootstrap 3 được sao chép vào thư mục nhà cung cấp ứng dụng của bạn.

2. Thêm Bootstrap từ CDN vào ứng dụng Rails của bạn - Tệp Bootstrap 3 được cung cấp từ CDN Bootstrap .

Số 2 ở trên là linh hoạt nhất. Tất cả những gì bạn cần làm là thay đổi số phiên bản được lưu trữ trong trình trợ giúp bố cục. Vì vậy, bạn có thể chạy phiên bản Bootstrap mà bạn chọn, cho dù đó là phiên bản 3.0.0, 3.0.3 hay thậm chí là phiên bản Bootstrap 2 cũ hơn.

Twitter hiện đã có một phiên bản bootstrap sẵn sàng với gem, vì vậy việc thêm nó vào Rails dễ dàng hơn bao giờ hết.

Chỉ cần thêm vào tệp tin gem của bạn như sau:

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

bundle install và khởi động lại máy chủ của bạn để làm cho các tệp có sẵn thông qua đường dẫn.

Ngoài ra còn có hỗ trợ cho la bàn và chỉ sass: https://github.com/twbs/bootstrap-sass

Tôi sử dụng https://github.com/yabawock/bootstrap-sass-rails

Đó là khá nhiều cài đặt trực tiếp, cập nhật và theo dõi đá quý nhanh chóng và các bản sửa lỗi nhanh chóng trong trường hợp cần thiết.

gem bootstrap-sass

bootstrap-sass dễ dàng đưa vào Rails với đường dẫn nội dung.

Trong Gemfile của bạn, bạn cần thêm đá quý bootstrap-sass và đảm bảo rằng đá quý sass-rails có mặt - nó được thêm vào các ứng dụng Rails mới theo mặc định.

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

bundle install và khởi động lại máy chủ của bạn để làm cho các tệp có sẵn thông qua đường dẫn.

Nguồn: http://rubydoc.info/gems/bootstrap-sass/3.0.3.0/frames

Đối với tôi, cách đơn giản nhất để làm điều này là

1) Tải xuống và giải nén bootstrap vào vendor

2) Thêm đường dẫn bootstrap vào cấu hình của bạn

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

3) Yêu cầu họ

trong css *= require css/bootstrap

trong js //= require js/bootstrap

Làm xong!

Phương pháp này làm cho các phông chữ tải mà không cần bất kỳ cấu hình đặc biệt nào khác và không yêu cầu di chuyển các tệp bootstrap ra khỏi thư mục độc lập của chúng.

Sử dụng nhánh này hy vọng sẽ giải quyết được vấn đề:

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

Tôi nghĩ đá quý cập nhật nhất cho phiên bản bootstrap mới là form anjlab .

Nhưng tôi không biết liệu hiện tại nó có hoạt động tốt với các gem khác như simple_form hay không rails generate simple_form:install --bootstrap, v.v. bạn có thể phải chỉnh sửa một số bộ khởi tạo hoặc cấu hình để phù hợp với phiên bản bootstrap mới.

Tôi thực sự đã có một cách giải quyết dễ dàng cho vấn đề này, trong đó tôi gần như vò đầu bứt tai về cách làm cho nó hoạt động. hahah!

Đầu tiên, tôi tải xuống Bootstrap (phiên bản css và js đã biên dịch).

Sau đó, tôi dán tất cả các tệp css bootstrap vào app/assets/stylesheets/.

Và sau đó tôi dán tất cả các tệp js bootstrap vào app/assets/javascripts/.

Tôi đã tải lại trang và wallah! Tôi vừa thêm bootstrap trong RoR của mình!