-
将所在父级的宽度等分为12等分
-
四种屏幕尺寸 col-xs- | col-sm- | col-md- | col-lg-
-
偏移 col-xs-offset- | ... | col-lg-offset-
<div class="row">
<div class="ele1 col-lg-4 col-xs-6"></div>
<div class="ele2 col-lg-4 col-lg-offset-4 col-xs-6"></div>
</div>
<!-- 超大屏幕下: ele1占4等分 ele2与ele1间隔4等分,自己也占4等分 -->
<!-- 在超小,小,中等屏幕下, ele1与ele2均占6等分 -->
二.移动端屏幕适配
<meta name="viewport" content="width=device-width, user-scaleable=no" />
<!-- 适配移动端设备的每一个页面均需要设置 -->
三.组件
-
表格
<!--striped条纹 bordered边框 hover悬浮-->
<table class="table table-striped table-bordered table-hover">
<tr style="text-align: center">
<th>标题</th>
<th>标题</th>
<th>标题</th>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<!-- 颜色强调,整行tr 或 单元格 th|td -->
<tr class="success">
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td class="danger">单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td class="info" colspan="2" style="text-align: center">单元格</td>
<!--<td>单元格</td>-->
</tr>
</table>
-
表单
<form action="">
<!-- 分行: form-group -->
<div class="form-group">
<!--label的for是关联匹配的input的id, 当label点击时会让input获取焦点-->
<label for="usr">用户名:</label>
<!-- form-control: bs控制 -->
<input class="form-control" type="text" name="usr" id="usr">
</div>
<div class="form-group">
<label for="pwd">密码:</label>
<input class="form-control" type="password" name="pwd" id="pwd">
</div>
<div class="form-group checkbox">
<!--复选框-->
<label>
<input type="checkbox" value="reading" name="sk">请阅读
</label>
</div>
</form>
<!-- 内联表单 -->
<form class="form-inline"></form>
<!-- label与input同行显示 -->
<form action="" class="form-horizontal">
<div class="form-group has-warning">
<label for="usr2" class="col-sm-2 control-label">用户名:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="usr2" id="usr2" placeholder="请输入用户名">
</div>
</div>
</form>
-
按钮 | 字体图标 ...