Bootstrap CSS

• 全局
  • container
    • div, 唯一包裹容器
  • container-fluid
    • 占全部视口
• 栅格
  • 必须放在row内
  • col-xs-1
    • 适用于大于等于分界点的屏幕
      • 大于12的最后那个col另起一行排列
    • xs < 768px 宽度, container 最大宽度: 自动
    • sm >= 768px, 750px
    • md >= 992px, 970px
    • lg >= 1200px, 1170px
  • col-md-offset-4
    • 向右偏移4
  • col-md-pull-9
    • 向后推9, 改变元素的顺序
  • col-md-push-3
  • o→ mixin
  • make-row
    • 如 .wrapper {.make-row();}
  • make-xs-column
  • make-sm-column-offset
  • make-sm-column-push
  • make-sm-column-pull
• 样式
  • muted
    • 文本颜色
    • text-warning
    • text-error
    • text-info
    • text-success
  • text-left
    • 文本左对齐
    • text-center
    • text-right
    • text-justify
    • text-nowrap
    • text-lowercase
    • text-uppercase
    • text-capitalize
  • bg-primary
    • p
    • bg-success
    • bg-info
    • bg-warning
    • bg-danger
  • success
    • 状态类
    • table行颜色, control-group div
    • error
    • danger
    • warning
    • info
    • active
  • has-warning
    • div元素
    • 适用class: control-label, form-control, help-block
    • has-error
    • has-success
  • has-feedback
    • div
  • pull-right
    • 任意元素向右浮动
    • pull-left
  • navbar-right
    • 导航条中向右浮动
    • navbar-left
  • clearfix
    • 清除浮动
  • initialism
    • 缩略语样式, abbr标签
  • small
    • small标签的样式
  • lead
    • p标签，突出显示
  • blockquote-reverse
    • blockquote标签使用, 内容右对齐
  • disabled
    • btn, input, 只disable样式
    • o→ 适用的class
    • radio
    • radio-inline
    • checkbox
    • checkbox-inline
    • o→ 适用的标签
    • fieldset
  • inline
    • 行内ul, checkbox
  • center-block
    • 任意元素, 水平居中
  • show
    • 任意元素显示
    • hidden
  • .sr-only
    • 任意元素, 辅助技术支持的文本, 隐藏当前元素
    • sr-only-focusable
      • 元素有焦点时显示出来
  • visible-xs-block
    • 只对xs屏幕可见
    • visible-xs-inline
    • visible-xs-inline-block
  • hidden-xs
    • 对xs屏隐藏
  • visible-print-block
    • 对打印机可见
    • visible-print-inline
    • visible-print-inline-block
  • hidden-print
• table
  • table
    • table样式
  • table-responsive
    • div元素，包裹table样式后，创建响应式表格，带有滚动条
  • table-striped
    • 斑马纹样式
  • table-bordered
    • 边框圆角
  • table-hover
    • 行悬停样式
  • table-condensed
    • 内补减半使更紧凑
• form
  • form-search
    • form标签中添加，其中有input
    • search-query
      • search中的input的样式
  • form-actions
    • div元素, 内部按钮自动缩进
  • form-inline
    • 行内表单
  • form-actions
    • div元素，按钮列表，和表单其它元素对齐
  • form-horizontal
    • 元素右对齐左浮动的表单
  • form-group
    • form中的div元素
    • form-control
      • input, textarea, select
      • o→ 支持的input类型
      • text
      • password
      • datetime
      • datetime-local
      • date
      • month
      • time
      • week
      • number
      • email
      • url
      • search
      • tel
      • color
    • form-control-static
      • p标签，用来代input显示文本
    • control-group
      • control-label
      • controls
    • input-group
      • input-group-addon
        • span
      • form-control
        • 同外
    • glyphicon-ok
      • input元素或input-group的div元素后的span, 添加input内的图标
      • 联合使用 class: glyphicon, form-control-feedback;
        • 属性 aria-hidden=“true”
      • glyphicon-warning-sign
      • glyphicon-remove
  • checkbox
    • div, label
  • radio
    • div, label
  • checkbox-inline
    • div
  • radio-inline
    • div
  • controls
    • div元素，为input增加合适的间距, 浮动它们缩减空白，再清除浮动
    • controls-row
      • 排一行，增加合适间距
  • input-mini
    • input-small
    • input-medium
    • input-large
    • input-xlarge
    • input-xxlarge
  • input-sm
    • input, select, 高度
    • input-lg
  • form-group-sm
    • class为form-group的div, 高度
    • form-group-lg
  • input-prepend
    • 前缀input, 可与input-append组合
    • add-on
      • span标签
    • btn
    • span2
      • input标签
  • input-append
  • input-block-level
    • 块级input
  • uneditable-input
    • span元素模拟不可编辑input
