javascript - Rails 3.2.3 中的 Twitter-Bootstrap

Question

有人在生产中使用过 twitter 引导程序和部署的应用程序吗？你能指导我一些资源吗？我看了 railscasts 但如果有任何博客给出详细解释。除了 twitter bootstrap 之外，还有其他的前端选项吗？另外，有没有javascript选项？

Answer 1

我喜欢阅读 Ruby Source 的这篇文章：

http://rubysource.com/twitter-bootstrap-less-and-sass-understanding-your-options-for-rails-3-1/

http://rubysource.com/how-to-customize-twitter-bootstrap%E2%80%99s-design-in-a-rails-app/

另外，如果您只想自定义 TB 的外观，请查看http://stylebootstrap.info/

这是一个巨大的引导扩展/插件列表：http: //www.bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources

Answer 2

事情是这样的：Bootstrap 不是前端。这是一种通过创建一个看起来不错的起点来开始您的网站设计的方法。它主要是 CSS（嗯，LESS）以及一些可选的 JavaScript 添加以添加额外的 UI 功能。

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

Answer 3

要将 CSS 和 JavaScript 链接到您的视图，您可以使用Asset Tag Helpers。

举个例子：

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

bootstrap.js将生成链接到和的标签bootstrap.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.js和app/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安装。或者，您可以在这里下载已经编译好的框架。