网格系统
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
< !-- 另一行 -->
<div class="row">...</div>
</div>
说明
- 使用 .col-md-offset-* 类来进行缩进(水平居中) 这些类会把一个列的左外边距(margin)增加 ***** 列
<div class="col-md-6 col-md-offset-3"></div>
- .col-xs-* 类不支持偏移,但是它们可以简单地通过使用一个空的单元格来实现该效果
字体图标
<span class="glyphicon glyphicon-search"></span>
下拉菜单和分割线
<div class="dropdown">
<button class="btn" data-toggle="dropdown">第三个</button>
<ul class="dropdown-menu">
<li class="dropdown-header">下拉菜单标题</li>
<li>1djgs</li>
<li>2djgs</li>
<li>3djgs</li>
<li class="divider"></li>
<li>4djgs</li>
<li>5djgs</li>
</ul>
</div>
说明
- 在class.dropdown内使用class.dropdown-menu类生成下拉选项,在点击的按钮上添加属性data-toggle="dropdown"联动
+下拉选项添加class.dropdown来添加下拉标题,分割线使用class.divider来生成。
按钮和按钮组
<button class="btn btn-success btn-lg btn-block">父级长度的按钮</button>
<button class="btn btn-warning btn-lg">大按钮</button>
<button class="btn btn-link btn-sm">链接按钮</button>
<div class="btn-group">
<button class="btn btn-danger">按钮1</button>
<button class="btn btn-primary">按钮2</button>
<button class="btn btn-info">按钮3</button>
</div>
<div class="btn-group-vertical btn-group-lg">
<button class="btn btn-danger">按钮4</button>
<button class="btn btn-primary">按钮5</button>
<button class="btn btn-info">按钮6</button>
</div>
<div class="btn-group">
<button class="btn btn-primary">按钮7</button>
<button class="btn btn-primary">按钮8</button>
<div class="btn-group">
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">下拉 按钮</button>
<ul class="dropdown-menu">
<li>下拉1</li>
<button class="btn btn-info btn-block">
按钮2
</button>
</ul>
</div>
</div>
说明
- 按钮都需要加class.btn类
- 按钮组需要加class.btn-group类
- 按钮常用样式可以加 .btn-primary || .btn-info || .btn-danger || .btn-warning || .btn-success
- 按钮大小有 .btn-lg || .btn-sm || .btn-xs
- 嵌套按钮组(按钮组下拉菜单)
- 在 .btn-group内又加一个 .btn-group 类
- 在需要下拉的按钮上添加按钮样式以及 .dropdown-toggle类并且加属性 data-toggle=“dropdown”
- 下拉菜单添加 .dropdown-menu 类
表单
<form action="">
<div class="form-group">
<label for="name">用户名</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label for="name" class="control-label">用户</label>
<input type="text" class="form-control">
</div>
</form>
<form action="" class="form-horizontal">
<div class="form-group has-error">
<label for="name" class="control-label col-md-2">用户</label>
<div class="col-md-6">
<input type="" class="form-control">
</div>
<label for="name" class="sr-only control-label col-md-2">错误</label>
</div>
</form>
说明
- 输入框必须包含form-control 类
- 默认上下排列,添加 .form-horizontal 类水平排列
- 可以通过添加 .has-error || has-success 类改变输入框颜色
- 输入框组内的label 都有control-label 类,可以通过加col-sm- * 改变表单大小,为label 添加sr-only 类可以隐藏标签
输入框组
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<form>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control">
</div>
<br>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
</form>
</div>
<div class="col-md-2"></div>
</div>
</div>
说明
- 输入框组基于表单
- 只要在 .input-group 输入框组内添加 span.input-group-daaon ,便可以在span标签内加入其他组件(按钮组 下拉菜单等),做成一些有趣的东西
勉强放张图