Bootstrap组件

字体图标

• 只对内容为空的元素起作用
• 不能和其它组建混合使用(单独创建一个<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 随着滚动消失

路径导航 ##

• 面包屑导航 .breadcurmb

分页

• .pagination

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</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">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

标签

• .label 及外观设定

徽章

• 展示新的或者未读的信息条目
• .badge

巨幕

• .jumbotron

页头

• .page-header

缩略图

• .thumbnail
• .caption 缩略图中自定义内容

警告框

• .alert-success/info/warning/danger
• 可关闭的警告框.alert-dismissible 及 关闭按钮
• 确保所有设备上正确 button元素添加 data-dismiss="alert" 属性
• .alert-link 添加链接

进度条

• .progress .progress-bar

<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

默认样式

• .well

插件

• .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" 跳转指定位置，或滑动到指定位置导航标签也自动跳转，也可手动为某个元素添加