字体图标
- 只对内容为空的元素起作用
- 不能和其它组建混合使用(单独创建一个
<span>
)
下拉菜单
.dropdown/dropup
菜单弹出方式
- 触发器
.dropdown-toggle
下拉内容左对齐 data-toggle="dropdown"
- 下拉列表 给
.dropdown-menu
添加.dropdown-menu-right
菜单右对齐
.dropdown-header
下拉菜单的标题
- 分割线
<li role="separator" class="divider"></li>
- 禁用的
.disabled
data-toggle/target
触发的事件/目标
按钮
- 按钮组
.btn-group
- 按钮组可以放进
.btn-toolbar
可组成更复杂的组建
- 尺寸
.btn-group-lg
- 垂直排列
.btn-group-vertical
分列式下拉菜单不支持该方式
- 两端对齐
.btn-group-justify
输入框组
.input-group
.input-group-addon/btn
- `.collapse 折叠插件
导航
.nav
.nav-tabs/pills/stacked/justify
标签页/胶囊式/垂直方向/两端对齐
- 通用的
<div>
务必设置 role="navigation"
- 导航放
<img>
时需要自己添加一些样式代码
- 导航条表单/按钮/文本/对齐/固定/反色
.navbar-default/form/btn/text/(left/right)/fixed-top/inverse
- 默认高度50px,固定需要设置
body{padding-top: 80px;}
或者.navbar-static-top
随着滚动消失
路径导航 ##
分页
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
标签
徽章
巨幕
页头
缩略图
.thumbnail
.caption
缩略图中自定义内容
警告框
.alert-success/info/warning/danger
- 可关闭的警告框
.alert-dismissible
及 关闭按钮
- 确保所有设备上正确 button元素添加
data-dismiss="alert"
属性
.alert-link
添加链接
进度条
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
progress-bar-striped
条纹 .active
右到左动画
- 多个进度条放进一个
.progress
可堆叠
媒体对象
.media
.media-left/right/object/body/heading/list
列表组
.list-group
list-group-item
面板
- 将DOM内容放到一个盒子中可以试试
.panel
.panel-default/heading/body/title/footer
默认样式
插件
.modal/dropdown/tab-pan/
data-spy="scroll"
配合jQ $().scrollspy(option)
data-toggle="tooltip/popover"
配合jQ $().(show.bs.tab/shown.bs.tab事件)/popover(option)
data-dismiss=""
添加关闭功能或jQ$().alert();
事件调用关闭
- 按钮添加状态
data-loading-text=""
设置状态文字 jQ $().button('toggle/loading/reset').delay().queue(function(){})
- 折叠
.collapse
jQ $().collapse('show/hide/toggle')
还要事件 (show/shown/hide/hiden).bs.collapse
调用show方法后/折叠元素用户可见触发
- 轮播
carousel
- 附加导航
data-spy="affix"
跳转指定位置,或滑动到指定位置导航标签也自动跳转,也可手动为某个元素添加