Formtastic Bootstrap 技术文档

1. 安装指南

依赖项

在安装 Formtastic Bootstrap 之前，请确保您的项目满足以下依赖项：

• Bootstrap: 3.x 版本
• Rails: 3.2.x 或 4.x.x 版本
• Formtastic: 2.2.x 或 2.3.x 版本
• Ruby: 1.9.2、1.9.3 或 2.x.x 版本

安装步骤

您可以通过以下两种方式安装 Formtastic Bootstrap：

1. 使用 gem 命令安装：

   gem install formtastic-bootstrap
   

2. 通过 Gemfile 安装： 在您的 Gemfile 中添加以下行：

   gem 'formtastic-bootstrap'
   

   然后运行 bundle install 命令安装。

配置

安装完成后，您需要进行以下配置：

1. 在 Formtastic 的初始化文件中添加以下行：

   # config/initializers/formtastic.rb
   Formtastic::Helpers::FormHelper.builder = FormtasticBootstrap::FormBuilder
   

2. 在 application.css 文件的顶部添加以下行：

   # app/assets/stylesheets/application.css
   *= require formtastic-bootstrap
   

注意：请确保您已经安装并配置了 Formtastic，但不要在 application.css 文件中引入 Formtastic 的样式，否则会导致 Bootstrap 和 Formtastic Bootstrap 的样式冲突。

2. 项目的使用说明

Formtastic Bootstrap 的使用方式与 Formtastic 基本相同，但为了支持 Bootstrap 特定的控件，引入了一些变化。

Bootstrap 特定控件

前置文本

要创建一个前置文本字段，可以使用 :prepend 选项。该选项适用于任何文本字段输入类型，如 :url、:search 和 :string。

<%= semantic_form_for @user do |f| %>
  <%= f.inputs do %>
    <%= f.input :handle, :prepend => '@' %>
  <% end %>
<% end %>

后置文本

要创建一个后置文本字段，可以使用 :append 选项。该选项同样适用于任何文本字段输入类型。

<%= semantic_form_for @user do |f| %>
  <%= f.inputs do %>
    <%= f.input :handle, :append => '%' %>
  <% end %>
<% end %>

后置内容

要添加不包含在 add-on span 中的后置元素，可以使用 :append_content 或 :prepend_content 选项。

<%= semantic_form_for @user do |f| %>
  <%= f.inputs do %>
    <%= f.input :handle, :append_content => content_tag(:a, "Click Here", :class => 'btn') %>
  <% end %>
<% end %>

3. 项目 API 使用文档

Formtastic Bootstrap 的 API 与 Formtastic 的 API 基本一致，但在某些地方进行了调整以更好地支持 Bootstrap。以下是一些主要的差异：

• 标签类：Formtastic Bootstrap 省略了 <label> 标签上的 label 类，因为 Twitter Bootstrap 在其他上下文中使用了该标签。
• 输入标签位置：Formtastic Bootstrap 将 <input> 标签放在不同的位置，以确保 Bootstrap 的行为正确。
• 日期时间字段：Formtastic Bootstrap 将 :date、:datetime 和 :time 渲染为文本字段，而不是下拉菜单。
• 按钮：f.buttons :name 不受支持，因为它会生成 <fieldset> 和 <legend> 标签，导致 Bootstrap 的行为不正确。

4. 项目安装方式

Formtastic Bootstrap 的安装方式已经在 安装指南 部分详细介绍。您可以通过 gem 命令或 Gemfile 进行安装，并根据需要进行配置。

总结

Formtastic Bootstrap 是一个将 Formtastic 与 Twitter Bootstrap 结合使用的表单构建器，旨在生成符合 Bootstrap 框架的 HTML 标记。通过本文档，您可以了解如何安装、配置和使用 Formtastic Bootstrap，并掌握其 API 的主要差异。希望本文档能帮助您更好地理解和使用该项目。