快捷導(dǎo)航

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

更新時(shí)間：2016年04月18日 14:02:38 作者：愛(ài)上程序猿

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

Jquery Material Form Plugin是一款基于Bootstrap的Material Design風(fēng)格的jQuery表單插件。該表單通過(guò)自定義樣式和jQuery來(lái)將Bootstrap的表單修改為扁平風(fēng)格的表單，并帶有浮動(dòng)標(biāo)簽特效。

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

使用方法

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