Bootstrap 知识点大全

一、CSS样式:

        背景色:bg-danger  bg-primary   bg-info bg-success  bg-warning
         文本色:text-danger-------------------------------------------
         文字的对齐方式:text-left  text-center   text-right
         浮动:pull-left  pull-right    clearfix清除浮动
         透明度:in   opacity:1
         显示:show   display:block
         隐藏:hide   display:none;
         固定定位:fixed   position:fixed
         文字全小写:   text-lowercase
         文字全大写:   text-uppercase
         文字首字母大写:   text-capitalize
         按钮:btn 颜色： btn-default  btn-danger.......
         大小：btn-lg  btn-sm  btn-xs   btn-block(一整行)   btn-link(链接)
         表格:table   背景颜色  danger.....
               给tr/td写的话直接去写后面的类名 danger primary info success warning
               如果想让表格的内容更紧凑一点可以为表格添加 .table-condensed 类
        table-responsive  响应式(md lg的时候没边框)
               table-bordered 边框
               利用.table-hover可以让<tbody>中的每一行响应鼠标悬停状态
         表单：form-control(表单控制)  form-group(表单组)
               大小：form-group-lg  form-group-sm  form-group-xs
         图片:img-responsive(响应)    img-circle(圆形)   img-thumbnall(缩略图)

二、Bootstrap 组件

  按钮组:btn-group  垂直的:btn-group-vertical
  表单组:input-group
          表单和文字
          表单和按钮
          表单和下拉菜单
          表单和按钮和下拉菜单
          表单和单选框(复选框)
  导航条:navbar   navbar-default(默认的样式)
          表单里面的东西:navbar-btn   navbar-form  navbar-nav(导航)
          导航条的最开始:navbar-header  logo:navbar-brand
          导航条里的浮动:navbar-right   navbar-left
          navbar-collapse(在小于768的时候隐藏，不能改)
          navbar-inberse(反色)
          navbar-fixed-top/bottom(固定定位)
  导航:nav nav-tabs(表格式)   nav-pills(胶囊式)  nav-stacked(垂直的)
  面板: 独立的区块 panel 颜色： panel-danger------------
             分层:  头部:panel-heading  panel-title(面板的标题  一般写在heading里面)
                   主体:panel-body
                  尾部:panel-footer
  well: well  容器有凹陷的效果
  巨幕:jumbotron  比较醒目的区块
  徽章:badge
  分页:pagination
  翻页:pager
  多媒体组件:media
  dl:  dl-horizontal 让里面的子元素水平排列
  缩略图: thumbnail
  进度条：progress      堆叠效果(一个上面好多种颜色)
      颜色:progress-bar-danger...
      progress-bar-striped 条纹
      滚动效果的 active   动起来
  列表组:list-group 里面的子元素:list-group-item
  面包屑导航:breadcrumb

三、Bootstrap 插件

