Bootstrap框架个人总结
bootstrap简介
bootstrap是一个支持响应式设计的前端框架。
响应式设计指的是智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。
简单的说，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
bootstrap基础知识预热
HTML 5 文档类型（Doctype）
Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，我们需要使用 HTML5 文档类型（Doctype）。因此，开头需要包含下面的代码段：
<html>
....
html>容器（Container）
...
bootstrap用Container class包裹页面内容，下面是bootstrap.css 文件中的 .container class
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}可见，内边距左右各有15px,外边距是自适应的。
如果要做流式布局，将上述class = "container"改为class = "container-fluid"
网格(栅格)布局
Bootstrap的网格(栅格)布局在没有响应式特性的默认情况下, 采用12 列方式布局，即将每行分为12列。
布局方法：创建一个.row容器，并在容器中加入合适数量的 .span* 列即可。
如果需要流式布局，将class = "row"改为class = "row-fluid"
例如：
- 两列式布局
"row">
"span4">...
"span8">...
上面的代码展示了 .span4 和 .span8 两列，两列的和总共是12个栅格。
- 三列式布局
"row">
"span4">...
"span4">...
"span4">...
上面的代码展示了 三列.span4 ，三列的和总共是12个栅格。
可根据需求分配需要的列数，超过12栅格会自动开辟新的一行。
media queries
min-width和max-width
Bootstrap支持几个少数的Media queries, 可以让你的项目更灵活的去适应不同设备和屏幕分辨率。
min-width:最小宽度，即设备尺寸大于这个值时应用样式
max-width:最大宽度，即设备尺寸小于这个值时应用样式
也可结合两者使用：
@media (min-width:300px) and (max-width: 580px) {body{background-color: red;} }上述代码表示屏幕宽度在300px和580px时，背景颜色为红色。
在不同设备中隐藏或显示
这个功能还需要linkbootstrap-responsive.css
有以下6种：
.visible-phone：只在手机端显示
.visible-tablet：只在平板显示
.visible-desktop：只在电脑显示
.hidden-phone：只在手机端隐藏
.hidden-tablet：只在平板隐藏
.hidden-desktop：只在电脑隐藏
常用的文字排版标签
... ：加粗文字
...：使用斜体
"initialism" title="">...标签表示使用了简称,title里的值是文字的全称
.initialism类使标签里的文字大写或者使大写的字母稍微缩小。
........
标签标识使用引用的文字
...:表示引用的来源
class = "pull-right":表示使文字靠右显示
列表
描述列表如下：
<dl>
<dt>Drupaldt>
<dd>强大而灵活的CMFdd>
<dt>Joomladt>
<dd>简单易用的CMSdd>
<dt>Wordpressdt>
<dd>优雅的内容发布应用dd>
dl>描述的词汇用标注，描述的具体内容用标注。
如果在.dl-horizontal，可以更改样式