基于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的表單修改為扁平風格的表單，并帶有浮動標簽特效。

在線預(yù)覽源碼下載

使用方法

使用該Material Design風格表單需要在頁面中引入jquery，bootstrap相關(guān)文件和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結(jié)構(gòu)

該Material Design風格表單的HTML結(jié)構(gòu)是固定的，你可以復(fù)制下面的代碼。

<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

您可能感興趣的文章:

相關(guān)文章

javascript伸縮型菜單實現(xiàn)代碼
這是一款真正的JavaScript伸展收縮型菜單，鼠標放上看一看，是不是很酷？鼠標劃出菜單項的時候，背景會伸長。菜單沒有加鏈接，想用的自己加，再美化一下，絕對夠個性吧。
2015-11-11
Bootstrap組件之下拉菜單,多級菜單及按鈕布局方法實例
這篇文章主要介紹了Bootstrap組件之下拉菜單,多級菜單及按鈕布局方法,結(jié)合完整實例形式分析了Bootstrap多級菜單布局相關(guān)樣式功能與具體使用技巧,需要的朋友可以參考下
2017-05-05
使用layui日期控件laydate對開始和結(jié)束時間進行聯(lián)動控制的方法
今天小編就為大家分享一篇使用layui日期控件laydate對開始和結(jié)束時間進行聯(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)方法
在編寫小程序的項目過程中,難免會有需要上傳圖片,下面這篇文章主要給大家介紹了關(guā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