BootStrap
概念：一个前端开发的框架，Bootstrap是基于html、css、Javascript的。
框架：框架是一个半成品软件，开发人员可以在框架基础上进行开发，简化编码。
好处：
① 定义了许多CSS样式和js插件。开发者可以直接引用这些样式和插件。
② 响应式布局：同一套页面可以兼容不同分辨率的设备。
- 布局容器：推荐使用div标签（对页面内容进行封装和方便样式控制）lg大屏 md小屏 sm平板 xs手机（设置了某个尺寸，比这个大的尺寸会沿用该设置）offset列偏移
- 列表list-inline将列表所有元素至于一行
- 按钮btn
- 导航条（bs提供的导航条有两种：标签式和胶囊式。标签式导航条用.nav .nav-tabs样式表示，胶囊式用.nav .nav-pills表示，用active表示选中。当胶囊式导航条加上nav-stacked样式，则显示为垂直布局。若需要导航条两端对齐时，可添加样式nav-justified即可。.navbar-header 容器中通常包含站点名称和图标按钮，站点名称总是可见的，而图标按钮却只在小屏幕下可见。
站点名称是一个 .navbar-brand 的链接。图标按钮是一个.navbar-toggle类的按钮，其中包含三个 class=“icon-bar” 的 元素。定义按钮时，还要为它提供 data-toggle 和 data-target 属性。data-toggle 属性告诉 JavaScript 这个按钮要做什么，data-target 属性指示点击按钮时要显示的菜单元素。） - 轮播图 carousel slide 多个轮播图必须修改ID，小圆点ID也要对应修改
- 排版对齐方式text-center、right、left
- 表单 校验信息（has-error has-succeed）
- 分页条（激活和禁用active和disable）
网页联系项目一
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="./css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!--网站头部-->
<div class="row">
<div class="col-md-4">
<img src="" >
</div>
<div class="col-md-4">
<img src="" >
</div>
<div class="col-md-4">
<ul class="list-inline" style="margin-top: 10px;">
<li><a href="" class="btn btn-primary">登录</a></li>
<li><a href="" class="btn btn-primary">注册</a></li>
<li><a href="" class="btn btn-danger">购物车</a></li>
</ul>
</div>
</div>
<!--导航条-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">首页</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">手机数码 <span class="sr-only">(current)</span></a></li>
<li><a href="#">电脑办公</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">母音用品</a></li>
<li><a href="#">汽车配件</a></li>
<li role="separator" class="divider"></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</nav>
<!--注册页面主题-->
<div class="row" style="background-image: url();">
<div class="col-sm-8 col-sm-offset-2" style="border: 5px solid gainsboro; background-color: white;">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<font size="4" color="#204D74">会员注册</font>
</div>
</div>
<form class="form-horizontal" onsubmit="return checkForm()">
<div id="usernamediv" class="form-group">
<label class="col-sm-2 control-label">用户名</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
</div>
<label id="usernamemsg" class="col-sm-2 control-label"></label>
</div>
<div id="passworddiv" class="form-group">
<label class="col-sm-2 control-label">密码</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
</div>
<label id="passwordmsg" class="col-sm-2 control-label"></label>
</div>
<div id="repassworddiv" class="form-group">
<label class="col-sm-2 control-label">确认密码</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="repassword" placeholder="请输入确认密码">
</div>
<label id="repasswordmsg" class="col-sm-2 control-label"></label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">email</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="email" name="email" placeholder="请输入email">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">姓名</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">性别</label>
<div class="col-sm-8">
<input type="radio" name="sex" value="man" checked="checked"/>男
<input type="radio" name="sex" value="woman" />女
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<button type="submit" class="btn btn-danger btn-lg"> 注 册 </button>
</div>
</div>
</form>
</div>
</div>
<!--网站底部-->
<div class="row">
<div class="col-xs-12 text-center" >
<ul class="list-inline">
<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>
<li><a href="">联系我们</a></li>
<li><a href="">联系我们</a></li>
</ul>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
function checkNotNull(nid){
var nodex=document.getElementById(nid);
var div=document.getElementById(nid+"div");
var msg=document.getElementById(nid+"msg");
var reg=/^\s*$/;//有空格
if(reg.test(nodex.value)){
msg.innerHTML="不能为空";
div.className+=" has-error";
return false;
}else{
msg.innerHTML="";
div.className="form-group";
return true;
}
}
function checkPwdAndRepwd(f1,f2){
if(f1&&f2){
var p1=document.getElementById("password").value;
var p2=document.getElementById("repassword").value;
var div=document.getElementById("repassworddiv");
var msg=document.getElementById("repasswordmsg");
if(p1==p2){
msg.innerHTML="";
div.className="form-group";
return true;
}else{
msg.innerHTML="确认密码要和密码一致";
div.className+=" has-error";
return false;
}
}else{return false;}
}
function checkForm(){
//用户名不能为空
var flag1=checkNotNull("username");
var flag2=checkNotNull("password");
var flag3=checkNotNull("repassword");
var flag4=checkPwdAndRepwd(flag2,flag3);
return flag1&&flag2&&flag3&&flag4;
}
</script>
</body>
</html>