下拉菜单:绑定功能：data-toggle="dropdown"、  下拉菜单加类名:dropdown-menu
          父元素类名:dropdown、按钮类名: dropdown-toggle
          在按钮的后面创建一个箭头:<span class="caret"></span>
          方法:id.dropdown('')显示show  隐藏hide  切换toggle
          事件:show.bs.dropdown   刚一显示就会触发
              shown.bs.dropdown   显示完毕
              hide.bs.dropdown    刚要隐藏
              hidden.bs.dropdown  隐藏完毕
  弹出框: 绑定功能:data-toggle="popover"  绑定目标:data-target  #id
          js代码初始化:$('[data-toggle="popover"]').popover();
          标题:title="<h4>弹出框的标题</h4>"
          内容：data-content="这是弹出窗的内容"
          弹出框能够解析标签:data-html="true"
          弹出框的触发条件:data-trigger="hover"
          位置:data-placement="bottom"
          动画效果：data-animation="false"
          延迟  data-delay  单位是毫秒  不用写单位
          方法:id.popover('') 显示show  隐藏hide  切换toggle
              事件:show.bs.popover   刚一显示就会触发时触发的事件
                  shown.bs.popover   显示完毕时触发的事件
                  hide.bs.popover    刚要隐藏时触发的事件
                  hidden.bs.popover  隐藏完毕时触发的事件
  提示工具:绑定功能:data-toggle="tooltip"  位置:data-placement   标题:title
          初始化:$('[data-toggle="tooltip"]').tooltip();
          data-trigger="hover"
          方法:id.tooltip('') 显示show  隐藏hide  切换toggle
              事件:show.bs.tooltip   刚一显示就会触发时触发的事件
                  shown.bs.tooltip   显示完毕时触发的事件
                  hide.bs.tooltip    刚要隐藏时触发的事件
                  hidden.bs.tooltip  隐藏完毕时触发的事件
  轮播图:
          大盒子:  .carousel    id
              上面的图片  .carousel-inner>里面  .item>图片
              ul/ol .carousel-indicators>li   data-target="id" data-slide-to="0"(从0
              a href="id" data-slide="prev" class="carousel-control left"
              a href="id" data-slide="next" class="carousel-control right"
          方法carousel('id')
              cycle:开始轮播
              pause:停止轮播
              prev:上一张
              next:下一张
              number:第n张(从0开始)
          事件:slide.bs.carousel刚要轮播时触发的事件
               slid.bs.carousel轮播完毕时触发的事件
  按钮: 单个切换:data-toggle="button"
          多个切换  data-toggle="buttons"
          上传  class="btn btn-default x" data-loading-text="正在努力上传中...."   调js代码
  选项卡  data-toggle="tab"  绑定功能  <a href="#sec2" data-toggle="tab">选型卡02</a>
          href="#sec2" 绑定目标
          JQ：   $('.nav-tabs a').click(function(){
                      $(this).tab('show');
                      e.preventDefault();  //阻止默认动作
                  })
              属性和事件和别的一样  事件只有两个   e.target  //当前    e.relatedTarget   //前一个
  滚动监听  body  data-spy="scroll" data-target="#myNav"
              data-offset="50"  内容上边距视窗上边距离50就变
          jq:方法 scrollspy()
              属性:绑定目标target:'id'   offset内容最上边距视窗最上边的距离就变
              事件:  activate.bs.scrollspy  激活状态时触发
  附加导航
          jq:方法affix()
            属性 offset:{top}
  模态框   去掉黑色遮罩层  data-backdrop="false"    tabindex="-1" 按ESC关掉 写在modal里面
           绑定功能 data-toggle="modal"   绑定目标  data-target="id"
           关闭 <button class="close" data-dismiss="modal">&times;</button>
          jq:方法  modal()
              属性 show:true,  // show 显示   hide隐藏  toggle  切换
                      backdrop:false,//遮罩层
                      keyboard:true,//是否允许按esc关闭
                      remote:''//href路径
              事件:show.bs.modal   刚一显示就会触发时触发的事件(异步操作ajax写在这个里面)
                  shown.bs.modal   显示完毕时触发的事件
                  hide.bs.modal    刚要隐藏时触发的事件
                  hidden.bs.modal  隐藏完毕时触发的事件
  折叠
      功能  data-toggle="collapse"   目标   data-target="#zhedie"
      方法 collapse()
          属性show:true,  // show 显示   hide隐藏  toggle  切换
          事件:show.bs.collapse   刚一显示就会触发时触发的事件(异步操作ajax写在这个里面)
                  shown.bs.collapse   显示完毕时触发的事件
                  hide.bs.collapse    刚要隐藏时触发的事件
                  hidden.bs.collapse  隐藏完毕时触发的事件
  警告框  alert alert-danger    关闭  data-dismiss="alert"
              $('.close').click(function(){
                  $('.alert').alert('close')
              })   事件:close.bs.alert   刚要关闭
                        closed.bs.alert   完全关闭

比如说模态框就是这样用的

//        模态框
        $('.btn1').click(function(){
            $('#modal1').modal({
                show:true,  // show 显示   hide隐藏  toggle  切换
                backdrop:false,//遮罩层
                keyboard:true,//是否允许按esc关闭
                remote:''//href路径
            });
        });
        $('#modal1').on('show.bs.modal',function(){
            console.log(1111)
        }).on('shown.bs.modal',function(){
            console.log(2222)
        }).on('hide.bs.modal',function(){
            console.log(3333)
        }).on('hidden.bs.modal',function(){
            console.log(4444)
        });

折叠

//        折叠
        $('.btn2').click(function (){
            $('#cole').collapse();//回不去
        });
        $('#cole').on('show.bs.collapse',function(){
            console.log(1111)
        }).on('shown.bs.collapse',function(){
            console.log(2222)
        }).on('hide.bs.collapse',function(){
            console.log(3333)
        }).on('hidden.bs.collapse',function(){
            console.log(4444)
        });

四、Bootstrap 栅格系统

     容器:固定宽 container   全屏宽 container-fluid
     行:row
     列:col-(xs sm md lg)-(1-12)
     辅助: 隐藏hidden-(xs sm md lg)
           显示visible-(xs sm md lg)
     列偏移:col-(xs sm md lg)-offset-(1-12)
     列排序:col-(xs sm md lg)-push-(1-12)  push向左
            col-(xs sm md lg)-pull-(1-12)  pull向右