Bootstrap 写一个表单+内嵌图标

最新推荐文章于 2022-01-06 06:49:28 发布

原创最新推荐文章于 2022-01-06 06:49:28 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Bootstrap

前端同时被 3 个专栏收录

6 篇文章

订阅专栏

Bootstrap

2 篇文章

订阅专栏

基础篇

2 篇文章

订阅专栏

本文介绍如何利用Bootstrap的组件和CSS，结合jQuery，创建一个既美观又适合移动设备的表单，同时在表单中嵌入图标，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用轻量级jquery框架+css+div+Bootstrap亲和移动端框架

HTML：
<div class = 'form-group has-feedback'>
		<div class = 'col-lg-3'>
		<label for = 'psd' >密码:  </label>
		<!--<button type = 'button' id = 'spsd' class = 'form-control-feedback'></button>-->
		<span class="cover"></span>
		<span class="glyphicon glyphicon-eye-close form-control-feedback" id = 'spsd'></span>
		<span class="glyphicon glyphicon-eye-open form-control-feedback" id = 'spsd2' ></span>
		<input type = 'password' name = 'gyl_admin_password' id = 'psd' class = 'form-control fc-clear' placeholder = '请输入管理员密码' >
		</div>
		</div>

CSS:
   #spsd
   {
   cursor:pointer;
   z-index:999999999999;
   color:white;
   }
   .cover
   {
   display:inline-block;
   border:0px;
   width:30px;
   height:30px;
   position:absolute;
   right:18px;
   top:27px;
   z-index:100;
   cursor:pointer;
   
   }
   #spsd2
   {
   display:none;
   color: rgb(116, 255, 255);
   }

jquery:

$(document).ready(function()
{
		var count = 0;
	$('.cover').click(function()
	{
		count += 1;
		//alert('test');
		if(count % 2 == 0)
		{
			$('#spsd2').hide(500);
			$('#spsd').show(500,function()
			{
				$('#psd').attr('type','password');
			});
		}else{
		$('#spsd').hide(500);
		$('#spsd2').show(500,function()
		{
			$('#psd').attr('type','text');
		});
		}
	});
});