在rails 中,使用 simple_form 和 bootstrap 3.0 组件来美化radio button
2013-11-03 16:48
555 查看
<div class="row"> <div class="btn-group" data-toggle="buttons"> <%= f.collection_radio_buttons :tqn, [["1", '特区内'] ,["0", '特区外']], :first, :last, { item_wrapper_tag: false } do |b| %> <%= b.label(:class => 'btn btn-primary'){ b.radio_button + b.text } %> <% end %> </div> </div>
产生的html 代码是 :
<div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active" for="gis_region_tqn_1"> <input id="gis_region_tqn_1" name="gis_region[tqn]" type="radio" value="1">特区内 </label> <label class="btn btn-primary" for="gis_region_tqn_0"> <input checked="checked" id="gis_region_tqn_0" name="gis_region[tqn]" type="radio" value="0">特区外 </label> </div>
其中注意的几个要点:
1.
<div class="btn-group" data-toggle="buttons">
data-toggle="buttons"
是为了符合 bootstrap.js 中按钮单选的功能
2.
{ item_wrapper_tag: false } do |b| %> <%= b.label(:class => 'btn btn-primary'){ b.radio_button + b.text } %> <% end %>
定制 simple_form 中产生的 radio 的html
详细api 参考:
http://rubydoc.info/github/plataformatec/simple_form/SimpleForm/FormBuilder:collection_radio_buttons
相关文章推荐
- GitHub Pages 搭建流程-基于jekyll-bootstrap
- bootstrap3-validation表单验证
- jQuery表单验证插件 Validation for Bootstrap
- bootstrap——强大的网页设计元素模板
- GitHub Pages 搭建流程-基于jekyll-bootstrap
- Bootstrap3.0学习第二轮(栅格系统原理)
- bootstrap——强大的网页设计元素模板
- Metronic V1.5.2 Responsive Admin Dashboard Template build with Twitter Bootstrap 3.0
- BootStrap入门教程 (四)
- BootStrap入门教程 (三)
- BootStrap入门教程 (二)
- BootStrap入门教程 (一)
- Metronic V1.5.2 Responsive Admin Dashboard Template build with Twitter Bootstrap 3.0
- Bootstrap3入门
- Bootstrap3学习第一轮(入门)
- BootStrap学习从现在开始
- Bootstrap3.0学习第一轮(入门)
- Bootstrap 教程
- jquery.bootstrap.teninedialog.js使用说明
- Bootstrap JS插件使用实例(2)-模态对话框