案例：Bootstrap案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>Bootstrap 实例</title>
6
    <!-- 包含头部信息用于适应不同设备 -->
7
    <meta name="viewport" content="width=device-width, initial-scale=1">
8
    <!-- 包含 bootstrap 样式表 -->
9
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
10
  </head>
11
​
12
  <body>
13
    <div class="container">
14
      <h2>表格</h2>
15
      <p>创建响应式表格 (将在小于768px的小型设备下水平滚动)。另外：添加交替单元格的背景色：</p>
16
      <div class="table-responsive">
17
       <table class="table table-striped table-bordered">
18
         <thead>
19
           <tr>
20
             <th>#</th>
21
             <th>Name</th>
22
             <th>Street</th>
23
           </tr>
24
         </thead>
25
         <tbody>
26
           <tr>
27
             <td>1</td>
28
             <td>Anna Awesome</td>
29
             <td>Broome Street</td>
30
           </tr>
31
           <tr>
32
             <td>2</td>
33
             <td>Debbie Dallas</td>
34
             <td>Houston Street</td>
35
           </tr>
36
           <tr>
37
             <td>3</td>
38
             <td>John Doe</td>
39
             <td>Madison Street</td>
40
           </tr>
41
         </tbody>
42
       </table>
43
      </div>
44
​
45
      <h2>图像</h2>
46
      <p>创建相应式图片(将扩展到父元素)。 另外：图片以椭圆型展示：</p>
47
      <img src="/img/china_pavilion.jpg" class="img-responsive img-circle" alt="Cinque Terre" width="304" height="236">
48