Bootstarp总结
Bootstrap
Bootstrap，一个前端的开发框架， 来自Twitter，基于HTML、CSS、JavaScript，方便前端开发。
是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
当然，这个主用于响应式网页的开发。
响应式布局
响应式和自适应的区别？
响应式：1套代码
示例网站：https://www.intel.cn/content/www/cn/zh/homepage.html
https://worktile.com/
自适应：多套代码，根据不同的设备加载不同的代码
示例网站：大部分的网站都有，因为现在的人用手机太多了
响应式网页的不足：
内容不宜过多，只适合一些展示类网站，代码量变大了，复杂了。不能有过于复杂的动画
响应式/自适应网页的测试：
1.浏览器自带的模拟器
优点：简单方便
缺点：结果要进一步确定
2.真实物理设备测试
iphone 4 4s 5 5s 5c 6 6p 6s 6sp 7 7p 8 x xr xs
安卓 一样买一个
pad ipad 一样买一个
windows
winphone
优点：测试真实可靠
缺点：成本高，测试任务量极大
3.电脑上自带的手机模拟器效果
响应式网站如何编写：
1.必须声明viewport（重点重点）
<meta name="viewport" content="width=device-width,initial-scale=1.0">
2.使用流式布局
float:left , display:inline-block
3.文字，图片，容器...使用相对尺寸（70%，em，rem），不要使用绝对尺寸（px）
em是一个相对单位，相对父元素
rem是一个相对单位，相对于页面的根元素，即html
谷歌浏览器的最小号字体为12px，如果不足12，全部显示为12，别的浏览器没有限制
font-size: 62.5%; 大部分浏览器的默认字体为16px，62.5就是10px
font-size: 100px;
4.最重要的原则：媒体查询技术 css3中的内容 media query
写响应式的时候一般不需要去管高度，高度让其自己去变化，响应式肯定是不会有横向的滚动条，纵向就不一定了
css3中的媒体查询
根据不同的设备，查询到不同的代码，然后执行，不需要刷新
全局css样式
网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
工作原理：
行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
使用行来创建列的水平组。
内容应该放置在列内，且唯有列可以是行的直接子元素。
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。
步骤：
定义容器，相当于HTML的table，容器分为container（有固定的宽度）、container-fluid（100%的宽度）
定义行，相当于HTML的tr，样式：row
定义元素，指定该元素在不同的设备上占用的格子数，样式：col-设备代号-格子数目
xs：超小屏幕，手机，如，col-xs-12
sm：小屏幕，平板
md：中等屏幕，桌面显示器
lg：大屏幕，大桌面显示器
<!DOCTYPE html>
<!-- 1.指定语言的类型 -->
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 2.设置meta标签，为了兼容老版本的IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 3.必须项，设置视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>栅格系统</title>
<!-- 4.引入bootstrap的主文件 -->
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.css">
<!-- 5.处理兼容性的js文件
cssHack 条件注释法 -->
<!--[if lt IE 9]>
<script src="bootstrap-3.3.5-dist/js/html5shiv.min.js"></script>
<script src="bootstrap-3.3.5-dist/js/respond.min.js"></script>
<![endif]-->
<style>
div{
border: 1px solid #000;
}
</style>
</head>
<body>
<!-- “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中 -->
<div class="container">
<!-- 一行中有一列 -->
<div class="row">
<div class="col-md-1">col-md-1</div>
</div>
<div class="row">
<div class="col-md-2">col-md-2</div>
</div>
<div class="row">
<div class="col-md-3">col-md-3</div>
</div>
<div class="row">
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-5">col-md-5</div>
</div>
<div class="row">
<div class="col-md-6">col-md-6</div>
</div>
<div class="row">
<div class="col-md-7">col-md-7</div>
</div>
<div class="row">
<div class="col-md-8">col-md-8</div>
</div>
<div class="row">
<div class="col-md-9">col-md-9</div>
</div>
<div class="row">
<div class="col-md-10">col-md-10</div>
</div>
<div class="row">
<div class="col-md-11">col-md-11</div>
</div>
<div class="row">
<div class="col-md-12">col-md-12</div>
</div>
<!-- 一行中有多列 -->
<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-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
</div>
<!-- 针对不同的屏幕进行设计 -->
<div class="row">
<div class="col-lg-3">col-lg-3</div>
</div>
<div class="row">
<div class="col-md-3">col-md-3</div>
</div>
<div class="row">
<div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
<div class="col-xs-3">col-xs-3</div>
</div>
<!-- 变宽 -->
<!-- 大屏幕的时候占一份 -->
<!-- 中等屏幕的时候占三分 -->
<!-- 小屏幕的时候占六分 -->
<!-- 超小屏幕的时候占十分 -->
<div class="row">
<div class="col-lg-1 col-md-3 col-sm-6 col-xs-10">宽度是可以变化的</div>
</div>
<!-- 列的偏移 使用的是margin-->
<div class="row">
<div class="col-md-2">LOGO</div>
<!-- <div class="col-md-3"></div> -->
<div class="col-md-3 col-md-offset-7">
<input type="text" style="width: 100%" placeholder="请输入你想搜索的内容">
</div>
</div>
<!-- 列的排序 使用的是相对定位中的left，是不会影响其他的列的-->
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
<!-- 列的显示和隐藏 -->
<div class="row">
<div class="col-xs-5 hidden-xs">col-xs-5</div>
</div>
</div>
<!--
.col-xs- 超小屏幕 手机 (<768px)
.col-sm- 小屏幕 平板 (≥768px)
.col-md- 中等屏幕 桌面显示器 (≥992px)
.col-lg- 大屏幕 大桌面显示器 (≥1200px) -->
<!-- 6.引入jquery，因为bootstrap是依赖于jquery，所以jquery必须放在前面先加载 -->
<!-- 最好使用bootstrap自己带的jquery -->
<script src="bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
<!-- 7.引入bootstrap中所需要用到的JavaScript插件 -->
<script src="bootstrap-3.3.5-dist/js/bootstrap.js"></script>
</body>
</html>
排版
Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。
使用 Bootstrap 的排版特性，您可以创建标题、段落、列表及其他内联元素。
代码
第一种是 <code> 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。
第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么应该使用 <pre> 标签
确保使用 <pre> 和 <code> 标签时，开始和结束标签使用了 unicode 变体： < 和 >。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 代码</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p><code><header></code> 作为内联元素被包围。</p>
<p>如果需要把代码显示为一个独立的块元素，请使用 <pre> 标签：</p>
<pre>
<article>
<h1>Article Heading</h1>
</article>
</pre>
</body>
</html>
表格
Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：
| 标签 | 描述 |
|---|---|
| <table> | 为表格添加基础样式。 |
| <thead> | 表格标题行的容器元素（<tr>），用来标识表格列。 |
| <tbody> | 表格主体中的表格行的容器元素（<tr>）。 |
| <tr> | 一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）。 |
| <td> | 默认的表格单元格。 |
| <th> | 特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用。 |
| <caption> | 关于表格存储内容的描述或总结。 |
表格类
下表样式可用于表格中：
| 类 | 描述 |
|---|---|
| .table | 为任意 <table> 添加基本样式 (只有横向分隔线) |
| .table-striped | 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) |
| .table-bordered | 为所有表格的单元格添加边框 |
| .table-hover | 在 <tbody> 内的任一行启用鼠标悬停状态 |
| .table-condensed | 让表格更加紧凑 |
<tr>, <th> 和 <td> 类
下表的类可用于表格的行或者单元格：
| 类 | 描述 |
|---|---|
| .active | 将悬停的颜色应用在行或者单元格上 |
| .success | 表示成功的操作 |
| .info | 表示信息变化的操作 |
| .warning | 表示一个警告的操作 |
| .danger | 表示一个危险的操作 |
表单
Bootstrap 提供了下列类型的表单布局：
垂直表单（默认）
内联表单
水平表单
所有设置了 .form-control类的<input> 、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。
将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
内联表单：为 <form> 元素添加 .form-inline 类可使其内容左对齐，表单元素在一行排列。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
一定要添加 label 标签
水平排列表单 ： 为表单添加 .form-horizontal 类，可以将 label 标签和控件组水平并排布局。
输入框：括大部分表单控件、文本输入域控件，还支持所有 HTML5。
类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。（只有正确设置了type、属性的输入控件才能被赋予正确的样式）
文本域：<textarea class="form-control" rows="3"></textarea> 可以通过改变 row 属性值改变文本域大小。
多选框和单选框：默认堆叠排列。通过将 .checkbox-inline或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。
下拉列表：为 <select>添加类 .form-control ，可以显示Bootstrap设置的默认样式。对于标记了 multiple属性的 <select>控件来说，默认显示多选项。
静态控件：如果需要在表单中将一行纯文本和 label 元素放置于同一行，为<p> 元素添加 .form-control-static 类。
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." autofocus>
禁用状态：
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
被禁用的 filedset ：为<fieldset>设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件。
只读状态：
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
状态检验：状态包括 error ,warning , success 状态。Bootstrap为这些状态都定义了默认样式。使用时，.has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和.help-block元素都将接受这些校验状态的样式.
添加额外的图标: 设置相应的.has-feedback 类并添加正确的图标.
控件尺寸：通过 .input-lg 类似的类可以为控件设置高度，通过.col-lg-* 类似的类可以为控件设置宽度。通过添加 .form-group-lg 或 .form-group-sm类，为.form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。
按钮
以下样式可用于<a>, <button>, 或 <input> 元素上：
| 类 | 描述 |
|---|---|
| .btn | 为按钮添加基本样式 |
| .btn-default | 默认/标准按钮 |
| .btn-primary | 原始按钮样式（未被操作） |
| .btn-success | 表示成功的动作 |
| .btn-info | 该样式可用于要弹出信息的按钮 |
| .btn-warning | 表示需要谨慎操作的按钮 |
| .btn-danger | 表示一个危险动作的按钮操作 |
| .btn-link | 让按钮看起来像个链接 (仍然保留按钮行为) |
| .btn-lg | 制作一个大按钮 |
| .btn-sm | 制作一个小按钮 |
| .btn-xs | 制作一个超小按钮 |
| .btn-block | 块级按钮(拉伸至父元素100%的宽度) |
| .active | 按钮被点击 |
| .disabled | 禁用按钮 |
下表列出了获得各种大小按钮的 class：
| Class | 描述 |
|---|---|
| .btn-lg | 这会让按钮看起来比较大。 |
| .btn-sm | 这会让按钮看起来比较小。 |
| .btn-xs | 这会让按钮看起来特别小。 |
| .btn-block | 这会创建块级的按钮，会横跨父元素的全部宽度。 |
下表列出了让按钮元素和锚元素呈禁用状态的 class：
| 元素 | Class |
|---|---|
| 按钮元素 | 添加 disabled 属性 到 <button> 按钮。 |
| 锚元素 | 添加 disabled class 到 <a> 按钮。 |
图片
.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
以下类可用于任何图片中。
| 类 | 描述 |
|---|---|
| .img-rounded | 为图片添加圆角 (IE8 不支持) |
| .img-circle | 将图片变为圆形 (IE8 不支持) |
| .img-thumbnail | 缩略图功能 |
| .img-responsive | 图片响应式 (将很好地扩展到父元素) |
响应式图片
通过在 <img> 标签添加 .img-responsive 类来让图片支持响应式设计。 图片将很好地扩展到父元素。
.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上：
辅助类
以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗：
| 类 | 描述 |
|---|---|
| .text-muted | "text-muted" 类的文本样式 |
| .text-primary | "text-primary" 类的文本样式 |
| .text-success | "text-success" 类的文本样式 |
| .text-info | "text-info" 类的文本样式 |
| .text-warning | "text-warning" 类的文本样式 |
| .text-danger | "text-danger" 类的文本样式 |
插件概览
在前面 布局组件 章节中所讨论到的组件仅仅是个开始。Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。即使您不是一名高级的 JavaScript 开发人员，您也可以着手学习 Bootstrap 的 JavaScript 插件。利用 Bootstrap 数据 API（Bootstrap Data API），大部分的插件可以在不编写任何代码的情况下被触发。
站点引用 Bootstrap 插件的方式有两种：
- 单独引用：使用 Bootstrap 的个别的 *.js 文件。一些插件和 CSS 组件依赖于其他插件。如果您单独引用插件，请先确保弄清这些插件之间的依赖关系。
插件弹出框
<div class="container">
<button type="button" class="btn btn-lg btn-danger" data-trigger="hover" data-toggle="popover" data-content="And here's some amazing content. It's very engaging. Right?" >点我弹出/隐藏弹出框</button>
</div>
插件收放效果
<div class="container">
<a href="#Mytarget" data-toggle="collapse">展开和收起</a>
<button data-toggle="collapse" data-target="#Mytarget">展开/收起</button>
<div class="collapse" id="Mytarget">
<div class="well">
<p>HTML</p>
<p>css</p>
<p>JavaScript</p>
</div>
</div>
</div>
模态框
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
方法
modal(options)
将页面中的某块内容作为模态框激活。接受可选参数object。
$('#myModal').modal({
keyboard: false
})
modal('toggle')
//手动打开或关闭模态框。在模态框显示或隐藏之前返回到主调函数中（也就是，在触发shown.bs.modal或hidden.bs.modal事件之前） $('#myModal').modal('toggle')
.modal('show')
手动打开模态框。在模态框显示之前返回到主调函数中（也就是，在触发shown.bs.modal事件之前）。
$('#myModal').modal('show')
.modal('hide')
//手动隐藏模态框。在模态框隐藏之前返回到主调函数中（也就是，在触发hidden.bs.modal事件之前）。 $('#myModal').modal('hide')
轮播图
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- 指示符 -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- 轮播图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">
</div>
<div class="carousel-item">
<img src="https://static.runoob.com/images/mix/img_nature_wide.jpg">
</div>
<div class="carousel-item">
<img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
</div>
</div>
<!-- 左右切换按钮 -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
