参考学习地址

Bootstrap中文网 www.bootcss.com

响应式设计 v2.bootcss.com/scaffolding…

慕课网学习视频 www.imooc.com/learn/141

优势

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式
浏览器支持：所有的主流浏览器都支持 Bootstrap
响应式设计：Bootstrap 的响应式 CSS能够自适应于台式机、平板电脑和手机.更多有关响应式设计的内容详见

包含的内容

基本结构

Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构

CSS

Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统

组件

Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等

JavaScript 插件

Bootstrap 包含了十几个自定义的 jQuery插件。您可以直接包含所有的插件，也可以逐个包含这些插件

定制

您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本

文件结构

Bootstrap CSS概述

移动设备优先是 Bootstrap 3 的最显著的变化
为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1">

width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放

在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能,这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉
通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用(这种方式我们并不推荐所有网站使用)

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

图片

1. 响应式图像

在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局

其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放

如果需要让使用了 .img-responsive 类的图片水平居中，一般是使用 .center-block 类，不要用 .text-center

<img src="..." class="img-responsive" alt="Responsive image">

SVG 图像和 IE 8-10 在 Internet Explorer 8-10 中，设置为 .img-responsive 的 SVG 图像显示出的尺寸不匀称为了解决这个问题，在出问题的地方添加 width: 100% \9; 即可。Bootstrap 并没有自动为所有图像元素设置这一属性，因为这会导致其他图像格式出现错乱

2. 图片形状

通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状

跨浏览器兼容性请时刻牢记：Internet Explorer 8 不支持 CSS3 中的圆角属性

<img src="..." alt="..." class="img-rounded"> 添加 border-radius:6px 来获得图片圆角
<img src="..." alt="..." class="img-circle"> 添加 border-radius:50% 来让整个图片变成圆形
<img src="..." alt="..." class="img-thumbnail"> 添加 border-radius:6px 来获得图片圆角

避免跨浏览器的不一致

为了增强跨浏览器表现的一致性，我们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。

Bootstrap 使用 Normalize 来建立跨浏览器的一致性

Normalize.css 是一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性

浏览器支持

Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器。

容器container

Bootstrap 3 的 container class 用于包裹页面上的内容.默认情况下容器是不可嵌套的

Bootstrap 网格系统：(Grid System)

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局

栅格系统用于通过一系列的行（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。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备。

媒体查询

媒体查询是非常别致的"有条件的 CSS 规则"
它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式

在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。

Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的

实例：从堆叠到水平排列

使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内

<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-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

实例：流式布局容器

将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局(流式布局)

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

实例：移动设备和桌面屏幕

需要分别针对超小屏幕和中等屏幕设备定义相关类

实例：手机、平板、桌面

实例：多余的列（column）将另起一行排列

如果在一个 .row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列

响应式列重置

在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix 和响应式工具类

响应式工具类

为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类

有针对性的使用这类工具类，从而避免为同一个网站创建完全不同的版本。相反，通过使用这些工具类可以在不同设备上提供不同的展现形式。

可用的类

通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容

从 v3.2.0 版本起，形如 .visible-- 的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 display 属性，列表如下

因此，以超小屏幕（xs）为例，可用的 .visible-- 类是：.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block

.visible-xs、.visible-sm、.visible-md 和 .visible-lg 类也同时存在。但是从 v3.2.0 版本开始不再建议使用。除了

相关的元素的特殊情况外，它们与 .visible-*-block 大体相同

打印类

和常规的响应式类一样，使用下面的类可以针对打印机隐藏或显示某些内容

.visible-print 类也是存在的，但是从 v3.2.0 版本开始不建议使用。它与 .visible-print-block 类大致相同，除了

测试用例

调整你的浏览器大小，或者用其他设备打开页面，都可以测试这些响应式工具类

<div class="row responsive-utilities-test visible-on">
    <div class="col-xs-6">
      <span class="hidden-xs">超小屏幕</span>
      <span class="visible-xs-block">✔ 在超小屏幕上可见</span>
    </div>
    <div class="col-xs-6">
      <span class="hidden-sm">小屏幕</span>
      <span class="visible-sm-block">✔ 在小屏幕上可见</span>
    </div>
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6">
      <span class="hidden-md">中等屏幕</span>
      <span class="visible-md-block">✔ 在中等屏幕上可见</span>
    </div>
    <div class="col-xs-6">
      <span class="hidden-lg">大屏幕</span>
      <span class="visible-lg-block">✔ 在大屏幕上可见</span>
    </div>
  </div>
  
  <div class="row responsive-utilities-test visible-on">
    <div class="col-xs-6">
      <span class="hidden-xs hidden-sm">超小屏幕和小屏幕</span>
      <span class="visible-xs-block visible-sm-block">✔ 在超小屏幕和小屏幕上可见</span>
    </div>
    <div class="col-xs-6">
      <span class="hidden-md hidden-lg">中等屏幕和大屏幕</span>
      <span class="visible-md-block visible-lg-block">✔ 在中等屏幕和大屏幕上可见</span>
    </div>
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6">
      <span class="hidden-xs hidden-md">超小屏幕和中等屏幕</span>
      <span class="visible-xs-block visible-md-block">✔ 在超小屏幕和中等屏幕上可见</span>
    </div>
    <div class="col-xs-6">
      <span class="hidden-sm hidden-lg">小屏幕和大屏幕</span>
      <span class="visible-sm-block visible-lg-block">✔ 在小屏幕和大屏幕上可见</span>
    </div>
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6">
      <span class="hidden-xs hidden-lg">超小屏幕和大屏幕</span>
      <span class="visible-xs-block visible-lg-block">✔ 在超小屏幕和大屏幕上可见</span>
    </div>
    <div class="col-xs-6">
      <span class="hidden-sm hidden-md">小屏幕和中等屏幕</span>
      <span class="visible-sm-block visible-md-block">✔ 在小屏幕和中等屏幕上可见</span>
    </div>
  </div>

