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向右