Bootstrap CSS

概览

HTML5 Doctype

Bootstrap使用了HTML5元素和CSS属性，所以要在开头申明：

<!DOCTYPE html>
<html>
....
</html>

Staticfile CDN 推荐

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

移动设备友好

为了对移动设备友好，应在head中加入：

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

width=device-width 确保能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
user-scalable=no 禁用其缩放（zooming）功能。
通常maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，让网站看上去更像原生应用的感觉。

响应式图像

让图像对响应式布局更友好：

<img src="..." class="img-responsive" alt="响应式图像">

class中包含：

.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}

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

全局显示、排版和链接

Bootstrap 3 用 body {margin: 0;}来移除 body 的边距
使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式。
通过属性 @link-color 设置全局链接的颜色。

容器

<div class="container">
  ...
</div>

用于包裹页面上的内容，这个class里：

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

通过上面的代码，把 container 的左右外边距（margin-right、margin-left）交由浏览器决定。

网格系统

在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

网格系统的工作原理

行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
使用行来创建列的水平组。
内容应该放置在列内，且唯有列可以是行的直接子元素。
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

媒体查询

允许基于视口大小移动、显示并隐藏内容。只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。

/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

基本的网格结构

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

<div class="container">...</div> 元素被添加，确保居中和最大宽度。
一旦添加了容器，接下来需要考虑以行为单位。添加 <div class="row">...</div>，并在行内添加列 <div class="col-md-6"></div>。
网格中的每一行是由 12 个单元组成的，可以使用这些单元定义列的尺寸。6+6或者3+9等均可。

偏移列

.col-xs-* 类不支持偏移
为了在大屏幕显示器上使用偏移，使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

<div class="col-md-6 col-md-offset-3" ...></div>

嵌套列

为了在内容中嵌套默认的网格，添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12。

列排序

使用 .col-md-push-* 和 .col-md-pull-* 类来互换两列的顺序
排序前：

<div class="col-md-4" ...></div>
<div class="col-md-8" ...></div>

排序后：

<div class="col-md-4 col-md-push-8"...></div>
<div class="col-md-8 col-md-pull-4" ...></div>

排版

标题

在元素两旁添加 <small>，或者添加 .small class，得到一个字号更小的颜色更浅的文本：

<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>

给段落添加强调文本，可以添加 class="lead"得到更大更粗、行高更高的文本：

<h2>引导主体副本</h2>
<p class="lead">这是一个演示引导主体副本用法的实例。</p>

HTML 的默认强调标签 :

<small>设置文本为父文本大小的 85%
<strong>设置文本为更粗的文本
<em>设置文本为斜体

Bootstrap 提供了一些用于强调文本的类：

<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>   // 提示，使用浅灰色（#999） 
<p class="text-primary">本行内容带有一个 primary class</p>  // 主要，使用蓝色（#428bca）
<p class="text-success">本行内容带有一个 success class</p>  // 成功，使用浅绿色(#3c763d)
<p class="text-info">本行内容带有一个 info class</p>  // 通知信息，使用浅蓝色（#31708f）
<p class="text-warning">本行内容带有一个 warning class</p>  //警告，使用黄色（#8a6d3b）
<p class="text-danger">本行内容带有一个 danger class</p>  //  危险，使用褐色（#a94442）

缩写

Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本，.initialism 使得到一个更小字体的文本：

<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>

地址

使用 <address> 标签，可以在网页上显示联系信息，使用<br>换行。

列表

<h4>未定义样式列表</h4>
<ul class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<h4>内联列表</h4>  
<ul class="list-inline">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<h4>定义列表</h4>
<dl>
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>
<h4>水平的定义列表</h4>
<dl class="dl-horizontal">
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>

代码

在代码内开始结束标签应用 < 和 >

<code>内联显示代码
<pre> 独立作为块元素或多行代码
<var> 表示变量
<kbd> 表示按键输入
<pre class="pre-scrollable"> 多行代码带有滚动条
<samp> 使用 samp 元素包含电脑输出的内容

表格

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 让表格更加紧凑

还可以联合使用所有表格类：

<table class="table table-striped table-bordered table-hover table-condensed"></table>

<tr>, <th> 和 <td> 类

.active将悬停的颜色应用在行或者单元格上
.success表示成功的操作
.info 表示信息变化的操作
.warning 表示一个警告的操作
.danger表示一个危险的操作

响应式表格

把任意的 .table 包在 .table-responsive class内：

<div class="table-responsive">
  <table class="table">

表单

Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。

垂直表单（默认）
内联表单
水平表单

垂直或基本表单

创建步骤：

向父 <form> 元素添加 role="form"。
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。

内联表单

向 <form> 标签添加 class .form-inline，使成为内联表单：所有元素是内联的向左对齐的，标签是并排的。

水平表单

水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。
创建步骤：

向父 <form> 元素添加 class .form-horizontal。
把标签和控件放在一个带有 class .form-group 的 <div> 中。
向标签添加 class .control-label。

支持的表单控件

输入input
文本框textarea

<textarea class="form-control" rows="3"></textarea>

复选框checkbox和单选框radio
对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。
选择框select

使用 <select> 展示列表选项。
使用 multiple="multiple" 允许用户选择多个选项。

静态控件
如在表单标签后放置纯文本：

<p class="form-control-static">email@example.com</p>

表单控件大小

分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。

按钮

.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 | 禁用按钮

按钮组

在 div 中直接使用 .btn-group 可以创建按钮组。
使用 .btn-group-lg|sm|xs 来控制按钮组的大小。
如果要设置垂直方向的按钮可以通过 .btn-group-vertical 类来设置
如果是 <button> 元素, 需要在外层使用 .btn-group 类来包裹。

内嵌按钮组

<div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Sony <span class="caret"></span></button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Tablet</a></li>
        <li><a href="#">Smartphone</a></li>
      </ul>
    </div>

分割按钮

<div class="btn-group">
    <button type="button" class="btn btn-primary">Sony</button>
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Tablet</a></li>
      <li><a href="#">Smartphone</a></li>
    </ul>
  </div>

图片

.img-rounded 添加 border-radius:6px 来获得图片圆角。
.img-circle 添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail 添加一些内边距（padding）和一个灰色的边框。
.img-responsive 图片响应式 (将很好地扩展到父元素)

辅助类

文本

.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger

背景

.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger

其他

.show 强制元素显示
.hidden 强制元素隐藏
.text-hide 将页面元素所包含的文本内容替换为背景图
.close 显示关闭按钮
.caret 显示下拉式功能

<p>插入符实例
  <span class="caret"></span>
</p>

Bootstrap CSS学习笔记