如何使用 Bootstrap

下载成功后可以得到一个.zip的文件，解压后我们可以得到一个包含css、fonts和js的文件夹，ok，准备工作我们就做好了。

现在要怎么用呢，一头雾水吧，我们新建一个文件夹，命名为test，将刚刚三个文件夹复制到test文件夹中，现在用sublime打开刚刚的文件夹，点击file-open folder，选择test文件夹点击确定即可，如下：

在test上右键选择new file，然后ctrl+s保存文件名为index.html，这时候回到bootstrap的官网，导航栏选择“起步”，向下拖动或在右侧选择“基本模板”，将下列代码进行复制，粘贴到index.html中，如下：

我们可以发现，每行的数字全部相加，最终都等于刚刚我让大家记住的12，可能大家还是不清楚，我们下面用一个例子来会说明：

如果我现在需要在页面上左右分别显示两个面板，面板上面显示相应的表格数据，且左侧列表占总宽度的3分之2，右侧的面板仅占3分之1，OK，下面我们来看看怎么做。

我们刚刚已经创建好了一个基本的页面布局，页面上显示了“你好，世界！”，现在我们在这个框架上面接着写：

在body中，我们删除刚刚的“你好，世界！”，新建两个div，如下：

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

<div class="panel panel-default">  
  <div class="panel-body">  
    Basic panel example  
  </div>  
</div>  

<pre name="code" class="html">    <div class="col-md-8">  
      <div class="panel panel-default">  
        <div class="panel-body">  
          Basic panel example  
        </div>  
      </div>  
    </div>  
    <div class="col-md-4">  
      <div class="panel panel-default">  
        <div class="panel-body">  
          Basic panel example  
        </div>  
      </div>  
    </div>  

<table class="table">  
      <caption>Optional table caption.</caption>  
      <thead>  
        <tr>  
          <th>#</th>  
          <th>First Name</th>  
          <th>Last Name</th>  
          <th>Username</th>  
        </tr>  
      </thead>  
      <tbody>  
        <tr>  
          <th scope="row">1</th>  
          <td>Mark</td>  
          <td>Otto</td>  
          <td>@mdo</td>  
        </tr>  
        <tr>  
          <th scope="row">2</th>  
          <td>Jacob</td>  
          <td>Thornton</td>  
          <td>@fat</td>  
        </tr>  
        <tr>  
          <th scope="row">3</th>  
          <td>Larry</td>  
          <td>the Bird</td>  
          <td>@twitter</td>  
        </tr>  
      </tbody>  
    </table>  

<div class="col-md-8">  
      <div class="panel panel-default">  
        <div class="panel-body">  
          <table class="table">  
            <caption>Optional table caption.</caption>  
            <thead>  
              <tr>  
                <th>#</th>  
                <th>First Name</th>  
                <th>Last Name</th>  
                <th>Username</th>  
              </tr>  
            </thead>  
            <tbody>  
              <tr>  
                <th scope="row">1</th>  
                <td>Mark</td>  
                <td>Otto</td>  
                <td>@mdo</td>  
              </tr>  
              <tr>  
                <th scope="row">2</th>  
                <td>Jacob</td>  
                <td>Thornton</td>  
                <td>@fat</td>  
              </tr>  
              <tr>  
                <th scope="row">3</th>  
                <td>Larry</td>  
                <td>the Bird</td>  
                <td>@twitter</td>  
              </tr>  
            </tbody>  
          </table>  
        </div>  
      </div>  
    </div>  
    <div class="col-md-4">  
      <div class="panel panel-default">  
        <div class="panel-body">  
          <table class="table">  
            <caption>Optional table caption.</caption>  
            <thead>  
              <tr>  
                <th>#</th>  
                <th>First Name</th>  
                <th>Last Name</th>  
                <th>Username</th>  
              </tr>  
            </thead>  
            <tbody>  
              <tr>  
                <th scope="row">1</th>  
                <td>Mark</td>  
                <td>Otto</td>  
                <td>@mdo</td>  
              </tr>  
              <tr>  
                <th scope="row">2</th>  
                <td>Jacob</td>  
                <td>Thornton</td>  
                <td>@fat</td>  
              </tr>  
              <tr>  
                <th scope="row">3</th>  
                <td>Larry</td>  
                <td>the Bird</td>  
                <td>@twitter</td>  
              </tr>  
            </tbody>  
          </table>  
        </div>  
      </div>  
    </div>