[英]How can I use progress bar from Bootstrap in my Rails App?
I'm looking for an example that use progres bar of twitter bootstrap in Rails App. 我正在寻找一个在Rails App中使用Twitter引导程序进度栏的示例。
I'm new in web developer ror and I don't know do it. 我是Web开发人员ror的新手,但我不知道这样做。
I can use other progress bar, but in Rails APp... 我可以使用其他进度条,但是在Rails APp中...
Try using a gem that adds bootstrap to your asset pipeline, that will make your life easier like this one: https://github.com/thomas-mcdonald/bootstrap-sass 尝试使用可在您的资产管道中添加引导程序的gem,这样会使您的生活更轻松: https : //github.com/thomas-mcdonald/bootstrap-sass
once you add the gem import the JS and Css to your asset pipeline like this: 一旦添加了gem,就将JS和Css导入资产管道,如下所示:
create a css.scss file. 创建一个css.scss文件。 in you assets>stylesheets folder boot.css.scss:
在您的Assets> stylesheets文件夹中的boot.css.scss中:
$navbarBackground: #000;
$navbarText: #fff;
$navbarLinkColor: #888;
$navbarBrandColor: #FFF;
@import "bootstrap";
@import "bootstrap-responsive";
application.js: application.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 .
after the gem is in your pipeline restart the app and you can add the progressbar like this: 在您的管道中放置了gem之后,重新启动应用程序,然后可以添加如下的进度条:
<div class="span8 progress progress-striped active"><div id="bar" class="bar" style="width: 100%;"></div></div>
There exists a gem ;-) 存在一颗宝石;-)
https://github.com/yrgoldteeth/css3-progress-bar-rails https://github.com/yrgoldteeth/css3-progress-bar-rails
For animating the progress bar you have to use javaScript 要为进度条设置动画,您必须使用javaScript
I included this in the index.html.erb. 我将此包含在index.html.erb中。 It will put a progress bar based on the value in a database field using Twitter Bootstrap, and also show the % progress
它将使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.