2018年12月7日
#Boostrap#
boostrap是一个功能比较完善的外部样式文件，我们可以把设置好的属性直接添加到我们的html文件中的标签上。
##栅格系统##
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局
<b>简介<b>
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
不懂就没写了
#排版#
标题：
b1-b6（标题内可以赋予其他标签。）
<b1>这里是一个一级标题<b1>
页面主体：
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
在引用bootstrap时这些属性会被直接引用。
中心内容：
lead类可以让段落突出显示。
删除：
del 删除文本时使用的标签。
无用文本：
s对于没用的文本使用 。 表面效果类似del。
插入文本：
ins额外插入的文本使用。
下划线：
u为文本添加下划线。
对齐：
左对齐：class="text-left"
中心对齐：class="text-center"
右对齐：class="text-right"
自动调整：class="text-justify"
无还行文本：class="text-nowrap"
大小写：
大写class="text-lowercase"
小写class="text-uppercase"
首字母大写class="text-capitalize"
缩略语：
abbr当鼠标悬停在缩写和缩写词上时就会显示完整内容。
首字母缩略语：
为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。
<b>引用<b>
将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。
对于直接引用，我们建议用 <p> 标签。
对于标准样式的 <blockquote>，可以通过几个简单的变体就能改变风格和内容。
添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。
##列表##
有序列表：ul
无序列表：ol
无样式列表：class="list-unstyle"
内联列表：
class="list-inline"通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。其他带有描述的短语列表。
水平排列的描述：
.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。
##代码##
内联代码：
通过 <code> 标签包裹内联样式的代码片段。
用户输入：
通过 <kbd> 标签标记用户通过键盘输入的内容。
代码块：
多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。
变量：通过 <var> 标签标记变量。
程序输出：
通过 <samp> 标签来标记程序输出的内容。
##表格##
基础表格：table
条纹装表格：
通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。
带边框的表格：
添加 .table-bordered 类为表格和其中的每个单元格增加边框。
鼠标悬停：
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
紧缩表格：
通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。