ruby-on-rails - Rails アプリで Bootstrap の進行状況バーを使用するにはどうすればよいですか?

Question

Rails アプリで Twitter ブートストラップのプログレス バーを使用する例を探しています。

私は Web 開発者 ror が初めてで、それを行うことを知りません。

他のプログレスバーも使えるのですが、Rails APpでは...

Answer 1

宝石が存在します;-)

https://github.com/yrgoldteeth/css3-progress-bar-rails

進行状況バーをアニメーション化するには、javaScript を使用する必要があります

Answer 2

アセット パイプラインにブートストラップを追加する gem を使用してみてください。これにより、次のように作業が楽になります。

gem を追加したら、次のように JS と Css をアセット パイプラインにインポートします。

css.scss ファイルを作成します。あなたの資産>スタイルシートフォルダーboot.css.scss内：

$navbarBackground: #000;
$navbarText: #fff;
$navbarLinkColor: #888;
$navbarBrandColor: #FFF;

@import "bootstrap";
@import "bootstrap-responsive";

アプリケーション.js:

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

gem がパイプラインに入った後、アプリを再起動すると、次のようにプログレスバーを追加できます。

<div class="span8 progress progress-striped active"><div id="bar" class="bar" style="width: 100%;"></div></div>