bootstrap的简单实用

原作者

bootstrap的具体使用方法

bootstrap其实是把网页等分为了12分

栅格参数

bootstrap把根据屏幕大小把屏幕分为了4个层级
超小屏幕
小屏幕
中等屏幕
大屏幕
栅格参数，我们看下下面这幅图：

每行的数字全部相加，最终都等于刚刚我让大家记住的12

我现在需要在页面上左右分别显示两个面板，面板上面显示相应的表格数据，且左侧列表占总宽度的3分之2，右侧的面板仅占3分之1

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

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

左侧占用3分之2，12的3分之2为8，所以上面一个div设置为8，剩下的一个设为4，好了，第一步完成了。
2. 8和4里面建立两个面板，在bootstrap官网找到面板，复制代码如下：

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

左侧的panel占据了页面的3分之2，右侧的仅为3分之1，第二步也完成了。
3. 创建表格，在bootstrap官网找到表格的代码：官网地址

<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> 

整个过程我都在粘贴复制，完全一个代码都没有写，这样做的好处是，我们开发起来很简单，而且兼容ie8以上、Firefox、Google等主流浏览器，基本方法就是这样