Rails 3.2.3中的Twitter-Bootstrap

时间:2012-04-12 12:14:26

标签: javascript ruby-on-rails-3 twitter-bootstrap

有人在生产中使用了twitter bootstrap并部署了应用程序吗?你能指导我一些资源吗?我看过轨道广播,但是如果有任何博客提供详细解释。除了twitter bootstrap之外还有其他前端选项吗?另外,有没有javascript选项?

3 个答案:

答案 0 :(得分:4)

答案 1 :(得分:2)

事情就是这样:Bootstrap不是前端。这是一种通过创建一个体面的起点来开始您的网站设计的方法。它主要是CSS(嗯,LESS),添加了一些可选的JavaScript以增加额外的UI功能。

如果您真的对构建Rails应用程序的前端感兴趣,可能会对Backbone.js感兴趣。 Backbone是一种将HTML DOM与您的数据(来自Rails)链接起来的方式,非常适合单页应用程序,每次执行任何操作时都不需要刷新页面。学习Backbone的一个好的起点是Code School的Anatomy of Backbone教程。巧合的是,Code School还提供了许多您可能喜欢的其他课程。

答案 2 :(得分:1)

要将CSS和JavaScripts链接到您的视图,您可以使用Asset Tag Helpers

举个例子:

<%= javascript_include_tag "bootstrap" %>
<%= stylesheet_link_tag "bootstrap" %>

会生成链接到bootstrap.jsbootstrap.css的标记,如果这些是文件的名称。

javascript_include_tag拉出相对于app/assets/javascripts的脚本 stylesheet_link_tag相对于app/assets/stylesheets

提取样式表

如果要引用目录结构中的文件(即资产不在上述文件夹的根目录中),则可以相对于这些根文件夹进行链接:

<%= javascript_include_tag "/bootstrap/bootstrap-min" %>
<%= stylesheet_link_tag "/bootstrap/bootstrap" %>

这些代码会引用app/assets/javascripts/bootstrap/bootstrap-min.jsapp/assets/stylesheets/bootstrap/bootstrap.css

要应用样式,您可以在bootstrap.css中使用样式表类和ID。例如,分叉Twitter引导程序的按钮看起来像

<a href="https://github.com/twitter/bootstrap/" 
   class="btn btn-primary btn-large">View project on GitHub</a>

您可以使用URL Helper

<%= link_to "View project on GitHub", 
             "https://github.com/twitter/bootstrap/", 
             :class => "btn btn-primary btn-large" %>

编辑:

如果您正在查看Github上的代码并且对.less扩展名感到困惑,那是因为Bootstrap使用名为Less的CSS生成框架。您需要运行make bootstrap并确保已安装lessc。或者,您可以下载已编译的框架here