Bootstrap栅格布局使用有感

1.典型的栅格布局

 

<div class="container">
  <div class="row">
    <div class="col-sm-6">1</div>
    <div class="col-sm-6">2</div>      
  </div>
</div>

 这是典型的左右布局，列数的和为12，其中嵌套布局中子布局的列数和也是12。

 另外，要注意的是栅格布局有四种尺寸

.col-xs-

.col-sm-

.col-md-

.col-lg-

从左到右尺寸是从小到大，在小尺寸的地方用大尺寸会导致列装不下，从而挤到下一行去。

一般来说，整个页面的布局用sm,md或者lg，内部的布局用xs。

 

2.典型的输入框组

 

<div class="input-group">
  <input type="text" id="searchWord" name="searchWord" class="form-control" />
  <span class="input-group-btn">
    <button type="button" id="buttonSearch" class="btn btn-info">搜索</button>
  </span>
</div>

 

  

3.面板的使用

 

<div class="panel panel-info">
  <div class="panel-heading">
    <h3 class="panel-title">
      带有 title 的面板标题
    </h3>
  </div>
  <div class="panel-body">
    面板内容
  </div>
</div>

 

  

4.表单的使用

 

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="firstname" class="col-sm-2 control-label">名字</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="firstname" placeholder="请输入名字">
    </div>
  </div>
  <div class="form-group">
    <label for="lastname" class="col-sm-2 control-label">姓</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="lastname" placeholder="请输入姓">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox">请记住我
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">登录</button>
    </div>
  </div>
</form>

 

 注意：使用form-control的元素默认宽度为100%，高度为34px，而如果是静态元素，比如文字，则需要在外层的div设置类form-control-static，使静态元素高度也变成34px，这样才能保持整体风格的统一。