基于Bootstrap實現(xiàn)Material Design風格表單插件附源碼下載

更新時間：2016年04月18日 14:02:38 作者：愛上程序猿

Jquery Material Form Plugin是一款基于Bootstrap的Material Design風格的jQuery表單插件。這篇文章主要介紹了基于Bootstrap的Material Design風格表單插件附源碼下載，感興趣的朋友參考下

Jquery Material Form Plugin是一款基于Bootstrap的Material Design風格的jQuery表單插件。該表單通過自定義樣式和jQuery來將Bootstrap的表單修改為扁平風格的表單，并帶有浮動標簽特效。

在線預覽源碼下載

使用方法

使用該Material Design風格表單需要在頁面中引入jquery，bootstrap相關文件和materialFormStyles.css、materialForm.js文件。

<link rel="stylesheet" >
<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">聯(lián)系電話</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伸縮型菜單實現(xiàn)代碼
這是一款真正的JavaScript伸展收縮型菜單，鼠標放上看一看，是不是很酷？鼠標劃出菜單項的時候，背景會伸長。菜單沒有加鏈接，想用的自己加，再美化一下，絕對夠個性吧。
2015-11-11
Bootstrap組件之下拉菜單,多級菜單及按鈕布局方法實例
這篇文章主要介紹了Bootstrap組件之下拉菜單,多級菜單及按鈕布局方法,結合完整實例形式分析了Bootstrap多級菜單布局相關樣式功能與具體使用技巧,需要的朋友可以參考下
2017-05-05
使用layui日期控件laydate對開始和結束時間進行聯(lián)動控制的方法
今天小編就為大家分享一篇使用layui日期控件laydate對開始和結束時間進行聯(lián)動控制的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
JS使用tween.js動畫庫實現(xiàn)輪播圖并且有切換功能
本文通過實例代碼給大家介紹了JS使用tween.js動畫庫實現(xiàn)輪播圖并且有切換功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
2018-07-07
用JS實現(xiàn)貪吃蛇小游戲
這篇文章主要為大家詳細介紹了用JS實現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-01-01
bootstrap警告框使用方法解析
這篇文章主要為大家詳細介紹了bootstrap警告框使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-01-01
微信小程序圖片上傳功能的實現(xiàn)方法
在編寫小程序的項目過程中,難免會有需要上傳圖片,下面這篇文章主要給大家介紹了關于微信小程序圖片上傳功能的實現(xiàn)方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-04-04
純js實現(xiàn)html轉(zhuǎn)pdf的簡單實例(推薦)
下面小編就為大家?guī)硪黄僯s實現(xiàn)html轉(zhuǎn)pdf的簡單實例(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-02-02
詳解TypeScript中類的定義與用法
TypeScript是一種開源的編程語言，它是JavaScript的超集，這篇文章主要來和大家介紹一下TypeScript中類的定義與用法，感興趣的小伙伴可以了解一下
2023-06-06
layui實現(xiàn)數(shù)據(jù)分頁功能（ajax異步）
這篇文章主要為大家詳細介紹了layui實現(xiàn)數(shù)據(jù)分頁功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-07-07