bootstrap

前端框架；

只需要引入相应文件就好；

根据需要加入不同的类名

http://www.bootcss.com/下载bootstrap的地址-----选择用于生产环境的 Bootstrap

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

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

容器（Container）

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

申请响应的媒体查询，在不同的媒体查询阈值范围内都为 container 设置了max-width，用以匹配网格系统。

@media (min- 768px) and(max-992px) {
   .container {
       750px;
}

Bootstrap 网格系统（Grid System）的工作原理

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：

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

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

通过把任意的 .table 包在 .table-responsive class 内，可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，将看不到任何的差别。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Bootstrap 实例 - 响应式表格</title>
  <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
  <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="table-responsive">
  <table class="table table-bordered table-striped table-hover table-condensed">
    <caption>响应式表格布局</caption>
    <thead>
      <tr>
        <th>产品</th>
        <th>付款日期</th>
        <th>状态</th>
      </tr>
    </thead>
    <tbody>
      <tr class="success">
        <td>产品1</td>
        <td>23/11/2013</td>
        <td>待发货</td>
      </tr>
      <tr class='danger'>
        <td>产品2</td>
        <td>10/11/2013</td>
        <td>发货中</td>
      </tr>
      <tr>
        <td>产品3</td>
        <td>20/10/2013</td>
        <td>待确认</td>
      </tr>
      <tr class='warning'>
        <td>产品4</td>
        <td>20/10/2013</td>
        <td>已退货</td>
      </tr>
    </tbody>
</table>
</div>    

</body>
</html>