Bootstrap 基础

1.jquery 要在 bootstrap 之前引用；

2.<meta http-equiv = "X-UA-Compatible"  content="IE=edge">    (在 IE 运行最新的渲染模式)；

3.<meta name = "viewport"  content = "width = device-width , initial-scale = 1">    (初始化移动浏览显示)；

4.<link href = "css/bootstrap.min.css" rel = ''stylesheet'>   (载入Bootstrap的CSS样式)；

5.每个row 代表一行，要写col 必须在此之前嵌套一个row    (可不用设置row的样式)；

6.container 默认边距有15px   会留白    解决方法：(在container 内设置padding-left:0; padding-right:0; 填充留白部分)；

7.基于最小的屏幕col-xs-12编写会方便很多；

8.bootstrap     <small> 标签制作副标题；

9.添加类名“.lead”  突出显示文字  （作用增大文本字号，加粗文本，对行高和margin做了相应的处理）；

10.添加类名“.table”   设置表格    添加“table-hover“   设置鼠标悬停高亮，颜色可在源码bootstrap.css文件中第1469行~1472行查看、更改；

11.添加类名‘’.table-condensed‘’   紧凑表格 ；           

12.所有的table元素前都应加上类名table   后再跟需要设置的样式；

13.带边框的表格    添加类名 ‘’.table-bordered‘’；

14.在table外层div中添加class="table-reponsive"  设置响应式表格；

15.multiple  下拉菜单滚动条；

16.添加类名“form-control” 设置文本框样式   颜色为#ccc；

17.表单控件（复选框和单选按钮水平排列）  role="form"；

18.添加input-lg   控件变大、文本        添加input-sm  控件变小、文本；

19.禁止输入   <fieldset disabled></fieldset>；

20.has-success    has-feedback（显示同一行）  <span class="glyphicon glyphicon-ok form-control-feedback"></span>  （图标） 成功状态（包括文本框颜色为绿色加图标）；

     has-warning    has-feedback （显示同一行）  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>   （图标） 警告状态（包括文本框颜色为黄色加图标）；

     has-error         has-feedback （显示同一行）  <span class="glyphicon glyphicon-remove form-control-feedback"></span>    （图标）  错误状态（包括文本框颜色为红色）；

21.class = "btn"  属性多标签支持   例：<input> <span> <div> 标签都可以；

22.cursor:not-allowed   静止鼠标图标；

23.class="btn-block"   块级变行级     加上disabled 启动禁用样式；

24.响应式布局结构：<div class="container">

                                          <div class="row">

                                                   <div class="col-sm-6">

                                                  <div class="col-sm-6">

                                           </div>

                                  </div>

25.图标引用：

                        <span class="glyphicon glyphicon-search"></span>
                        <span class="glyphicon glyphicon-asterisk"></span>
                        <span class="glyphicon glyphicon-plus"></span>
                        <span class="glyphicon glyphicon-cloud"></span>

                         <div class="btn-group">
                                 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-backward"></span></button>
                                 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-backward"></span></button>
                                 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span></button>
                                 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button>
                                 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button>
                                 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></button>
                                 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward "></span></button>
                                 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-forward"></span></button>
                                 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-forward"></span></button>
                          </div>

26.布局：列向右移动四列的间距     col-sm-offset-4 ;

                列向右移动八列的间距     col-sm-push-8 ;

                列向左移动四列的间距     col-sm-pull-4 ;

27.嵌套网格：还要写个row  默认为12格；

28.class=“caret” 下拉菜单的的图标，并排显示； 

     data-toggle = "dropdown"  下拉显示菜单；

29.class="divider"  下拉菜单分割线；

30.class="dropdown-header"  突出头部，会缩小文本，颜色为#ccc;

31.使用pull-right类使下拉菜单与父容器右边对齐;

     使用dropdown-menu-right类使下拉菜单与父容器右边对齐;

32.class="dropdown-menu"  下拉菜单；

33.class="btn-group-vertical"   下拉菜单垂直排列；

34.class="btn-group"   菜单与菜单之间的间隙缝合；

35.<div class="btn-group btn-group-justified">    几个菜单平均分布；

36.按钮下拉菜单：

            <div class="btn-group">
                       <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
                       <ul class="dropdown-menu">
                             <li><a href="##">按钮下拉菜单项</a></li>
                             <li><a href="##">按钮下拉菜单项</a></li>
                             <li><a href="##">按钮下拉菜单项</a></li>
                             <li><a href="##">按钮下拉菜单项</a></li>
                       </ul>
            </div>

37.添加.dropup  让三角形变成倒三角；

38.nav-tabs  让li 从块级变行级     class="nav nav-tabs"；

39.    添加某一个被选中的状态；

        <ul class="nav nav-tabs">
                   <li class="active"><a href="##">Home</a></li>
                   <li><a href="##">CSS3</a></li>
                   <li><a href="##">Sass</a></li>
                   <li><a href="##">jQuery</a></li>
                   <li><a href="##">Responsive</a></li>
         </ul>
         <br />   

        添加某一个被禁用的状态；
         <ul class="nav nav-tabs">
                   <li class="active"><a href="##">Home</a></li>
                   <li><a href="##">CSS3</a></li>
                   <li><a href="##">Sass</a></li>
                   <li><a href="##">jQuery</a></li>
                   <li class="disabled"><a href="##">Responsive</a></li>
         </ul>

