一，Bootstrap框架初识
https://v3.bootcss.com/css/
1.Bootstrap是什么？
1.就是一些HTML代码和css代码的组合
2.Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架，它是为实现快速开发web应用程序而设计的一套前端工具包。它支持响应式不布局，并且在V3版本之后坚持移动设备优先。
2.如何使用？
赋值粘贴一把梭
二，Bootstrap框架使用
1.基本模板：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!--IE浏览器高速渲染模式--> <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="bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet"> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --> <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> <!--[if lt IE 9]如要兼容ie9则需要额外添加下面两行> <!--<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>--> <!--<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>--> <![endif]--> </head> <body>
<!--页面容器.container/.container-fluid-->
<div class="container" style="height:1000px;background-color:red"> <h1>你好，世界！</h1> </div> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="jquery.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="bootstrap-3.3.7/js/bootstrap.js"></script> </body> </html>
2.栅格系统
简介：
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。
<!--媒体查询--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; } .c1 { background-color: red; height: 200px; } /*媒体查询*/ @media screen and (max- 700px) { .c1 { background-color: green; } } </style> </head> <body> <div class="c1"> </div> </body> </html>
1.row表示行，必放在container或container-fluid中
2.row被均分为12列，列的语法：col-xx-**
xx的取值范围：xs -> sm -> md -> lg
xs：超小屏幕(手机)
sm：小屏幕(平板)
md：中等屏幕(桌面显示器)
lg：大屏幕(大桌面显示器)
<!--实例：手机、平板、桌面--> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row"> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <!-- Optional: clear the XS cols if their content doesn't match in height --> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> </div>
**的取值范围：1-12
3.只有列能作为行的子元素
4.列偏移
主要作用：使对应的列居中
col-xx-offset-**
<div class="row"> <div class="col-md-4 col-md-offset-4" style="background-color:deepplink;height:100px"></div> </div>
5.列嵌套
为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在.col-sm-*元素内。被嵌套的行(row)所包含的列(column)的个数不能超过12(其实，没有要求必须占满12列)，即：任意一列，都可以在内容再定义row，均分12份。
<div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6 </div> <div class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div>
6.列排序
通过使用.col-md-push-*和.col-md-pull-*类就可以很容易的改变列(column的顺序)。
推：col-xx-push-**
拉：col-xx-pull-**
<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>
三，常用样式
1.标题（小标题）:附加小标题 <small></small>
<h2>标题 <small>小标题</small> </h2>
2.中心内容：突出中心内容，字体变大，.lead
<p class="lead">被突出的内容</p>
3.高亮文本元素：<mark>..</mark>
<p>在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地<mark>飞翔</mark>。</p>
4.被删除的文本：主要对于爬虫机器人来说意义不一样
<del>被删除的文本</del>
5.无用的文本：主要对于爬虫机器人来说意义不一样
<s>无用的文本</s>
6.插入文本
<ins>被插入的问题</ins>
7.文本强调：加粗
<p>在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地<strong>飞翔</strong>。</p>
区别<b></b>：在html5中，用于高亮单词或短语，不带有任何着重的意味。
8.文本强调：斜体
<em>在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。</em>
区别<i></i>：在html5中，主要用于发言、技术词汇等，不带有任何强调的意味。
9.对齐：通过文本对齐类，可以简单方便的将文字重新对齐
<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> <!--去掉空格-->
10.改变大小写
<p class="text-lowercase">Lowercased text.</p> <!--统一转换为小写--> <p class="text-uppercase">Uppercased text.</p> <!--统一转换为大写--> <p class="text-capitalize">Capitalized text.</p> <!--单词首字母大写-->
11.缩略语：缩略语带有title属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如果想看完整的内容，可把鼠标悬停在缩略语上(对使用辅助技术的用户也可见)，但需要保护title属性。
<abbr title="attribute">attr</abbr> <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
12.首字母缩略语：为缩略语添加.initialism类，可以让font-size变得稍微小些。
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
13.地址：让联系信息以最接近日常使用的格式呈现。在每行结尾添加<br>可以保留需要的样式
<address> <strong>Twitter, Inc.</strong><br> 1355 Market Street, Suite 900<br> San Francisco, CA 94103<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address>
14.引用
默认样式的引用：将任何HTML元素包裹在<blockquote>中即可表现为引用样式。对于直接引用，我们建议用<p>标签。
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>
多种引用样式：对于标准样式的<blockquote>，可以通过几个简单的变体技能改变风格和内容。
命名来源：添加<footer>用于标明引用来源。来源的名称可以包裹进<cite>标签中。
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> <!--通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果--> <blockquote class="blockquote-reverse"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote>
15.列表：
1.无样式列表：移除了默认的list-style样式和左侧边距的一组元素(只针对直接子元素)，这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。
<ul class="list-unstyled"> <li>...</li> </ul>
2.内联列表：通过设置display：inline-block;并添加小量的内填充，将所有元素放置与同一行。
<ul class="list-inline"> <li>...</li> </ul>
16.描述
默认描述：带有描述的短语列表
<dl> <dt>...</dt> <dd>...</dd> </dl>
水平排列的描述：.dl-horizontal可以让<dl>内的短语及其描述排在一行。开始是像<dl>的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行
补充：
自动截断：通过text-overflow属性，水平排列的描述列表将会截断左侧太长的短语。在较窄的视口(viewport)内，列表将变为默认堆叠排列的布局方式。
<dl class="dl-horizontal"> <dt>...</dt> <dd>...</dd> </dl>
17.内联代码：通过<code>标签包裹内联样式的代码片段。
<code><div></code>
18.用户输入：通过<kbd>标签标记用户通过键盘输入的内容。
<kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
19.代码块：多行代码可以使用<pre>标签。为了正确的展示代码，注意将尖括号做转义处理
补充：还可以使用.pre-scrollable类，其作用是设置max-height为350px，并在垂直方向展示滚动条。
<pre><p>Sample text here...</p></pre>
20.变量：通过<var>标签标记变量
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
21.程序输出：通过<samp标签来标记程序输出的内容>
<samp>....</samp>