Twitter推出
Bootstrap有段时间了,一直关注,还没有机会用一下。刚好看到xdite的这篇
《Simple Form - 你的 Form Framework》,我就准备把现在项目的难看后台换成Bootstrap。不过xdite似乎在写完这篇blog之后,把他的
bootstrap-rails更新了,blog中提到的Custom Form Builder代码都没有了。我就想,自己去扩展一个Form Builder,然后再把代码中的simple_form_for都换成bootstrap_form_for,不如想办法不改动现有页面模板,来做这个事情。
在进入正题之前,再说个好消息,即将推出的Simple Form 2.0简直酷的一塌糊涂。看这里:
https://github.com/plataformatec/simple_form/wiki/Upgrading-to-Simple-Form-2.0
好了,回归正题。在
《松本行弘的程序世界》中,Matz讲了Monkey Patch这个东西,这次就要让这只猴子出手了。给我的感觉,Monkey Patch的境遇有点类似著名的goto语句,有好处,有坏处,所以我们只用一点点。
在Rails项目的config/initializers/下新建个文件simple_form_monkeypatch.rb:
# encoding: utf-8
module SimpleForm
module Components
module LabelInput
def label_input
(options[:label] == false ? "" : label) + "<div class='input'>#{input}</div>".html_safe
end
end
end
end
然后将config/initializers/simple_form.rb中的设置修改一下:
config.wrapper_class = :clearfix
好了,这样就完成了。如果你不希望所有的input周围都加上div.input的话,可以自己扩展下simple_form的设置选项,然后在label_input方法中做个判断。
按照这种方法来做,有一个好处就是等到Simple Form 2.0推出的时候,我们不需要去修改页面模板,直接把这个Monkey Patch删除掉就可以了。期待Simple Form 2.0 ...
分享到:
相关推荐
带有 simple_form 和 bootstrap3 的 Rails 表单生成器 安装 将此行添加到应用程序的 Gemfile 中: gem 'simple_form_bootstrap3' 或这一行: gem 'simple_form_bootstrap3', git: '...
简洁simple个人博客bootstrap模板下载_简洁 个人 博客 棕色 标准 bootstrap 响应式 手机 个人主页 s简洁simple个人博客bootstrap模板下载_简洁 个人 博客 棕色 标准 bootstrap 响应式 手机 个人主页 s
简洁simple个人博客bootstrap模板下载_简洁 个人 博客 棕色 标准 bootstrap 响应式 手机 个人主页 simple 简单 css3
简洁simple个人博客bootstrap模板下载_简洁 个人 博客 棕色 标准 bootstrap 响应式 手机 个人主页 simple 简单 css3.rar
简洁simple个人博客bootstrap模板下载5728
zend-form-decorators-bootstrap, 用于 Twitter 用户界面 Bootstrap的Zend_Form decorator 用于 Twitter Bootstrap的 Zend_Form decorator这是一组 Zend_Form decorator和帮助器,帮助呈现所需的标记,以将任何Zend_...
django-bootstrap-form, Django 格式的Twitter Bootstrap Django Bootstrap 表单 用于 Django 表单的Twitter Bootstrap 。一个简单的Django 模板标签,用于处理 Bootstrap 。安装用pip安装 django-bootstr
用bootstrap的栅格“ coll-md- ”命令设置宽度总是不尽人意,有时上下框对不齐,有时上下宽度又不齐,这时建议用“style=”width:100px” “ <form class=form-horizontal > <div class=form-group> <...
这个里面 包含整个bootstrap源程序 你所需要的都在了、里面.Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 本教程将向您...
1.bootstrap使用4.0 2.customValidator.css Bootstrap v4.0.0-beta (https://getbootstrap.com) jQuery v3.2.1
前端项目-bootstrap3-contact-form,一个简单的引导3联系形式使用谷歌的recaptcha。提交的邮件将使用支持SSL或TLS传输的SMTP发送到指定的电子邮件地址。
Laravel-Bootstrap-Modal-Form, 使用AJAX提交模式中的Bootstrap 表单,使用 Laravel 验证 Laravel-Bootstrap-Modal-Form你的Laravel 应用程序的表单验证扩展插件。 在将 Bootstrap 窗体嵌入到 Bootstrap/jquery模式...
支持模型表单绑定和自动错误显示,以及大多数Bootstrap表单功能:表单布局,自定义字段,输入组,... 我们非常欢迎任何贡献或反馈,欢迎随时提出请求或。文献资料完整的文档和示例可在中获得。 如果使用PhpStorm ...
APP登录form表单html5模板下载_登录 login form 表单 注册 bootstrap app.zipAPP登录form表单html5模板下载_登录 login form 表单 注册 bootstrap app.zip
机票预订form表单html模板_机票 机票预订 表单 form 选项卡 bootstrap 代码片断.zip机票预订form表单html模板_机票 机票预订 表单 form 选项卡 bootstrap 代码片断.zip
该应用程序是一个演示Rails应用程序,显示了如何使用Simple_form nd Bootstrap 4应用程序与Cocoon一起工作。 使用Ruby 2.6.6版和Rails 5.2.4版进行设置。 它还使用PG数据库应用程序,因此需要一个工作的Postgresql...
这是一款基于Bootstrap4的material design风格表单插件。该插件能够将bootstrap4的输入框和文本框转换为material design风格的浮动标签效果。
Bootstrap5 图标库 bootstrap-icons
ACE admin bootstrap 模版1.4,兼容最新bootstrap
Laravel开发-bootstrap-form Laravel 5包装机,用于引导3。