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,这样才能保持整体风格的统一。