• 小件
  • btn
    • a, button, input
  • btn-group
    • div标签 按钮下拉菜单
    • dropdown-toggle
      • 要赋加自定义属性data-toggle=“dropdown”来关联执行js
    • dropdown-menu
      • ul标签
  • btn-primary
    • 按钮样式
    • btn-info
    • btn-success
    • btn-warning
    • btn-danger
    • btn-inverse
    • btn-link
    • btn-default
  • btn-lg
    • btn-sm
    • btn-xs
  • btn-block
    • 块级按钮
  • span1
    • input元素, select元素
    • span2
    • span3
    • span4
    • span5
  • help-inline
    • span元素，帮助文本
  • help-block
    • span元素, 块显示帮助
  • img-rounded
    • img, 图片样式
    • img-circle
    • img-polaroid
  • img-responsive
    • img, 图片响应式
  • caret
    • span标签, 下箭头
  • close
    • button, 关闭图
  • list-unstyled
    • 无样式列表
  • dl-horizontal
    • dl列表水平描述
  • pre-scrollable
    • pre标签内容滚动
  • text-overflow
    • 截断改写数据, 可能会垂直显示
  • text-hide
    • h1, 将元素的文本内容替换为背景图
• 导航

  • <div role="navigation"
      # 如果作为导航条, 父元素加属性，或者用nav标签
      <ul class="nav nav-tabs"
              # nav-pills 改成胶囊样式
              # nav-stacked 改成垂直
              # nav-justified 自适应宽度
              <li role="presentation" class="active"
                      # disabled
              <li role="presentation" class="dropdown"
                      <a class="dropdown-toggle" role="button" 
                              data-toggle="dropdown"
                              aria-haspopup="true" aria-expanded="false" 
                      <ul class="dropdown-menu"
     
    <nav class="navbar navbar-default"
      # 添加navbar-fixed-top可以冻结到顶部
      ## 设置body{padding-top: 70px;}来使内容不被遮盖
      ## navbar-fixed-bottom, 同样要设置padding-bottom
      ## navbar-static-top 向下滚动就消失
      # navbar-inverse 反色
      <div class="container-fluid"
              <div class="navbar-header"
                      <a class="navbar-brand"
                              <img alt="Brand"
                                      # 图标
                      <button type="button" class="navbar-toggle collapsed"
                              data-toggle="collapse" 
                              data-target="#bs"
                              aria-expanded="false"
                              <span class="icon-bar"
                                      # 放隐藏菜单的
                              <span class="icon-bar"
                              <span class="icon-bar"
                      <a class="navbar-brand"
              <button type="button" class="btn btn-default navbar-btn"
                      # navbar-btn可以上按钮垂直居中
              <p class="navbar-text"
              <div class="collapse navbar-collapse" id="bs"
                      <ul class="nav navbar-nav"
                              <li><a
                      <form class="navbar-form navbar-left" role="search"
                              # navbar-form自动垂直对齐，折叠
                              # navbar-left 让正确对齐，由pull-left mixin而来
                              <div class="form-group"
                                      <input class="form-control"
                              <button class="btn btn-default"
                      <ul class="nav navbar-nav navbar-right"
                      <p class="navbar-text navbar-right"
                              # 不支持多个navbar-right
                              <a class="navbar-link"
     
    <ol class="breadcrumb"
      # 面包屑
      <li
      <li class="active"

• 图标
  • icon-white
    • 反色为白色
  • fa-dashboard
    • 配合fa使用
    • fa-fw
      • 小左箭头
  • fa-lg
• 默认渲染
  • <h1> … <h6> - <small> - <p> - <mark> - <del> - <s> - <ins> - <u> - <small> - <strong> - <em> - <abbr> - <address> - <blockquote> - <p> - <footer> - <cite> - <ul> - <li> - <ol> - <li> - <dl> - <dt> - <dd> - <code> - <kbd> - <pre> - <var> - <samp> - 程序输出
  • 属性
    • aria-label
      • input元素, 替代label
    • aria-labelledby
    • title
      • 辅助功能阅读
    • aria-describedby
      • input 辅助阅读
    • disabled
    • readonly