40.class="nav nav-pills"   导航栏排列显示，行级；

41.nav-stacked  铺满整行，块级变行级 ， ul li 需要搭配 a 标签使用，否则无效！

42.class="breadcrumb"  编写导航栏   效果可以自己试；

43.class="navbar navbar-default" role="navigation"

      class="nav navbar-nav"   两行代码，简单大方的基础导航条；

44.按钮, 直接写button标签属性即可. 需要注意的是, 一定要在button的样式上加上.navbar-btn 这样你看到的效果才是比较美观的.

45. class="navbar-header"

       class="navbar-brand    一起使用，字体放大，作为标题使用，突出显示；

46. 搜索框：

        <form action="##" class="navbar-form navbar-left" rol="search">
                   <div class="form-group">
                           <input type="text" class="form-control" placeholder="请输入关键词" />
                   </div>
                   <button type="submit" class="btn btn-default">搜索</button>
        </form>

47.class="navbar-text"    文本自动居中；

48.class="nav navbar-nav"  鼠标移动在文字上，文字颜色有变化；

49.navbar-fixed-top         导航条固定于顶部；

     navbar-fixed-bottom   导航条固定于底部；

50.导航条根据浏览器的大小而切换隐藏和显示；

          <!--代码-->
          <div class="navbar navbar-default" role="navigation">
                  <div class="navbar-header">
     　  <!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
                  <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                                <span class="sr-only">Toggle Navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                   </button>
          <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
                   <a href="##" class="navbar-brand">慕课网</a>
          </div>
     <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
            <div class="collapse navbar-collapse navbar-responsive-collapse">
                  <ul class="nav navbar-nav">
                         <li class="active"><a href="##">网站首页</a></li>
                         <li><a href="##">系列教程</a></li>
                         <li><a href="##">名师介绍</a></li>
                         <li><a href="##">成功案例</a></li>
                         <li><a href="##">关于我们</a></li>
                  </ul>
               </div>
             </div>

51.class="navbar navbar-inverse"     导航条深色背景，字体颜色为白色；

52.class="pagination pagination-lg"   分页；lg---较大的样式；

53.class="pager"  分页； 四角有弧度的样式（圆角5px左右）；

54.class="badge"  设置徽章；例如：阿拉伯数字；

     class="badge pull-right"   设置徽章并向右移动；

55.class="thumbnail"   图像缩略图（图像有一个外框）；

56.class="caption"  排列图像在div上加入;

57.     class="list-group"

          class="list-group-item"  带链接的列表组； 列表项用这个定义； 后面跟颜色；比如警告：Bootstrap内定的颜色；

58.class="list-group-item-heading"

     class="list-group-item-text"    自定义列表组；  

     class="panel-footer"

     class="panel-body"  

     class="panel-heading"  自定义面板；父元素引用class="panel panel-default" ；

59.class="table table-bordered"    面板内嵌套表格；

60.leanModal  方法     动态模仿开发jquery 插件；

61. class="modal show"    隐藏或者显示某个模板；

62.data-target="#mymodal-data"   通过data-target来触发模态弹出框内容；

63.class="modal fade bs-example-modal-lg"  可以设置模态弹出框的大小，lg ---  sm ;

64.data-keyboard="false"   通过键盘ESC来关闭弹出框；

65.data-backdrop="static"    通过点击背景关闭弹出框，默认值为true, 设置static 点击背景则不会弹出模态框；

66.弹出模态框 js 代码：

     <script>
              $(function(){
              $(".btn").click(function(){
              $("#themodal").modal('toggle')
            })
      })
     </script>

67.keyboard:false  如果不想让用户按ESC键关闭模态弹出框，可以这样设置；

68.$(“#mymodal”).modal(“show”)    触发时，显示模态弹出窗；

69.$(“#mymodal”).modal(“hide”)      触发时，关闭模态弹出窗；

70.$(“#mymodal”).modal(“toggle”)    触发时，反转模态弹出窗的状态。如果模态弹出窗是显示的，则关闭；反之，如果模态弹出窗是关闭的，则显示；

71.模态弹出窗还支持四种类型的事件，分别是模态弹出窗的弹出前、弹出后，关闭前、关闭后，具体描述如下：

     show.bs.modal      在show方法调用时立即触发（尚未显示之前）；如果单击了一个元素，那么该元素将作为事件的relatedTarget属性；

     shown.bs.modal    该事件在模态弹出窗完全显示给用户之后（并且等CSS动画完成之后）触发；如果单击了一个元素，那么该元素将作为事件的relatedTarget事件；

     hide.bs.modal        在hide方法调用时（但还未关闭隐藏）立即触发；

     hidden.bs.modal    该事件在模态弹出窗完全隐藏之后（并且CSS动画漂完成之后）触发；

     调用方法：

     $('#myModal').on('hidden.bs.modal', function (e) {
                 // 处理代码...
       })