boostrap基础知识点总结

boostrap基础知识点总结，包括：插件、栅格系统、组件、其它、基础类五部分内容。希望对你有所帮助！

boostrap基础知识点总结

• 插件
  • # 强大之处： - 可通过设置data属性，无需额外js代码实现功能 - 关闭该特性 - 关闭所有：$(document).off(".data-api") - 关闭特定某个插件：只需在 data-api 前面添加那个插件的名称作为命名空间
  • 模态框
    • 可配置尺寸
    • 可配置动画
  • 下拉菜单
  • 滚动监听
    • - 当滚动到内容，切换激活对应的导航栏菜单
  • Tooltip
  • 弹出窗
    • - 初始化所有弹出窗：$("[data-toggle='popover']").popover()
  • .alert警告窗
    • - 关闭按钮必须添加data-dismiss="alert" - $().alert()： 让警告框监听具有 data-dismiss="alert" 属性的后裔元素的click事件
  • Collapse
    • .collapse的元素会隐藏
    • 通过data-toggle='collapse'和data-target来触发显示隐藏
  • 轮播Carousel
• 栅格系统
  • .container / .container-fluid
    • .row
      • .col-lg-
      • .col-md-
      • .col-xs-
      • .col-sm-
• 组件
  • 导航 .nav
    • 普通标签页 .nav-tabs
    • 胶囊标签页 .nav-pills
    • 垂直排列 .nav-stacked
    • 两端对齐 .nav-justified
    • .navbar-left .navbar-right
    • 标签页 
      • 推荐使用li内嵌a标签
      • .disabled 改变外观，不改变功能，a标签仍可点击跳转
  • .media图文混合
    • - <div class='media'> - <div class='media-left'> - </div> - <div class='media-body'> - <h4 class='media-heading'> Media heading - </h4> - </div> - </div>
    • 对齐
      • .media-left
      • .media-right
      • .media-top
      • .media-middle
      • .media-bottom
  • 翻页组件
  • .progress进度条
    • .progress-bar 子类
      • 样式
        • 背景色
          • .progress-bar-success
          • .progress-bar-warning
        • 条纹
          • .progress-bar-striped
          • .active添加动画
  • .badge 未读消息
    • 利用:empty隐藏所有空内容
• 其它
  • 文字
    • .text-center/.text-left/.text-right
    • .
  • 布局
    • .clearfix清除浮动
    • .center-block居中
    • ，col-x-offset-1:左偏移1个单位距离
  • 显示隐藏
    • .show
    • .hide
    • .invisible
• 基础类
  • 按钮 .btn
    • 颜色
      • .btn-info
      • .btn-default
      • .btn-info
      • .btn-warn
      • .btn-success
      • .btn-link
    • 尺寸
      • .btn-lg
      • .btn-sm
      • .btn-xs
    • 关闭按钮（模态框）
      • 样式代码
        • - <button type="button" class="close"><span >×</span></button>
  • 图片
    • 响应式图片 .img-responsive
      • 居中，使用 .center-block（不要使用text-center）
      • 原理：max-width:100%;height:auto;display:block
    • 形状
      • 圆角 .img-rounded
      • 圆形 .img-circle
      • 缩略图 .img-thumbnail
  • 表格 .table
    • 样式
      • 带边框 .table-bordered
      • 条纹 .table-striped
      • .table-hover
      • .table-condensed紧凑表格
      • 响应式表格：给.table父级添加.table-responsive
  • 表单元素
    • 布局方式
      • .form-group
      • .form-horizon
      • .form-inline
    • 表单类
      • checkbox父级标签
        • .checkbox
        • .checkbox-inline
        • .disabled禁用
      • radio父级标签
        • .radio
        • .radio-inline
        • .disabled禁用
      • 表单验证 .has-feedback
        • .has-success
        • .has-warning
        • .has-error
      • 高度设置
        • 表单控件
          • .input-lg
          • .input-sm
        • 表单组控件
          • .form-group-lg
          • .form-group-sm