Rumah > hujung hadapan web > tutorial js > Melaksanakan pemalam borang gaya Reka Bentuk Bahan berdasarkan Bootstrap dengan kemahiran download_javascript kod sumber

Melaksanakan pemalam borang gaya Reka Bentuk Bahan berdasarkan Bootstrap dengan kemahiran download_javascript kod sumber

WBOY
Lepaskan: 2016-05-16 15:04:59
asal
1299 orang telah melayarinya

Pemalam Borang Bahan Jquery ialah pemalam borang jQuery berdasarkan gaya Reka Bentuk Bahan Bootstrap. Borang ini menggunakan gaya tersuai dan jQuery untuk mengubah suai borang Bootstrap menjadi bentuk gaya rata dengan kesan label terapung.

Pratonton dalam talian Muat turun kod sumber

Cara menggunakan

Untuk menggunakan borang gaya Reka Bentuk Bahan ini, anda perlu memperkenalkan jquery, fail berkaitan bootstrap dan fail materialFormStyles.css, materialForm.js ke dalam halaman.

<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>
Salin selepas log masuk

Struktur HTML

Struktur HTML borang gaya Reka Bentuk Bahan ini adalah tetap, anda boleh menyalin kod di bawah.

<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> 
Salin selepas log masuk

Alamat github pemalam borang ialah: https://github.com/ch0chi/Jquery-Material-Form-Plugin

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan