一.Bootstrap前奏
1.介绍
官网： http://getbootstrap.com/
中文网： http://www.bootcss.com/
Bootstrap 是一套现成的 CSS 样式集合,界面清新、简洁;要素排版利落大方。Bootstrap 特别适合那种没有设计师的团队（甚至说没有前端的团队），可以快速的出一个网页。
2.特点
1、简洁、直观、强悍的前端开发框架， html、 css、 javascript 工具集，让web 开发更迅速、简单。
2、基于 html5、 css3 的 bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计， 12 列格网，样式向导文档。
3、自定义 JQuery 插件，完整的类库， bootstrap3 基于 Less， bootstrap4基于 Sass 的 CSS 预处理技术
4、 Bootstrap 响应式布局设计,让一个网站可以兼容不同分辨率的设备。Bootstrap 响应式布局设计，给用户提供更好的视觉使用体验。
5、丰富的组件
3.下载与使用
1、下载: http://v3.bootcss.com/getting-started/
2、 下载完成后，拷贝 dist/css 中的 bootstrap.min.css 到项目 css 中,拷贝 dist/js bootstrap.min.js 到项目的 js 中
3、 下载 jquery.js:http://jquery.com/
4、在 html 中模板为:
<!DOCTYPE html>
<html>
<head>
//下面三行,必须写在最前面
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
//下面一行
<link href="bootstrap-3.3.7\dist\css\bootstrap.min.css" rel="stylesheet">
</head>
<body>
//下面两行
<script src="jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7\dist\js\bootstrap.min.js"></script>
</body>
</html>
二.Bootstrap栅格网格系统(Grid System)
1.列组合
列组合简单理解就是更改数字来合并列（原则：列总和数不能超 12， 大于
12,则自动换到下一行。 ），有点类似于表格的 colspan 属性。
2.列偏移、列排序
（1）列偏移:
如果我们不希望相邻的两个列紧靠在一起，但又不想使用 margin 或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-8”，表示该列向右移动 8 个列的宽度(要保证列与偏移列的总数不超过 12，不然会致列断行|换行显示)。
（2）列排序
列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在 Bootstrap 框 架 的 网 格 系 统 中 是 通 过 添 加 类 名 ”col-md-push-*” 和“col-md-pull-*” (其中星号代表移动的列组合数)。往前 pull，往后 push。
(3) 列嵌套
Bootstrap 框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列.
<!DOCTYPE html>
<html>
<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标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<!-- Bootstrap -->
<link href="js/bootstrap-3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<title>bootstrap模板</title>
<style type="text/css">
div{
border: 1px solid pink;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-6">2.col-md-6</div>
<div class="col-md-6">2.col-md-6</div>
</div>
<div class="row">
<div class="col-md-8">3.col-md-8</div>
<div class="col-md-4">3.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">4.col-md-4</div>
<div class="col-md-4 col-md-offset-1">4.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">4.col-md-4</div>
<div class="col-md-4">4.col-md-4</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-4">4.col-md-4</div>
<div class="col-md-4">4.col-md-4</div>
<div class="col-md-4">4.col-md-4</div>
</div>
</div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.3.1.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>三.排版
1.标题
Bootstrap 和普通的 HTML 页面一样，定义标题都是使用标签<h1>到<h6>,只不过 Bootstrap 覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样。为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6 六个类名。同时后面可以紧跟着一行小的副标题<small></small>或使用.small
2.段落
段落是排版中另一个重要元素之一。通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和 margin 也做相应的处理。可以使用以下标签给文本做突出样式处理：
<small>:小号字
<b><strong>:加粗
<i><em>:斜体
3.引用
<blockquote>：标签定义摘自另一个源的块引用，
使用.blockquote-reverse，实现右对齐。
<footer>:脚注
<cite>： 表示对某个参考文献的引用
4.强调
定义了一套类名，这里称其为强调类名，这些强调类都是通过颜色来表示强调，具本说明如下：
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）
5.文本对齐与列表
在 CSS 中常常使用 text-align 来实现文本的对齐风格的设置。
bootstrap 根据平时的使用情形提供了六种形式的列表:( 普通列表、有序列表、去点列表、内联列表、 描述列表、水平描述列表）。在样式方面 Bootstrap只是在原有的基础上做了一些细微的优化(margin 调整),其他差别不大，加入了一些样式:
6.表格与表单
(1)表格
（a样式:
Bootstrap 为表格提供了 1 种基础样式和 4 种附加样式以及 1 个支持响应式的表格。在使用 Bootstrap 的表格过程中，只需要添加对应的类名就可以得到不同的表格风格：
基础样式
1） .table：基础表格
附加样式
1) .table-striped：斑马线表格
2) .table-bordered：带边框的表格
3) .table-hover：鼠标悬停高亮的表格
4). table-condensed：紧凑型表格，单元格没内距或者内距较其他表格的内距更小
（b <tr>b提供了五种不同的类名，每种类名控制了行的不同背景颜色
<!DOCTYPE html>
<html>
<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标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<!-- Bootstrap -->
<link href="js/bootstrap-3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<title>bootstrap模板</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<blockquote>
好好学习 Java！
<footer>本文出自大师之手</footer>
<cite>thinking in java</cite>
</blockquote>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="text-muted">提示效果</div>
<div class="text-primary">主要效果</div>
<div class="text-success">成功效果</div>
<div class="text-info">信息效果</div>
<div class="text-warning">警告效果</div>
<div class="text-danger">危险效果</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">我两端对齐北京尚学堂-cctv 央视网广告合作伙伴,专业 IT 培训机构,口碑最好的 java 培训、,iOS 培训,android 培训,大数据培训,web 前端,0 元入 学,先就业后付款,平均就业薪水 9500 以上</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul class="list-unstyled">
<li>无序项目列表一</li>
<li>无序项目列表二</li>
</ul>
<br />
<ul class="list-inline">
<li>首页</li>
<li>java 学院</li>
<li>在线课堂</li>
</ul>
<br />
<dl>
<dt>尚学堂</dt>
<dd>中国最有良心的培训机构</dd>
<dt>速学堂</dt>
<dd>o2o 在线学习平台</dd>
</dl>
<dl class="dl-horizontal">
<dt>尚学堂 使用 bootstrap3 的 css 哦</dt>
<dd>中国最有良心的一站式的 o2o 培训机构</dd>
<dt>测试标题不能超过 160px 的宽度,否则 2 个点</dt>
<dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd>
</dl>
<div>
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
</div>
</div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.3.1.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>(2)表单
表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等
.form-control .input-lg（较大） .input-sm（较小）
(1） 输入框
.form-control
（2） 下拉选择框 select
多行选择设置： multiple="multiple"
（3） 文本域 textarea
<textarea class="form-control" rows="3"></textarea>
（4） 复选框 checkbox
.checkbox， 水平显示： .checkbox-inline
（5） 单选择按钮
.radio， 水平显示： .radio-inline
（6） 按钮
1） 使用 button 实现
基础样式: btn
附加样式： btn-primary btn-info btn-success btn-warning
btn-danger btn-link btn-default
2） 多标签支持:使用 a div 等制作按钮
3） 按钮大小
使用 .btn-lg、 .btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮
4）按钮禁用
方法 1：在标签中添加 disabled 属性
方法 2：在元素标签中添加类名“disabled”
在 class 属性中添加 disabled 只是样式上禁用了，并不是真正的禁用了此按钮！
<!DOCTYPE html>
<html>
<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标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<!-- Bootstrap -->
<link href="js/bootstrap-3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<title>bootstrap模板</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<table class="table table-bordered">
<tr class="warning"><td >aaaa</td><td >bbbbb</td><td >ccccc</td></tr>
<tr ><td >.aaaa.</td><td >.bbbbb.</td><td >.ccccc.</td></tr>
<tr ><td >.aaaa.</td><td >.bbbbb.</td><td >.ccccc.</td></tr>
<tr ><td >.aaaa.</td><td >.bbbbb.</td><td class="info" >.ccccc.</td></tr>
</table>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-"></div>
</div>
<div class="row">
<div class="col-md-"></div>
</div>
<div class="row">
<div class="col-md-"></div>
</div>
<div class="row">
<div class="col-md-"></div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.3.1.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>7.下拉菜单
在使用 Bootstrap 框架的下拉菜单时，必须使用两个 js
| <!-- 如果要使用 Bootstrap 的 js 插件，必须先调入 jQuery --> <script src="js/jquery-2.1.4.min.js"></script> <!-- 包括所有 bootstrap 的 js 插件或者可以根据需要使用的 js 插件调用 --> <script src="js/bootstrap.min.js"></script> |
要点:
| 1、 使用一个类名为 dropdown 或 btn-group 的 div 包裹整个下拉框: <div class="dropdown"></div> 2、 默认向下 dropdown，向上弹起加入 . dropup 即可 3、 使用 button 作为父菜单，使用类名: dropdown-toggle 和自定义 data-toggle 属性 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 4、 在 button 中 使用 font 制作下拉箭头 <span class="caret"></span> |
| 5、 下拉菜单项使用一个 ul 列表，并且定义一个类名为“dropdown-menu 6、 分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能 7、 分组标题: li 添加类名 “dropdown-header” 来实现分组的功能 8、 对齐方式: 1)、 dropdown-menu-left 左对齐 默认样式 2)、 dropdown-menu-right 右对齐 8、激活状态（.active）和禁用状态（.disabled） |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="bootstrap-3.3.7\dist\css\bootstrap.min.css" rel="stylesheet">
<style type="text/css">
div {
margin-top: 200px;
margin-left: 200px;
}
li {
background-color: burlywood;
}
</style>
</head>
<body>
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
上拉表单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">第一周</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">第二周</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">第三周</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">第四周</a></li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">啦啦啦</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Another action</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7\dist\js\bootstrap.min.js"></script>
</html>
四.按钮组
可以设置按钮的尺寸,激活状态,禁用状态等
<!-- 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>五.导航与分页导航
实现
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>六.缩略图
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>七.图片轮播(Carousel)及动画显示(了解)
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
5151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
