1、按钮
- 按钮组
- 示例
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
-
效果图
按钮工具栏
释义：把一组
<div class="btn-group">放进一个<div class="btn-toolbar">中就可以做成更复杂的组件示例
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">...</div>
<div class="btn-group">...</div>
<div class="btn-group">...</div>
</div>
-
效果图
<a>元素释义：只须将一系列
.btn元素包裹到.btn-group.btn-group-justified中就可以达到<a>的效果
<div class="btn-group btn-group-justified"> ...</div>
-
<button>元素 -
释义：为了将
<button>元素用于两端对齐的按钮组中，必须将每个按钮包裹进一个按钮组中 - 示例
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
-
效果图
分裂式按钮下拉菜单
释义：分裂式按钮下拉菜单需要改变一些标记，即多一个分开的按钮
示例
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li> //分割线
<li><a href="#">Separated link</a></li>
</ul>
</div>
-
效果图
向上弹出式菜单
释义：给父元素添加
.dropup类就能使触发的下拉菜单朝上方打开示例
<div class="btn-group dropup"> ....</div>
-
效果图
2、输入框
- 输入框组
- 示例
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
-
效果图
官方网站：
Bootstrap组件