<div class="row responsive-utilities-test hidden-on">
    <div class="col-xs-6 col-sm-3">
      <span class="hidden-xs">超小屏幕</span>
      <span class="visible-xs-block">✔ 在超小屏幕上隐藏</span>
    </div>
    <div class="col-xs-6 col-sm-3">
      <span class="hidden-sm">小屏幕</span>
      <span class="visible-sm-block">✔ 在小屏幕上隐藏</span>
    </div>
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6 col-sm-3">
      <span class="hidden-md">中等屏幕</span>
      <span class="visible-md-block">✔ 在中等屏幕上隐藏</span>
    </div>
    <div class="col-xs-6 col-sm-3">
      <span class="hidden-lg">大屏幕</span>
      <span class="visible-lg-block">✔ 在大屏幕上隐藏</span>
    </div>
  </div>
  
  
  
  <div class="row responsive-utilities-test hidden-on">
    <div class="col-xs-6">
      <span class="hidden-xs hidden-sm">超小屏幕与小屏幕</span>
      <span class="visible-xs-block visible-sm-block">✔ 在超小屏幕和小屏幕上隐藏</span>
    </div>
    <div class="col-xs-6">
      <span class="hidden-md hidden-lg">中等屏幕和大屏幕</span>
      <span class="visible-md-block visible-lg-block">✔ 在 medium 和 large 上隐藏</span>
    </div>
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6">
      <span class="hidden-xs hidden-md">超小屏幕和中等屏幕</span>
      <span class="visible-xs-block visible-md-block">✔ 在超小屏幕和中等屏幕上隐藏</span>
    </div>
    <div class="col-xs-6">
      <span class="hidden-sm hidden-lg">小屏幕和大屏幕</span>
      <span class="visible-sm-block visible-lg-block">✔ 在小屏幕和大屏幕上隐藏</span>
    </div>
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6">
      <span class="hidden-xs hidden-lg">超小屏幕和大屏幕</span>
      <span class="visible-xs-block visible-lg-block">✔ 在超小屏幕和大屏幕上隐藏</span>
    </div>
    <div class="col-xs-6">
      <span class="hidden-sm hidden-md">小屏幕和中等屏幕</span>
      <span class="visible-sm-block visible-md-block">✔ 在小屏幕和中等屏幕上隐藏</span>
    </div>
  </div>

排版

Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈

1. 标题

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式

在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题

2. 页面主题

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为1.428。这些属性直接赋予<body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）

3. 中心内容

通过添加 .lead 类可以让段落突出显示

4. 内联文本元素

Marked text <mark></mark>

被删除的文本 <del>

无用文本<s>

插入文本额外插入的文本使用 <ins> 标签

带下划线的文本<u>

小号文本：对于不需要强调的inline或block类型的文本，使用 <small> 标签包裹，其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的 <small> 元素被设置不同的 font-size 。

你还可以为行内元素赋予 .small 类以代替任何 <small> 元素

着重 <strong> 通过增加 font-weight 值强调一段文本

斜体：用斜体强调一段文本<em>

对齐：通过文本对齐类，可以简单方便的将文字重新对齐

改变大小写

缩略语
当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式
缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性

地址
让联系信息以最接近日常使用的格式呈现。在每行结尾添加<br> 可以保留需要的样式

引用
在你的文档中引用其他来源的内容

列表

1. 无序列表

<ul>
  <li>...</li>
</ul>

2. 有序列表

<ol>
  <li>...</li>
</ol>

3. 无样式列表

移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式

<ul class="list-unstyled">
  <li>...</li>
</ul>

4. 内联列表

通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行

<ul class="list-inline">
  <li>...</li>
</ul>

5. 描述

带有描述的短语列表

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

水平排列的描述
.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

表格

任意表格

为任意<table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线

<table class="table">
  ...
</table>

条纹状表格

通过 .table-striped 类可以给<tbody> 之内的每一行增加斑马条纹样式

跨浏览器兼容性：条纹状表格是依赖 :nth-child CSS 选择器实现的，而这一功能不被 Internet Explorer 8 支持

<table class="table table-striped">
  ...
</table>

带边框的表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框

<table class="table table-bordered">
  ...
</table>

鼠标悬停

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应

<table class="table table-hover">
  ...
</table>

紧缩表格

通过添加 .table-condensed类可以让表格更加紧凑，单元格中的内补（padding）均会减半

<table class="table table-condensed">
  ...
</table>

状态类

通过这些状态类可以为行或单元格设置颜色

响应式表格 .table-responsive

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失

垂直方向的内容截断
响应式表格使用了 overflow-y: hidden 属性，这样就能将超出表格底部和顶部的内容截断。特别是，也可以截断下拉菜单和其他第三方组件

Firefox 和 fieldset 元素
Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式，导致响应式表格出现问题。可以使用下面提供的针对 Firefox 的 hack 代码解决，但是以下代码并未集成在 Bootstrap 中

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

Bootstrap基础-全局CSS样式