1.1 Bootstrap概述
Bootstrap简介：
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的。Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。
Boostrap特点
- 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持： - 所有的主流浏览器都支持 bootstrap。
Internet Explorer Firefox Opera Google Chrome Safari - 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 bootstrap。
- 响应式设计：bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
1.2 编写响应式页面
对应的模版和框架等，参考Bootstrap，可以直接下载代码，修改；另外还可以看LayUI
Bootstrap的使用步骤：
1.下载bootstrap
http://www.bootcss.com/
2.导入bootstrap.css文件
3.导入jquery.js
4.导入bootstrap.js
<!--导入css-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!-- 导入jquery-->
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<!--导入css.js -->
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<!--导入css -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
5.导入兼容支持移动设备标签
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
6.将所有的内容放到布局容器中
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
...
</div>
测试1: 使用container显示
<div class="container">
<div style="border: 1px solid red;">111111</div>
</div>
测试2: 使用container显示
<div class="container-fluid">
<div style="border: 1px solid red;">111111</div>
</div>
1.3 Bootstrap的组成
1.全局css样式
2.组件
3.js插件
Bootstrap入门
<!DOCTYPE html>
<html lang="en">
<head>
<title>bootstrap入门</title>
<!--1.三个meta标签引入-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--2.引入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!--3.引入js，一个是jquery的，一个是bootstrap的-->
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="container" style="background-color: skyblue; height: 200px">
<h1>布局容器1</h1>
</div>
<div class="container-fluid " style="background-color: pink; height: 200px">
<h1>布局容器2</h1>
</div>
</body>
</html>
1.4 栅格系统
1.4.1 什么是栅格系统
栅格系统可以替代【table】制作注册和登录界面
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
注意: Bootstrap将每一行分成12份!
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
（1）“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
（2）通过“行（row）”在水平方向创建一组“列（column）”。
（3）你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
1.4.2 媒体查询功能
bootstrap通过媒体查询判断是什么上网设备
（1）超小屏幕（ 手机 <768px 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的）
（2）小屏幕（平板，大于等于 768px）
@media (min-width: @screen-sm-min) { ... }
（3）中等屏幕（桌面显示器，大于等于 992px）
@media (min-width: @screen-md-min) { ... }
（4）大屏幕（大桌面显示器，大于等于 1200px）
@media (min-width: @screen-lg-min) { ... } col-lg-2
大屏幕 大于1200 col-lg-
中屏幕 大于992<1200 col-md-
小屏幕 大于768<922 col-sm-
最小屏幕 小于768 col-xs-
<!DOCTYPE html>
<html lang="en">
<head>
<title>bootstrap栅格系统</title>
<!--1.三个meta标签引入-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--2.引入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!--3.引入js，一个是jquery的，一个是bootstrap的-->
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
<style type="text/css">
#div1 div{
border: 1px solid pink;
}
#div2 div{
border: 1px solid skyblue;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color: beige; height: 300px">
<!--row：将页面纵向分为12份-->
<div class="row" id="div1">
<!--屏幕最大的时候，一份一个-->
<!--屏幕中等的时候，2份一个-->
<!--屏幕小的时候，4分一个-->
<!--屏幕极小的时候，6份一个-->
<!--也可以不均分-->
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">2</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">3</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">4</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">5</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">6</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">7</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">8</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">9</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">10</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">11</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">12</div>
</div>
<div id="div2" class="row">
<div class = "col-xs-3">xxx</div>
<div class = "col-xs-3">yyy</div>
<div class = "col-xs-3">zzz</div>
<div class = "col-xs-3">aaa</div>
</div>
</div>
</body>
</html>
1.5 排版
1.5.1 标题
标题: HTML 中的所有标题标签，
到
均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<title>bootstrap排版系统</title>
<!--1.三个meta标签引入-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--2.引入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!--3.引入js，一个是jquery的，一个是bootstrap的-->
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<h1>标题</h1>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<h1>对齐</h1>
<p class="text-center">你好</p>
<p class="text-right">Java</p>
<h1>列表</h1>
<ul>
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
<li>榴莲</li>
</ul>
</body>
</html>
1.5.2 mark标签
you can use the mark tag to <mark> hight hight</mark>
<br/>
del标签
you can use the mark tag to <del> hight hight</>
1.5.3 对齐
通过文本对齐类，可以简单方便的将文字重新对齐。
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
1.5.4 表格
table 表格
table-striped 表格隔行变色
table-hover 悬浮变色
通过这些状态类可以为行或单元格设置颜色。
Class 描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
<!DOCTYPE html>
<html lang="en">
<head>
<title>bootstrap表格</title>
<!--1.三个meta标签引入-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--2.引入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!--3.引入js，一个是jquery的，一个是bootstrap的-->
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<!--table-hover 鼠标经过变色-->
<table class="table table-striped table-bordered table-hover">
<!--success/info/warning对应不同的颜色-->
<tr class="success">
<td>xxx</td>
<td>yyy</td>
<td>zzz</td>
</tr>
<tr class="info">
<td>xxx</td>
<td>yyy</td>
<td>zzz</td>
</tr>
<tr class="warning">
<td>xxx</td>
<td>yyy</td>
<td>zzz</td>
</tr>
</table>
</body>
</html>
1.6 表单
元素都将被默认设置宽度属性为 width: 100%;将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
2.6.1 基本实例
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select>
-把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
-向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
form-group 会将label和input上下排列
form-control 会自动将input填充满屏幕 并添加点击高亮效果
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<!DOCTYPE html>
<html lang="en">
<head>
<title>bootstrap表单</title>
<!--1.三个meta标签引入-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--2.引入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!--3.引入js，一个是jquery的，一个是bootstrap的-->
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<h1>表单</h1>
<!--form-inline表示一行显示-->
<form action="" method="post" class="form-inline">
<div>
<!--for的属性，可以保证点击【用户名】文字的时候也能选中输入-->
<label for="username">用户名：</label>
<div>
<input type="text" id="username" name="username" class="form-control" placeholder="用户名">
</div>
</div>
<br/>
<div>
<label for="password">密码:</label>
<div>
<input type="password" name="password" id="password" class="form-control" placeholder="密码">
</div>
</div>
<br/>
<div>
<input class="btn btn-default" type="submit" value="登录">
</div>
</form>
</body>
</html>
2.6.2 内联表单
为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
2.6.3 水平表单
通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，
可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，
使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<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-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
案例: 显示带引导的
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
2.6.4 单选框和多选框
通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
2.6.5 下拉列表
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
2.6.6 静态控件
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
2.6.7 校验状态
Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，
添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。
任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>
添加额外的图标
你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。
反馈图标（feedback icon）只能使用在文本输入框 <input class="form-control"> 元素上。
需要导入font字体库
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
2.6.8 按钮
class = btn 将任何东西变成按钮 需要配合 btn-default a标签也可以
1.按钮颜色
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>
2.成组button
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> 选项 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> 选项 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> 选项 3
</label>
</div>
2.6.9 尺寸
需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮
<p>
<button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
<button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
<button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
<button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
<button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>
2.6.10 图片形状
响应式图片!随着窗体大小改变大小
<img src="…/img/6.png" class=“img-responsive” alt=“Responsive image”>
通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状。
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
2.6.11 辅助类
一.情境文本颜色
通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
二.情境背景色
和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
2.6.12 浮动
<div class="pull-left">...</div>
<div class="pull-right">...</div>
2.6.13 可见类
(<768px) (≥768px) (≥992px)(≥1200px)
.visible-xs-* 可见 隐藏 隐藏 隐藏
.visible-sm-* 隐藏 可见 隐藏 隐藏
.visible-md-* 隐藏 隐藏 可见 隐藏
.visible-lg-* 隐藏 隐藏 隐藏 可见
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏
2.7 组件
无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能
2.7.1 图片使用Glyphicons 字体图标
<span class="glyphicon glyphicon-save-file"></span>
2.7.2 下拉菜单
<div class="dropdown">
<!-- 下拉框 触发按钮 -->
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
下拉框
<!--下拉框图片-->
<span class="glyphicon glyphicon-arrow-down"></span>
</button>
<!-- 下拉菜单-->
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
2.7.3 按钮组
把一系列的.btn按钮放入.btn-group。
btn-group 内部嵌套 btn
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
2.7.4 toolbar 按钮工具栏
把一组<div class=“btn-group”> 组合进一个 <div class=“btn-toolbar”> 中就可以做成更复杂的组件
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>
2.7.5 尺寸
只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
2.7.6 带分割线的下拉框
<div class="btn-group">
<button id="show" type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="ul" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
点击切换button显示内容
var $arr=$("#ul li");
$.each($arr, function() {
$(this).click(function(){
var $t = $(this).text();
("#show").text(t);
});
});
2.7.7 标签式导航栏
<li role="presentation" class="active"><a href="#" data-toggle="tab">Home</a></li>
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#" data-toggle="tab">Messages</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="h5">
<p>Html5最近比较火</p>
</div>
<div class="tab-pane fade" id="java">
<p>java是高级语言，是最好的语言</p>
</div>
<div class="tab-pane fade" id="android">
<p>android是最受大众欢迎的智能机品牌</p>
</div>
</div>
2.7.8 胶囊导航
<ul class="nav nav-pills ">
<li class="active"><a href="#h5" data-toggle="tab">HTML5</a></li>
<li><a href="#java" data-toggle="tab">JAVAEE</a></li>
<li><a href="#android" data-toggle="tab">ANDROID</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="h5">
<p>Html5最近比较火</p>
</div>
<div class="tab-pane fade" id="java">
<p>java是高级语言，是最好的语言</p>
</div>
<div class="tab-pane fade" id="android">
<p>android是最受大众欢迎的智能机品牌</p>
</div>
</div>
2.7.9 导航条
data-toggle="tab"
倒航条自带响应效果 缩小显示成手机效果
<li role="presentation" class="active"><a href="#" data-toggle="tab">Home</a></li>
2.7.10 路径导航 面包屑导航
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">2013</a></li>
<li class="active">十一月</li>
</ol>
2.7.11 标签
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
2.7.12 徽章 提示消息数
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
2.7.13 巨幕
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
2.7.14 缩略图
<div class="container" style="margin-top: 30px;">
<div class="row">
<div class="col-md-4">
<a href="#" class="thumbnail"> <img src="images/6.png"></img></a>
<div class="caption">
<h4>HTML入门</h4>
<h6>html是最好的静态网页语言</h6>
</div>
</div>
</div>
</div>
2.7.15 进度条
<div class="progress">
<div id="progressbar" class="progress-bar progress-bar-success"
role="progressbar" aria-valuenow="60" aria-valuemin="0"
aria-valuemax="100" style="width: 10%;">
<span class="sr-only">90% 完成（成功）</span>
</div>
</div>
2.7.16 well
<div class="well well-lg">您好，我在大的 Well 中！</div>
<div class="well well-sm">您好，我在小的 Well 中！</div>
2.8 jQuery插件
aria-labelledby属性
当想要的标签文本已在其他元素中存在时，可以使用aria-labelledby，并将其值为所有读取的元素的id。如下：
当ul获取到焦点时，屏幕阅读器是会读：“选择您的职位”
但是如果我们没有给输入框设置label时，当其获得焦点时，屏幕阅读器会读出aria-label属性的值，aria-label不会在视觉上呈现效果。
HTML5针对html tag增加的属性：role 和 aria-*。
role的作用是描述一个非标准的tag的实际作用。比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这实际上是个button。
ARIA Roles
Use the ARIA role attribute to indicate that a generic tag is playing the role of a standard widget like a button.
而aria-*的作用就是描述这个tag在可视化的情境中的具体信息。比如，
<div role=“checkbox” aria-checked=“checked”></div>
辅助工具就会知道，这个div实际上是个checkbox的角色，为选中状态。
Add ARIA for screen readers
ARIA attributes provides semantic information to screen readers that is normally conveyed visually.
Note that using ARIA does not automatically implement the standard widget behavior, you’ll still need to add focus management and keyboard navigation yourself.
2.8.1 弹出框
<button type="button" class="btn btn-default" title="Popover title"
data-container="body" data-toggle="popover" data-placement="left"
data-content="左侧的 Popover 中的一些内容">
左侧的 Popover
</button>
$(function () {
$("[data-toggle='popover']").popover();
});
2.8.2 提示框
这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip" title="默认的 Tooltip">默认的 Tooltip</a>.
这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">左侧的 Tooltip</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">顶部的 Tooltip</a>.
<script>
$(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>
2.8.3 轮播图
默认五秒自动轮播
<!-- Indicators
需要几张图片!就需要几个 li
还需要几个class等于item的div
-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../images/6.png" alt="...">
<!-- 文字描述-->
<div class="carousel-caption">
...
</div>
</div>
自定义轮播
$('.carousel').carousel({
interval: 2000
})
案例——注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.12.4.js"></script>
<title>注册页面</title>
<style type="text/css">
/*整体布局样式，整体色调和字体大小*/
body {
background-color: #14212A;
font-size: 12px;
}
/*对大块div进行整体颜色和布局的设计*/
#con {
width: 1000px;
height: 550px;
margin: 100px auto;/*水平居中，距离顶部100px*/
background-color: white;
border-radius: 5px;
}
/*对小米商城的连接进行鼠标处理*/
.pull-right a {
color: #FF6700;
text-decoration: none;
}
.pull-right a:hover {
color: #FF6700;
font-weight: bold; /*鼠标放上去，加粗*/
}
#top1 {
overflow: hidden; /*裁剪超出部分，scroll 一直显示滚动条，超出部分滚动可见*/
padding: 20px 50px;
height: 50px;
}
</style>
</head>
<body>
<!--在一个Div中操作，浮动的大块-->
<div id="con">
<!--顶部栏,分左右两个部分-->
<div id="top1">
<!--这个class即是bootstrap属性，又是class编号-->
<!--顶部左边的文字靠左，加粗，20px大小，黑色-->
<div class="pull-left" style="font-weight: bold;font-size: 20px;color: black">
<span class="glyphicon glyphicon glyphicon-user"></span> 会员注册
</div>
<div class="pull-right">
<a href="###">小米商城</a>
</div>
</div>
<!--加一条分割横线-->
<div style="height: 2px; background-color: #FF6700;margin-top: 20px;width: 900px;margin-left: auto;margin-right: auto">
</div>
<!--表单部分-->
<div style="margin-top: 50px">
<form class="form-horizontal"><!--标签和控件组水平并排布局-->
<div class="form-group"><!--增加块元素的下部留白或下部边界，从而使块元素的间距变大-->
<!--control-lable可以使多个lable统一对齐-->
<label class="control-label col-sm-2">用户名</label>
<div class="col-sm-4">
<!--form-control换行+填充整行-->
<input type="text" name="username" class="form-control">
</div>
</div>
<div class="form-group"><!--增加块元素的下部留白或下部边界，从而使块元素的间距变大-->
<label class="control-label col-sm-2">密码</label>
<div class="col-sm-4">
<!--form-control换行+填充整行-->
<input type="password" name="password" class="form-control">
</div>
<div class="col-sm-4">请输入6位以上的字符</div>
</div>
<div class="form-group"><!--增加块元素的下部留白或下部边界，从而使块元素的间距变大-->
<label class="control-label col-sm-2">确认密码</label>
<div class="col-sm-4">
<!--form-control换行+填充整行-->
<input type="password" name="password" class="form-control">
</div>
<div class="col-sm-4">两次输入的密码要一致哦</div>
</div>
<div class="form-group"><!--增加块元素的下部留白或下部边界，从而使块元素的间距变大-->
<label class="control-label col-sm-2">邮箱</label>
<div class="col-sm-4">
<!--form-control换行+填充整行-->
<input type="email" name="email" class="form-control">
</div>
<div class="col-sm-4">填写正确的邮箱格式</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">性别</label>
<div class="col-sm-4">
<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender">女
</div>
<div class="col-sm-4">你是帅哥，还是美女</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" value="提交" class="btn btn-primary btn-lg" style="width: 150px">
<input type="submit" value="重置" class="btn btn-primary btn-lg" style="width: 150px">
</div>
</div>
</form>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
<title>用户注册</title>
<style type="text/css">
body {
background-image: url("img/wow6.jpg");
/*background-color: #14212A;*/
font-size: 12px;
}
#main {
width: 1000px;
background-color: white;
height: 550px;
border-radius: 10px;
margin: 0 auto;
margin-top: 20px;
overflow: hidden; /*内容溢出的时候隐藏*/
}
#top1 {
width: 870px;
margin: 0 auto;
margin-top: 20px;
height: 30px;
}
.fl{
height: 40px;
line-height: 40px;
font-size: 20px;
font-weight: bold;
}
.rl a{
color: orange;
text-decoration: none;
}
.rl a:hover {
font-weight: bold;
}
#seprator {
width: 870px;
margin: 0 auto;
height: 2px;
background-color: orange;
margin-top: 20px;
}
#formdiv {
width: 870px;
margin: 0 auto;
margin-top: 50px;
}
#sep2 {
width: 870px;
height: 1px;
background-color: gray;
margin: 0 auto;
margin-top: 20px;
}
.text-center {
margin-top: 40px;
}
</style>
</head>
<body>
<div id="main">
<div id="top1">
<div class="pull-left fl">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<span>用户注册</span>
</div>
<div class="pull-right rl">
<a href="##">小米商城</a>
</div>
</div>
<div id="seprator"></div>
<div id="formdiv">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label text-right">用户名</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail3" placeholder="UserName">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
<span class="col-sm-2" style="margin-top: 10px">
输入13位密码
</span>
</div>
<div class="form-group">
<label for="inputPassword4" class="col-sm-2 control-label">确认密码</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
<span class="col-sm-2" style="margin-top: 10px">
两次输入密码要一致
</span>
</div>
<div class="form-group">
<label class="col-sm-2 control-label gender" style="margin-top: 1px">性别</label>
<div class="col-sm-4">
<label class="radio-inline"><input type="radio" name="gender" checked="checked">男</label>
<label class="radio-inline"><input type="radio" name="gender">女</label>
</div>
<span class="col-sm-2" style="margin-top: 5px">
你是帅哥，还是美女
</span>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<div class="checkbox">
<label>
<input type="checkbox"> 记住账户
</label>
</div>
</div>
</div>
<div id="sep2" style="margin-top: 50px"></div>
<div class="text-center">
<button class="btn btn-info btn-lg" style="width: 200px">注册</button>
<button class="btn btn-default btn-lg" style="width: 200px">重置</button>
</div>
</form>
</div>
</div>
</body>
</html>
来源：https://blog.csdn.net/qq_45337431/article/details/100638049