bootstrap小练习

最新推荐文章于 2023-04-18 10:00:00 发布

#清词#

最新推荐文章于 2023-04-18 10:00:00 发布

阅读量326

点赞数

分类专栏：笔记文章标签： bootstrap html

本文链接：https://blog.csdn.net/qq_54998648/article/details/124966594

版权

笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

bootstrap提供的许多功能需要去慢慢了解，在项目中实战即可。这里将进行一个简单的表单制作。

用户登录表单

1.使用bootstrap进行响应式布局；

2.使用选项卡(tab)进行不同功能区的切换；

3.使用form-horizontal和form-group类进行表单布局；

4.使用form-control类美化表单控件；

5.使用btn btn-success等类美化按钮；

6.使用glyphicon设立图标；

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/bootstrap.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/我的表单.css"/>
		<script src="js/jQueryv3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/我的表单.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		
		
		<div class="container">
			
			<div class="row">
				
						<div class="col-sm-6">
							<ul class="nav nav-pills nav-justified">
								<li ><a href="#form1" data-toggle="tab">账号登录</a></li>
								<li class="active"><a href="#form2" data-toggle="tab">安全登录</a></li>
								
								<div class="tab-content">
								<form class="form-horizontal tab-pane" id="form1">
						<div class="form-group">
							<div class="col-sm-12">
								<input type="text" class="form-control" placeholder="☺账号" />
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-12">
								<input type="password" class="form-control" placeholder="✎密码" />
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-4">
								<input type="checkbox" />记住我
							</div>
							<div class="col-sm-4 col-sm-offset-4 text-right">
								<a href="javascript:">忘记密码</a>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-12">
								<button class="btn btn-block btn-success">登录</button>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-12">
								还没有微博？<a href="javascript:"><font color="orange">立即注册</font></a>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-12">
								<hr />
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-12">
								其它登录：
								<span class="glyphicon glyphicon-apple"></span>
								<span class="glyphicon glyphicon-pencil"></span>
								<span class="glyphicon glyphicon-camera"></span>
							</div>
						</div>
				</form>
								
								<form class="form-horizontal tab-pane active" id="form2">
						<div class="form-group">
							<div class="col-sm-12">
								<input type="text" class="form-control" placeholder="☺账号" />
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-12">
								<input type="password" class="form-control" placeholder="✎密码" />
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-12">
								<input type="tel" class="form-control" placeholder="☎电话" />
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-12">
								<input type="email" class="form-control" placeholder="✉邮箱" />
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-12">
								<input type="checkbox" />记住我
							</div>
							<div class="col-sm-4 col-sm-offset-8 text-right">
								<a href="javascript:">忘记密码</a>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-12">
								<button class="btn btn-block btn-success">登录</button>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-12">
								还没有微博？<a href="javascript:"><font color="orange">立即注册</font></a>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-12">
								<hr />
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-12">
								其它登录：
								<span class="glyphicon glyphicon-apple"></span>
								<span class="glyphicon glyphicon-pencil"></span>
								<span class="glyphicon glyphicon-camera"></span>
							</div>
						</div>
				</form>
								</div>
							</ul>
						</div>
				
					
			</div>
			
		</div>
		
	</body>

</html>