Bootstrap全局样式及部分组件系列三

图片

img.img-rounded\img-circle\img-thumbnail： 自适应图片
.img-responsive 类可以让图片支持响应式布局，居中方式：.center-block

图标

可自由改变大小、颜色，相当于字体样式

辅助类

1. 关闭按钮： <div class="close">&times;</div>
2. 三角符号： .caret
3. 浮动： .pull-right\.pull-left相当于float:right;\float:left;
4. 块居中： .center-block
5. 清浮动： .clearfix

菜单下拉

1. 菜单下拉： dropdown
2. 菜单上拉： dropup
3. 对齐： .dropdown-menu
4. 菜单右对齐： .dropdown-menu-right
5. 标题： dropdown-header
6. 分割线： divider

案例：

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">dropdown<span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a>1111</a></li>
        <li><a>2222</a></li>
        <li><a>3333</a></li>
        <li><a>4444</a></li>
    </ul>
</div>

按钮组

1. div.btn-group包裹button.btn： 水平排列
2. div.btn-group-vertical： 垂直排列
3. div.btn-group-justified： 水平平铺

输入框组

1. div.input-group包裹input： 水平排列
2. .input-group-addon与.input-group-btn： 扩展图标
3. .input-group-btn： 额外元素的按钮

标签页

1. ul.nav-tabs： 普通标签页
2. ul.nav-pills： 胶囊式导航
3. .nav-stacked： 胶囊式导航垂直排列
4. .nav-justified： 两端对齐，水平平铺