版权归作者所有，转载请注明出处
基于HTML5的移动Web应用——Bootstrap 样式案例
需求说明
使用container、row等栅格系统的知识布局网页结构
使用表单元素制作登录页面
使用btn-success制作“搜索”按钮，用btn-danger制作“登录”按钮
运行效果
新梦想技术分享
参考代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<title>全国公安机关互联网管理服务平台</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/myCSS.css"/>
</head>
<body>
<header>
<div class="container">
<div class="col-md-4">
<h1><img src="image/logo.png" alt=""/></h1>
</div>
<div class="col-md-6 col-md-offset-2 text-right">
<form action="#" class="form-inline head_form ">
<input type="search" class="form-control" placeholder="请输入要搜索的内容"/>
<input type="button" class="btn btn-success" value="搜索"/>
</form>
<ul class="list-inline">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">公共查询</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">政策法规</a></li>
<li><a href="#">通知公告</a></li>
<li><a href="#">备案须知</a></li>
<li><a href="#">备案展厅</a></li>
</ul>
</div>
</div>
</header>
<section>
<div class="container">
<div class="row">
<div class="col-md-8">
<img src="image/xcy.png" style="margin-top: 20px;" alt=""/>
<br/>
<img src="image/liucheng.png" style="margin-top: 40px; margin-left: 80px;" alt=""/>
</div>
<div class="col-md-4 formMain">
<h2>普通用户</h2>
<form action="#">
<div class="form-group form-horizontal">
<span class="col-md-3 text-center">用户名：</span>
<div class="col-md-9">
<input type="text" class="form-control"/>
</div>
</div>
<br/>
<div class="form-group form-horizontal">
<span class="col-md-3 text-center">密码：</span>
<div class="col-md-9">
<input type="text" class="form-control"/>
</div>
</div>
<div class="form-group" style="margin-top: 30px;">
<div class="col-md-6 col-md-offset-3">
<input type="checkbox"/>
记住密码
</div>
</div>
<div class="form-group ">
<div class="col-md-8 col-md-offset-3">
<a href="#" class="btn btn-danger form-control">登录</a>
</div>
</div>
<div class="form-group ">
<div class="col-md-6 col-md-offset-3">
<p><a href="#">没有账号，注册</a></p>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<footer class="text-center">
<p>Copyright2015 公安部网络安全保卫局 All Rights Reserved</p>
<p>邮箱：support@beian.gov.cn</p>
<p> 京公网安备 11010102002019号 建议使用1024*768以上分辨率浏览</p>
</footer>
</body>
</html>
myCSS.css
body {
font-family: "Helvetica Neue",Helvetica,Microsoft Yahei,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif!important;
}
.head_form{
margin: 20px;
}
.active a{
color: #da001c;
}
section{
background: url("../image/adbg.png") 0 0 no-repeat;
width: 100%;
height: 385px;
}
h2{
font-size: 16px;
}
.formMain{
margin-top: 50px;
background: #fff;
border-radius: 8px;
}
.form-group{
padding-top: 20px;
}
footer{
background: rgba(204, 204, 204, 0.6);
padding: 20px;
}
