基于Bootstrap实现Material Design风格表单插件 附源码下载


Posted in Javascript onApril 18, 2016

Jquery Material Form Plugin是一款基于Bootstrap的Material Design风格的jQuery表单插件。该表单通过自定义样式和jQuery来将Bootstrap的表单修改为扁平风格的表单,并带有浮动标签特效。

基于Bootstrap实现Material Design风格表单插件 附源码下载

在线预览         源码下载

使用方法

使用该Material Design风格表单需要在页面中引入jquery,bootstrap相关文件和materialFormStyles.css、materialForm.js文件。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="css/materialFormStyles.css">
<script src="js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/materialForm.js"></script>

HTML结构

该Material Design风格表单的HTML结构是固定的,你可以复制下面的代码。

<div class="container" id="formOutterWrapper">
<div class="container" id="formInnerWrapper">
<form id="materialForm" class="form" method="post" action="" role="form" autocomplete="off">
<div class="form-group">
<div class="col-xs-6">
<label class="labels" for="firstName">用户名称</label>
<input type="text" class="formInput" id="firstName" name="firstName">
</div>
<div class="col-xs-6">
<label class="labels" for="lastName">昵 称</label>
<input type="text" class="formInput" id="lastName" name="lastName">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label class="labels" for="email">电子邮件</label>
<input type="text" class="formInput" id="email" name="email">
</div>
<div class="col-xs-6">
<label class="labels" for="phone">联系电话</label>
<input type="tel" class="formInput" id="phone" name="phone">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<label class="labels" for="description">项目描述</label>
<input type="text" class="formInput" id="description" name="description">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<button type="button" class="btn btn-primary green flatButton" id="submit">提交</button>
</div>
</div>
</form>
</div>
</div>

该表单插件的github地址为:https://github.com/ch0chi/Jquery-Material-Form-Plugin

Javascript 相关文章推荐
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 Javascript
jQuery中even选择器的定义和用法
Dec 23 Javascript
JavaScript中使用Callback控制流程介绍
Mar 16 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
浅析js实现网页截图的两种方式
Nov 01 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 #Javascript
AngularJS入门教程之AngularJS模型
Apr 18 #Javascript
AngularJS入门教程之AngularJS指令
Apr 18 #Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 #Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 #Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 #Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 #Javascript
You might like
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
java必学必会之static关键字
2015/12/03 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
移动端手指操控左右滑动的菜单
2019/09/08 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
Python中%r和%s的详解及区别
2017/03/16 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
Python模块WSGI使用详解
2018/02/02 Python
Django中reverse反转并且传递参数的方法
2019/08/06 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
大学生实习感言
2014/01/16 职场文书
医学院毕业生自荐信范文
2014/03/06 职场文书
网络工程师自荐书范文
2014/04/01 职场文书
教师节获奖感言
2015/07/31 职场文书
python实现图片批量压缩
2021/04/24 Python