CSS组件

1、字体

bootstrap自带的Glyphicons 字体图标，还有是font awesome

2、下拉菜单

.dropdown 最大作用给了父级

position: relative;

菜单向下弹出

.dropup 菜单向上弹出

.dropdown-toggle data-target=”dropdown” .caret 按钮及下拉图标

.dropdown-menu 下拉菜单

.dropdown-header 标题

.divider 分割线

.disabled 禁用项

为

.dropdown-menu

添加

.dropdown-menu-right

类可以让菜单右对齐。

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" >
<li class="dropdown-header">Dropdown header</li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="disabled"><a href="#">Separated link</a></li>
</ul>
</div>

默认下：下拉菜单是隐藏的，如果给父元素加上一个

.open

的类，就会显示。

3、按钮组 btn-group

3.1 、基本实例

<div class="btn-group" role="group" aria-label="...">
<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>

3.2、按钮工具栏

把一组

<div class="btn-group">

组合进一个

<div class="btn-toolbar">

中做成更复杂的组件。

<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>

3.3、尺寸

只要给 .btn-group 加上 .btn-group-* 类，

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

3.4、按钮组嵌入下拉菜单

只须把

.btn-group

放入另一个

.btn-group

中

<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>

<div class="btn-group" role="group">  //类名必须为btn-group，如果是dropdown则会布局错乱
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href<
eab1
/span>="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>

3.5、按钮组垂直排列

.btn-group-vertical

4、按钮式下拉菜单

外部容器的样式

.dropdown

换为了

.btn-group

<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

4.2、分裂式按钮下拉菜单

<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" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

4.3、尺寸

不管是组合式下拉菜单还是分离式下拉下单，都可以使用.btn原来的附加样式

.btn-lg

,

.btn-sm

,

.btn-xs

；

4.4、向上弹起的下拉菜单

在.btn-group里附加一个.dropup即可；

5、输入框组

输入框组可以嵌套到表单组或栅格相关元素的内部，反之不行！！

5.1、基本用法

在容器上应用

.input-group

， 然后在个性元素上应用

.input-group-addon

。

<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>

5.2、尺寸大小

只有

input-group-lg

和

input-group-sm

<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

5.3、复选框与单选框作为addon

只要在.input-group-addon样式内放置checkbox和radio类型的input即可。

<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" />
</span>
<input type="text" class="form-control" />
</div>

5.4、按钮作为addon

需要用

.input-group-btn

替换

.input-group-addon

<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->

5.5、下拉菜单作为addon