1

我正在寻找一个在 Rails App 中使用 twitter bootstrap 进度条的示例。

我是网络开发人员 ror 的新手，我不知道这样做。

我可以使用其他进度条，但在 Rails 应用程序中...

4

3 回答 3

0

我将它包含在 index.html.erb 中。它将使用 Twitter Bootstrap 根据数据库字段中的值放置一个进度条，并显示进度百分比

<tbody>
    <% @active_xfers.each do |active_xfer| %>
      <tr>
        <td><%= active_xfer.name %></td>
        <td><%= active_xfer.status %></td>


<td><div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="<%= active_xfer.progress %>" aria-valuemin="0" aria-valuemax="100" style="width: <%= active_xfer.progress %>;">
    <%= active_xfer.progress %>
  </div>
</div></td>

        <td><%= active_xfer.started %></td>
        <td><%= active_xfer.finished %></td>

      </tr>
    <% end %>
  </tbody>
于 2014-07-30T21:18:56.113 回答
0

有一颗宝石;-)

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

要为进度条设置动画，您必须使用 javaScript

于 2013-12-19T11:43:44.027 回答
0

尝试使用将引导程序添加到您的资产管道的 gem，这将使您的生活更轻松，就像这样：https ://github.com/thomas-mcdonald/bootstrap-sass

添加 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>
于 2013-06-28T19:34:58.283 回答