1、数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。如:
<div class="container"> <div class="row"></div> </div>
2、在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12。如:
<div class="container"> <div class="row"> <div class="col-md-4"></div> <div class="col-md-8"></div>
3、具体内容应当放置在列容器(column)之内,而且只有列(column)才可以作为行容器(.row)的直接子元素
4 列偏移 .col-md-offset-*可以将列偏移到右侧
5 列嵌套
6 定制你的bootstrap
7 bootstrap表格
table caption 标题 thead tbody
8 有序列表和无序列表
ol ul list-style-type属性 none:不使用项目符号。
disc:实心圆。
circle:空心圆。
square:实心方块。
demical:阿拉伯数字。
lower-alpha:小写英文字母。
upper-alpha:大写英文字母。
lower-roman:小写罗马数字。
upper-roman:大写罗马数字。
去点列表 ,通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格
.list-unstyled {
padding-left: 0;
list-style: none;
}
项目列表
<ol class="list-unstyled">
<li>不带项目编号</li>
<li>不带项目编号</li>
</ol>
9 from表单
from-inline form-group form-control
简单登录form表单
<form class="form-inline">
<div class="form-group">
<label >用户名</label>
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="输入用户名"/>
</div>
<div class="form-group">
<label>密码</label>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="输入密码"/>
</div>
<div class="form-group">
<label><input type="checkbox"/>记住密码</label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">登录</button>
</div>
</form>
简单form表单登录
<form>
<fieldset>
<legend>用户登录</legend>
<div class="form-group">
<label>登录账户</label>
<input type="email" class="form-control" placeholder="请输入你
的用户名或Email">
</div>
<div class="form-group">
<label>密码</label>
<input type="text" class="form-control" placeholder="请输入你的密码">
</div>
<div class="checkbox">
<label><input type="checkbox">记住密码</label>
</div>
<button type="submit" class="btn btn-default">登录</button>
</fieldset>
</form>