https://v3.bootcss.com/getting-started/
#css样式
https://v3.bootcss.com/css/
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局
下载reset css 样式： https://necolas.github.io/normalize.css/8.0.1/normalize.css
下载bootsrap样式: https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip
栅格系统测试
<head>
<meta charset="UTF-8">
<title>bootstramp实例1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="normalize.css">
<style>
.red{
background-color: red;
height: 120px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="container red">
<div class="row">
<div class="col-md-1 red"></div>
<div class="col-md-1 red"></div>
<div class="col-md-1 red"></div>
<div class="col-md-1 red"></div>
<div class="col-md-1 red"></div>
<div class="col-md-1 red"></div>
<div class="col-md-1 red"></div>
<div class="col-md-1 red"></div>
<div class="col-md-1 red"></div>
<div class="col-md-1 red"></div>
<div class="col-md-1 red"></div>
<div class="col-md-1 red"></div>
<div class="col-md-1 red"></div>
<div class="col-md-1 red"></div>
</div>
</div>
</body>
# col-sm-6 小屏幕显示，小屏幕模式下每个标签占据6个栅格，即显示分两栏
<head>
<meta charset="UTF-8">
<title>bootstramp实例1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="normalize.css">
<style>
.red{
background-color: red;
height: 120px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="container red">
<div class="row">
<div class="col-lg-3 red">
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺
寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更
具语义的布局。
</div>
<div class="col-lg-3 red">
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺
寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更
具语义的布局。
</div>
<div class="col-lg-3 red">
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺
寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更
具语义的布局。
</div>
<div class="col-lg-3 red">
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺
寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更
具语义的布局。
</div>
</div>
</div>
</body>
<head>
<meta charset="UTF-8">
<title>bootstramp实例1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="normalize.css">
<style>
.red{
background-color: red;
height: 120px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="container red">
<div class="row">
<div class="col-lg-3 col-sm-6">
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺
寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更
具语义的布局。
</div>
<div class="col-lg-3 col-sm-6">
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺
寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更
具语义的布局。
</div>
<div class="col-lg-3 col-sm-6">
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺
寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更
具语义的布局。
</div>
<div class="col-lg-3 col-sm-6">
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺
寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更
具语义的布局。
</div>
</div>
</div>
</body>
将一行分成4个方框
添加类名 class="thumbnail" 就能实现
<head>
<meta charset="UTF-8">
<title>bootstramp实例1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="normalize.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 thumbnail" style="height: 336px"></div>
<div class="col-lg-3 thumbnail" style="height: 336px"></div>
<div class="col-lg-3 thumbnail" style="height: 336px"></div>
<div class="col-lg-3 thumbnail" style="height: 336px"></div>
</div>
</div>
</body>
媒体查询
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="normalize.css">
<title>媒体查询实例</title>
<style>
body{
margin: 0;
padding: 0;
}
.c{
100%;
height: 200px;
}
.c1 {
background-color: red;
}
/*查询当前显示网页的设备，必须是显示器，宽度小于等于600px,应用下面的样式 */
@media screen and (max- 600px) {
.c1{
background-color: green;
}
}
</style>
</head>
<body>
<div class="c c1"></div>
</body>
clearfix
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="normalize.css">
<title>clearfix</title>
<style>
.red{
background-color: red;
height: 100px;
border: 1px solid green;
}
.red2{
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 red2">col-xs-6</div>
<div class="col-xs-6 red">col-xs-6</div>
<!-- 第一个div标签高度是200px,加了这句话相当于还是维持第一个div标签和其他标签高度一致的情况下各个div标签的排列顺序-->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 red">col-xs-6</div>
<div class="col-xs-6 red">col-xs-6</div>
<div class="col-xs-6 red">col-xs-6</div>
<div class="col-xs-6 red">col-xs-6</div>
</div>
</div>
</body>
最后效果图
第一个div标签的高度是其他标签的2倍，占据了第一行，第二行的6个栅格，如果设置了
则 第二行右边的6个栅格就不会被下面的标签占据
如果没有设置，那么页面中第二行右边的6个栅格就会被下面的标签给填上
列偏移及列排序
列偏移
添加类名
class="col-md-offset-<偏移的列数> "
class="col-md-pull-<偏移的列数> "
<head>
<meta charset="UTF-8">
<title>列偏移</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="normalize.css">
</head>
<body>
<div class="container">
<div class="row project">
<div class="col-md-4">
<div class="thumbnail" style="height: 336px"></div>
</div>
<div class="col-md-4 col-md-offset-4">
<div class="thumbnail" style="height: 336px;"></div>
</div>
</div>
</div>
</body>
列排序
添加类名
class="col-md-push-<偏移的列数> "
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="normalize.css">
<title>clearfix</title>
<style>
.red{
background-color: red;
height: 100px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<!-- // 将该标签居中-->
<div class="col-md-6 red col-md-offset-3">我要居中</div>
</div>
<div class="row">
//将标签调换顺序
<div class="col-md-8 col-md-push-4 red">我要在右边</div>
<div class="col-md-4 col-md-pull-8 red">我要在左边</div>
</div>
</div>
</body>
常用操作
# 初始化格式
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="normalize.css">
<title>Title</title>
</head>
页面主题
# 标题(h1-h6) 小号文本(small)
<h1>老男孩教育 <small>上海分校区</small></h1>
<p>在苍茫的大海上，在乌云和大海之间，海燕像黑色的闪电，在苍茫的大海上，在乌云和大海之间，海燕像黑色的闪电，在苍茫的大海上，在乌云和大海之间，海燕像黑色的闪电，在苍茫的大海上，在乌云和大海之间，海燕像黑色的闪电</p>
# lead 表示衷心内容
<p class="lead">在苍茫的大海上，在乌云和大海之间，海燕像黑色的闪电，在苍茫的大海上，在乌云和大海之间，海燕像黑色的闪电，在苍茫的大海上，在乌云和大海之间，海燕像黑色的闪电，在苍茫的大海上，在乌云和大海之间，海燕像黑色的闪电</p>
# mark标签高亮显示
<p>老男孩教育 <mark>深圳校区</mark>开班了</p>
# 被删除的文本
<del>被删除的文本</del>
# 无用文本
<s>无用文本</s>
# 插入文本
<ins>插入文本</ins>
# 带下划线的文本
<u>待下划线的文本</u>
# strong标签加粗
<p>老男孩教育 <strong>深圳校区</strong> 开班了</p>
# 斜体
<p>老男孩教育 <em>深圳校区</em> 开班了</p>
# 对齐
1. 居中
<p class="text-center">老男孩教育 <em>深圳校区</em> 开班了</p>
2. 左对齐
<p class="text-left">老男孩教育 <em>深圳校区</em> 开班了</p>
3. 右对齐
<p class="text-right">老男孩教育 <em>深圳校区</em> 开班了</p>
4. 两端对齐
<p class="text-justify">老男孩教育 <em>深圳校区</em> 开班了</p>
5. 没有空格
<p class="text-nowrap">老男孩教育 <em>深圳校区</em> 开班了</p>
# 改变大小写
1. 全部大写
<p class="text-uppercase">owen is sb</p>
2. 全部小写
<p class="text-lowercase">Owen is Sb</p>
3. 全部首字母大写
<p class="text-capitalize">owen is sb</p>
# 基本缩略语
<abbr title="上海全栈1期">SHS1</abbr>
# 首字母缩略语
<p class="initialism" title="上海全栈1期">SHS1</p>
# 地址
<address>
<strong>老男孩教育</strong>
康桥东路298号 <br>
上海浦东新区 <br>
<abbr title="phone">P:</abbr> (123) 3453-322323
</address>
# 默认样式的引用 将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用，我们建议用 <p> 标签。
<blockquote><p>owen is sb</p></blockquote>
# 多种引用样式 对于标准样式的 <blockquote>，可以通过几个简单的变体就能改变风格和内容。
# 添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。
<blockquote>
<p>
owen is sb
</p>
<footer>
owen love huhongpeng
owen love huhongpeng
owen love huhongpeng
owen love huhongpeng
owen love huhongpeng
</footer>
</blockquote>
# 另一种展示风格
<blockquote class="blockquote-reverse">owen is sb</blockquote>
# 无序列表
<ul>
<li>胡大鹏 is sb</li>
<li>胡二鹏 is sb</li>
<li>胡三鹏 is sb</li>
<li>胡小鹏 is sb</li>
</ul>
# 有序列表
<ol>
<li>胡大鹏 is sb</li>
<li>胡二鹏 is sb</li>
<li>胡三鹏 is sb</li>
<li>胡小鹏 is sb</li>
</ol>
# 无样式的列表
<ul class="list-unstyled">
<li>胡大鹏 is sb</li>
<li>胡二鹏 is sb</li>
<li>胡三鹏 is sb</li>
<li>胡小鹏 is sb</li>
</ul>
# 内联列表 （列表在一行显示）
<ul class="list-inline">
<li>胡大鹏 is sb</li>
<li>胡二鹏 is sb</li>
<li>胡三鹏 is sb</li>
<li>胡小鹏 is sb</li>
</ul>
描述
# 上面是人名，西面是描述信息
<dl>
<dt>胡大鹏</dt>
<dd>大SBadsdfsjklsdfgijhklldfgjkljkdfgljkdfgljkdfg</dd>
<dt>胡二鹏</dt>
<dd>二SBsdfagiohdfgoidfgoijgdfsljkdfgkljlksdf</dd>
<dt>胡小鹏</dt>
<dd>小SBdfgkljljkdfglkjfd;jklsdfg;kjldfgsl;jkfd</dd>
</dl>
# 定义class="dl-horizontal" 左边是人名 右边是描述信息
<dl class="dl-horizontal">
<dt>胡大鹏</dt>
<dd>大SBadsdfsjklsdfgijhklldfgjkljkdfgljkdfgljkdfg</dd>
<dt>胡二鹏</dt>
<dd>二SBsdfagiohdfgoidfgoijgdfsljkdfgkljlksdf</dd>
<dt>胡小鹏</dt>
<dd>小SBdfgkljljkdfglkjfd;jklsdfg;kjldfgsl;jkfd</dd>
</dl>
代码
# 在页面上显示<div>
<p><div></p> <!-- 默认这么写-->
<p><code><div></code></p> <!-- 在页面上显示div标签给一个标识-->
# 页面中将shift渲染成一个按钮
<p>帮助信息：按住 <kbd>shift</kbd>就支持批量操作啦！</p>
<div style="height: 100px"></div>
# 代码块 pre 标签
<pre>print('hello shenzheng, 骑士计划')</pre>
# 变量 y=mx+b2
<var>y</var>=<var>mx</var>+<var>b</var><var>2</var>
# 程序输出
<samp>This is a dog named 胡鸿鹏</samp>
表格
table标签的操作
class=table 表格样式
class=table-bordered 表格边框
class=table-hover 悬浮效果
class=table-striped 隔行变色
table-condensed 单元格之间更紧凑
tr行操作 鼠标悬停时候的各种颜色
class=active
class=success
class=info
class=warning
class=danger
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tr class="success">
<td>1</td>
<td>胡鸿鹏</td>
<td>黄色</td>
</tr>
<tr class="active">
<td>2</td>
<td>胡二鹏</td>
<td>绿色</td>
</tr>
<tr>
<td>2</td>
<td>胡三鹏</td>
<td>红色</td>
</tr>
</table>
<table class="table table-bordered table-hover table-striped table-condensed">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tr class="warning">
<td>1</td>
<td>胡鸿鹏</td>
<td>黄色</td>
</tr>
<tr class="danger">
<td>2</td>
<td>胡二鹏</td>
<td>绿色</td>
</tr>
<tr class="info">
<td>2</td>
<td>胡三鹏</td>
<td>红色</td>
</tr>
</table>
按钮
普通按钮
<button class="btn">btn</button>
<button class="btn-default">btn-default</button>
<button class="btn-group">btn-group</button>
<button class="btn-group-lg">btn-group-lg</button>
<button class="btn-group-sm">btn-group-sm</button>
<button class="btn-group-vertical">btn-group-vertical</button>
<button class="btn-group-xs">btn-group-xs</button>
彩色按钮
<button class="btn-primary">btn-primary</button>
<button class="btn-danger">btn-danger</button>
<button class="btn-info">btn-info</button>
<button class="btn-warning">btn-warning</button>
<button class="btn-success">btn-success</button>
不同尺寸的按钮
<button class="btn-lg">btn-lg</button>
<button class="btn-sm">btn-sm</button>
<button class="btn-xs">btn-xs</button>
<button class="btn-toolbar">btn-toolbar</button>
<button class="btn-link">btn-link</button>
块级按钮
通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
<button class="btn-block">btn-block</button>
<button class="btn-group-justified">btn-group-justified</button>
图片
<div class="row">
<img src="http://e.hiphotos.baidu.com/image/pic/item/8ad4b31c8701a18bdb1e8885972f07082938fe07.jpg" alt="" class="img-rounded" width="250px">
<img src="http://e.hiphotos.baidu.com/image/pic/item/8ad4b31c8701a18bdb1e8885972f07082938fe07.jpg" alt="" class="img-circle" width="250px">
<img src="http://e.hiphotos.baidu.com/image/pic/item/8ad4b31c8701a18bdb1e8885972f07082938fe07.jpg" alt="" class="img-thumbnail" width="250px">
</div>
设置标签内的字体颜色和背景颜色
<div class="row">
<p>世情薄</p>
<p>人情恶</p>
<p>雨送黄昏花易落</p>
<p>晓风干</p>
<p>泪痕残</p>
<p>欲笺心事</p>
<p>独语斜阑</p>
<p>难 难 难</p>
<p class="text-success">人成各</p>
<p class="bg-success">今非咋</p>
<p>病魂常似秋千索</p>
<p>角声寒</p>
<p>怕人寻间</p>
<p>咽泪装欢</p>
<p>瞒 瞒 瞒</p>
<div style="height: 500px"></div>
</div>
表单
简单登录界面设计
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="normalize.css">
<title>Title</title>
<style>
.login-box{
margin-top: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="row login-box">
<h1 class="text-center">请登录</h1>
<div class="col-md-4 col-md-offset-4">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">用户名</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="用户名">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">密码</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword3" placeholder="密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label>
<input type="checkbox"> 记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
登录界面设计 用户名为空给用户返回提示信息
<span class="help-block">用户名不能为空</span>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="normalize.css">
<title>Title</title>
<style>
.login-box{
margin-top: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="row login-box">
<h1 class="text-center">请登录</h1>
<div class="col-md-4 col-md-offset-4">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">用户名</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="用户名">
<span class="help-block">用户名不能为空</span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">密码</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword3" placeholder="密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label>
<input type="checkbox"> 记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
登录界面设计 用户名为空给用户返回提示信息并变色
<div class="form-group has-error">
<label for="inputEmail3" class="col-sm-3 control-label">用户名</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="用户名">
<span class="help-block">用户名不能为空</span>
</div>
</div>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="normalize.css">
<title>Title</title>
<style>
.login-box{
margin-top: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="row login-box">
<h1 class="text-center">请登录</h1>
<div class="col-md-4 col-md-offset-4">
<form class="form-horizontal">
<div class="form-group has-error">
<label for="inputEmail3" class="col-sm-3 control-label">用户名</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="用户名">
<span class="help-block">用户名不能为空</span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">密码</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword3" placeholder="密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label>
<input type="checkbox"> 记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
登录界面设计 一点击用户名表单，所有报错信息消失
<script src="jq/jquery-3.4.1.js"></script>
<script>
$("input").on("focus",function () {
//清空光标所点的表单所在的标签的下一个标签的类名以及父标签的父标签的类名，只有一点击，报错信息就小时
$(this).next().text("").parent().parent().removeClass("has-error");
})
</script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="normalize.css">
<title>Title</title>
<style>
.login-box{
margin-top: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="row login-box">
<h1 class="text-center">请登录</h1>
<div class="col-md-4 col-md-offset-4">
<form class="form-horizontal">
<div class="form-group has-error">
<label for="inputEmail3" class="col-sm-3 control-label">用户名</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="用户名">
<span class="help-block">用户名不能为空</span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">密码</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword3" placeholder="密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label>
<input type="checkbox"> 记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
<script src="jq/jquery-3.4.1.js"></script>
<script>
$("input").on("focus",function () {
//清空光标所点的表单所在的标签的下一个标签的类名以及父标签的父标签的类名，只有一点击，报错信息就小时
$(this).next().text("").parent().parent().removeClass("has-error");
})
</script>
登录界面设计 修改按钮样式
# 通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素
<button type="submit" class="btn btn-default btn-block btn-primary">登录</button>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="normalize.css">
<title>Title</title>
<style>
.login-box{
margin-top: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="row login-box">
<h1 class="text-center">请登录</h1>
<div class="col-md-4 col-md-offset-4">
<form class="form-horizontal">
<div class="form-group has-error">
<label for="inputEmail3" class="col-sm-3 control-label">用户名</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="用户名">
<span class="help-block">用户名不能为空</span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">密码</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword3" placeholder="密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label>
<input type="checkbox"> 记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-default btn-block btn-primary">登录</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
<script src="jq/jquery-3.4.1.js"></script>
<script>
$("input").on("focus",function () {
//清空光标所点的表单所在的标签的下一个标签的类名以及父标签的父标签的类名，只有一点击，报错信息就小时
$(this).next().text("").parent().parent().removeClass("has-error");
})
</script>
图标
默认图标
https://v3.bootcss.com/components/
<div class="container">
<span class="glyphicon glyphicon-heart-empty green"></span>
<button class="btn btn-defaultg btn-lg"><span class="glyphicon glyphicon-heart-empty"></span>选我</button>
</div>
通过font awesome 设置图标
http://fontawesome.dashgame.com
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
<title>图标</title>
</head>
设置基本图标
使用 fa-lg (33%递增)、fa-2x、 fa-3x、fa-4x，或者 fa-5x 类 来放大图标。
<div class="container">
<button><i class="fa fa-wechat fa"></i></button>
<button><i class="fa fa-wechat fa-2x"></i></button>
<button><i class="fa fa-wechat fa-3x"></i></button>
<button><i class="fa fa-wechat fa-4x"></i></button>
<button><i class="fa fa-wechat fa-5x"></i></button>
</div>
导航菜单
使用 fa-fw 可以将图标设置为一个固定宽度。主要用于不同宽度图标无法对齐的情况。 尤其在列表或导航时起到重要作用。
<div class="container">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div>
列表
使用 fa-ul 和 fa-li 便可以简单的将无序列表的默认符号替换掉。
<div class="container">
<ul class="fa-ul">
<li><i class="fa-li fa fa-spinner fa-spin"></i>第1项</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>第2项</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>第3项</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>第4项</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>第5项</li>
</ul>
</div>
组合图标
<div class="container">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-weibo fa-stack-1x"></i>
</span>
</div>
登录注册图标
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" type="text" placeholder="请输入邮箱地址">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input class="form-control" type="password" placeholder="请输入密码">
</div>
进度条
<div class="progress">
<div class="progress-bar progress-bar-striped active"
role="progressbar" aria-valuenow="60" aria-valuemin="0"
aria-valuemax="100" style=" 70%">
70%
</div>
</div>
面板
<div class="page-header">
<h1>信息收集卡 <small></small></h1>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">基本信息</h3>
</div>
<div class="panel-body">
</div>
</div>
