BootstrapBootstrap学习笔记(四)

四、JS插件

  概述:与jQueryUI库类似,Bootstrap提供了十几独插件函数。有半点种调用方法:

   (1) 传统JS变成方式

    $(…).插桩套数.();

   (2) 使用data-*壮大属性(推荐)

    <ANY data-XXX=””></ANY>

   有些插件函数,写了JS没有效应,必须抬高data-*

  1、下拉菜单    

    方式一样:扩展属性方式

      <a/button
data-toggle=’ddropdown’></a/button>

    方式二:JS调用方式

      $(‘…’).dropdown(); //默认隐藏

      $(‘…’).dropdown(‘toggle’); //默认显示

  2、标签页    

    方式同:扩展属性方式

      <ul><li><a data-toggle=”tab”
href=”#TABID”></a></li></ul>

    方式二:JS调用方式

      $(“#tab a”).click(function(event){

        event.preventDefault();

        $(this).tab(‘show’);

      });

  3、警告框      

    方式一样:扩展属性方式

      <div class=”alert alert-颜色
alert-dismissible”>

        <span class=”close”
data-dismiss=”alert”>×</span>

        文字

      </div>

    方式二:JS调用方式

      $(“#myAlert1”).click(function(event){

        event.preventDefault();

        $(this).alert(‘close’);

      });

  4、弹出信息    

     Bootstrap提供了三种植形式的消息弹出框:

      (1) 工具提示(tooltip)

        <ANY data-toggle=”tooltip”
data-placement=”left/right/top/bottom”
title=”message”></ANY>

        必须配合下论才行

        $(function () {

          $(‘[data-toggle=”tooltip”]’).tooltip()

        });

      (2) 弹出框(popover)

        <ANY data-toggle=”popoover”
data-placement=”left/right/top/bottom”
title=”message”></ANY>

        必须配合下论才有效

        $(function () {

          $(‘[data-toggle=”popover”]’).popover()

        });

      (3) 模态(modal)弹出框 —— 小重点

        模态子窗体:有某个父窗体打开,只要子窗体不停歇,则大窗体无法获得输入焦点,且父子窗体之间可并行传递数据。

        模态子窗体的必结构:        

1        <div class="modal" id="modalRegister">  <!-- 全屏的半透明遮罩层 -->
2                                 <div class="modal-dialog">  <!-- 宽高、定位 -->
3                                     <div class="modal-content"> <!-- 背景色、边框、倒角、阴影 -->
4                                         <div class="modal-header">头部</div>
5                                         <div class="modal-body">主体</div>
6                                         <div class="modal-footer">尾部</div>
7                                     </div>
8                                 </div>
9                        </div>

  5、折叠效果    

     将一个目标元素进行缩

      默认样式:

        <a/button data-toggle=”collapse”
href/data-target=”#对象元素ID”></a/button>

        <ANY id=”目标元素ID” class=”collopse
in”></ANY>

      手风琴效果

        代码结构:        

 1           <div class="panel-group" id="accordion">
 2                    <div class="panel panel-default">
 3                         <div class="panel-heading">
 4                            <a data-toggle="collapse" href="#目标元素ID" data-parent="#accordion" class="panel-title">Collapse Group Item</a>
 5                         </div>
 6                         <div id="目标元素ID" class="collapse panel-collapse">
 7                              <div class="panel-body">
 8                              </div>
 9                         </div>
10                    </div>
11              </div>

  实例:

Bootstrap 1Bootstrap 2

  1 <!DOCTYPE html>
  2 <html lang="zh-cn">
  3   <head>
  4     <meta charset="utf-8">
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6     <meta name="viewport" content="width=device-width, initial-scale=1">
  7     <title></title>
  8     <!-- Bootstrap -->
  9     <link href="css/bootstrap.css" rel="stylesheet">
 10     <!--[if lt IE 9]>
 11       <script src="js/html5shiv.min.js"></script>
 12       <script src="js/respond.min.js"></script>
 13     <![endif]-->
 14   </head>
 15   <body>
 16     <div class="container"> 
 17         <h1>jQuery插件 —— 折叠效果</h1>
 18         <h2>默认样式</h2>
 19         <a class="btn btn-info" data-toggle="collapse" href="#myColl1">Link Effect</a> 
 20         <div id="myColl1" class="collapse">
 21             <div class="well">
 22                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, dolorem laboriosam ea soluta eius, sint in facere excepturi commodi totam, numquam eos magnam! Deserunt sunt alias quibusdam libero esse atque.
 23             </div>
 24         </div>  
 25 
 26         <button type="button" class="btn btn-warning" data-toggle="collapse" data-target="#myColl2">Button Effect</button>   
 27         <div id="myColl2" class="collapse in">
 28             <div class="well">
 29                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, dolorem laboriosam ea soluta eius, sint in facere excepturi commodi totam, numquam eos magnam! Deserunt sunt alias quibusdam libero esse atque.
 30             </div>
 31         </div> 
 32 
 33         <hr>
 34 
 35         <h2>手风琴效果</h2>
 36         <div class="panel-group" id="accordion">
 37             <div class="panel panel-default">
 38                 <div class="panel-heading">
 39                     <h4 class="panel-title">
 40                         <a data-toggle="collapse" href="#collapse1" data-parent="#accordion">Collapse Group Item#1</a>
 41                     </h4>
 42                 </div>
 43                 <div id="collapse1" class="collapse panel-collapse">
 44                     <div class="panel-body">
 45                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab voluptates accusantium hic perferendis at quisquam quidem veniam quia, nemo odio neque omnis animi praesentium ipsum quaerat quam soluta sunt obcaecati.Fuga voluptate, sed fugit consequuntur, officia, sit facere eligendi hic perferendis et aperiam incidunt qui cum provident quas perspiciatis architecto explicabo sequi, nobis. Inventore possimus excepturi nemo consectetur fugiat dicta.Quas placeat sapiente fuga animi, expedita natus. Velit ullam officia, at atque blanditiis eos eligendi tempora. In, libero aut dolore error pariatur! Fugiat natus officiis deserunt, ullam ab quia explicabo.
 46                     </div>
 47                 </div>
 48             </div>
 49 
 50             <div class="panel panel-danger">
 51                 <div class="panel-heading">
 52                     <h4 class="panel-title">
 53                         <a data-toggle="collapse" href="#collapse2" class="collapsed" data-parent="#accordion">Collapse Group Item#2</a>
 54                     </h4>
 55                 </div>
 56                 <div id="collapse2" class="collapse panel-collapse">
 57                     <div class="panel-body">
 58                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab voluptates accusantium hic perferendis at quisquam quidem veniam quia, nemo odio neque omnis animi praesentium ipsum quaerat quam soluta sunt obcaecati.Fuga voluptate, sed fugit consequuntur, officia, sit facere eligendi hic perferendis et aperiam incidunt qui cum provident quas perspiciatis architecto explicabo sequi, nobis. Inventore possimus excepturi nemo consectetur fugiat dicta.Quas placeat sapiente fuga animi, expedita natus. Velit ullam officia, at atque blanditiis eos eligendi tempora. In, libero aut dolore error pariatur! Fugiat natus officiis deserunt, ullam ab quia explicabo.
 59                     </div>
 60                 </div>
 61             </div>
 62 
 63             <div class="panel panel-primary">
 64                 <div class="panel-heading">
 65                     <h4 class="panel-title">
 66                         <a data-toggle="collapse" href="#collapse3" class="collapsed" data-parent="#accordion">Collapse Group Item#3</a>
 67                     </h4>
 68                 </div>
 69                 <div id="collapse3" class="collapse panel-collapse">
 70                     <div class="panel-body">
 71                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab voluptates accusantium hic perferendis at quisquam quidem veniam quia, nemo odio neque omnis animi praesentium ipsum quaerat quam soluta sunt obcaecati.Fuga voluptate, sed fugit consequuntur, officia, sit facere eligendi hic perferendis et aperiam incidunt qui cum provident quas perspiciatis architecto explicabo sequi, nobis. Inventore possimus excepturi nemo consectetur fugiat dicta.Quas placeat sapiente fuga animi, expedita natus. Velit ullam officia, at atque blanditiis eos eligendi tempora. In, libero aut dolore error pariatur! Fugiat natus officiis deserunt, ullam ab quia explicabo.
 72                     </div>
 73                 </div>
 74             </div>
 75 
 76             <div class="panel panel-warning">
 77                 <div class="panel-heading">
 78                     <h4 class="panel-title">
 79                         <a data-toggle="collapse" href="#collapse4" class="collapsed" data-parent="#accordion">Collapse Group Item#4</a>
 80                     </h4>
 81                 </div>
 82                 <div id="collapse4" class="collapse panel-collapse">
 83                     <div class="panel-body">
 84                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab voluptates accusantium hic perferendis at quisquam quidem veniam quia, nemo odio neque omnis animi praesentium ipsum quaerat quam soluta sunt obcaecati.Fuga voluptate, sed fugit consequuntur, officia, sit facere eligendi hic perferendis et aperiam incidunt qui cum provident quas perspiciatis architecto explicabo sequi, nobis. Inventore possimus excepturi nemo consectetur fugiat dicta.Quas placeat sapiente fuga animi, expedita natus. Velit ullam officia, at atque blanditiis eos eligendi tempora. In, libero aut dolore error pariatur! Fugiat natus officiis deserunt, ullam ab quia explicabo.
 85                     </div>
 86                 </div>
 87             </div>
 88 
 89             <div class="panel panel-success">
 90                 <div class="panel-heading">
 91                     <h4 class="panel-title">
 92                         <a data-toggle="collapse" href="#collapse5" class="collapsed" data-parent="#accordion">Collapse Group Item#5</a>
 93                     </h4>
 94                 </div>
 95                 <div id="collapse5" class="collapse panel-collapse">
 96                     <div class="panel-body">
 97                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab voluptates accusantium hic perferendis at quisquam quidem veniam quia, nemo odio neque omnis animi praesentium ipsum quaerat quam soluta sunt obcaecati.Fuga voluptate, sed fugit consequuntur, officia, sit facere eligendi hic perferendis et aperiam incidunt qui cum provident quas perspiciatis architecto explicabo sequi, nobis. Inventore possimus excepturi nemo consectetur fugiat dicta.Quas placeat sapiente fuga animi, expedita natus. Velit ullam officia, at atque blanditiis eos eligendi tempora. In, libero aut dolore error pariatur! Fugiat natus officiis deserunt, ullam ab quia explicabo.
 98                     </div>
 99                 </div>
100 
101                 <div class="panel panel-info">
102                 <div class="panel-heading">
103                     <h4 class="panel-title">
104                         <a data-toggle="collapse" href="#collapse6" class="collapsed" data-parent="#accordion">Collapse Group Item#6</a>
105                     </h4>
106                 </div>
107                 <div id="collapse6" class="collapse panel-collapse">
108                     <div class="panel-body">
109                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab voluptates accusantium hic perferendis at quisquam quidem veniam quia, nemo odio neque omnis animi praesentium ipsum quaerat quam soluta sunt obcaecati.Fuga voluptate, sed fugit consequuntur, officia, sit facere eligendi hic perferendis et aperiam incidunt qui cum provident quas perspiciatis architecto explicabo sequi, nobis. Inventore possimus excepturi nemo consectetur fugiat dicta.Quas placeat sapiente fuga animi, expedita natus. Velit ullam officia, at atque blanditiis eos eligendi tempora. In, libero aut dolore error pariatur! Fugiat natus officiis deserunt, ullam ab quia explicabo.
110                     </div>
111                 </div>
112             </div>
113             </div>
114         </div> 
115 
116         <hr>
117         <h2>列表组效果</h2>
118         <div class="panel-group" id="accordion">
119             <div class="panel panel-default">
120                 <div class="panel-heading">
121                     <h4 class="panel-title">
122                         <a data-toggle="collapse" href="#mycoll" data-parent="#accordion">Collapse Group Item#1</a>
123                     </h4>
124                 </div>
125                 <div id="mycoll" class="collapse panel-collapse">
126                     <div class="list-group">
127                         <a class="list-group-item" href="#">豆蔻年华</a>
128                         <a class="list-group-item" href="#">青葱岁月</a>
129                         <a class="list-group-item" href="#">峥嵘岁月</a>
130                         <a class="list-group-item" href="#">人之暮年</a>
131                     </div>
132                 </div>
133             </div>
134         </div>
135 
136         <hr>
137         <h2>面板</h2> 
138         <div class="panel panel-default">
139             <div class="panel-heading">The Title of the Panel</div>
140             <div class="panel-body">The Main of the Panel</div>
141             <div class="panel-footer">The Footer of the Panel</div>
142         </div> 
143 
144         <hr>
145         <h2>响应式导航条</h2>
146         <div class="navbar navbar-default">
147           <div class="container">
148             <!--导航条中只允许出现1:头部-->
149             <div class="navbar-header">
150               <a class="navbar-brand" href="#">TARENA</a>
151 
152               <a data-toggle="collapse" href="#myNBC" class="navbar-toggle" >
153                 
154                 
155                 
156               </a>
157             </div>
158             <!--导航条中只允许出现2:折叠菜单-->
159             <div id="myNBC" class="collapse navbar-collapse">
160               <ul class="nav navbar-nav">
161                 <li><a href="#">首页</a></li>
162                 <li><a href="#">新闻</a></li>
163                 <li><a href="#">产品大全</a></li>
164               </ul>
165             </div>
166           </div>
167         </div>
168 
169     </div>
170 
171     <script src="js/jquery-1.11.3.js"></script>
172     <script src="js/bootstrap.js"></script>
173     <script src="js/bootlint.js"></script>
174   </body>
175 </html>

View Code

  6、轮播图

    代码结构: 

 1            <!-- data-interval设置轮播间隔时间,.slide为滑动效果 -->
 2              <div class="carousel slide" id="目标元素ID" data-ride="carousel" data-interval="3000">
 3              <!-- 图片序号 -->
 4              <ol class="carousel-indicators">
 5                  <li data-target="#目标元素ID" data-slide-to="0" class="active"></li>
 6                  <li data-target="#目标元素ID" data-slide-to="1"></li>
 7                  <li data-target="#目标元素ID" data-slide-to="2"></li>
 8                  ...
 9              </ol>
10  
11              <!-- 图片加载容器 -->
12              <div class="carousel-inner">
13                  <div class="item active">
14                      <img src="image url">
15                     <!-- 为图片添加描述 -->
16                      <div class="carousel-caption">XXX</div>  
17                  </div>
18                  ...
19              </div>
20  
21              <!-- 轮播控制 -->
22              <!-- 前一张 -->
23              <a class="left carousel-control" href="#目标元素ID" data-slide="prev">
24                  
25              </a>
26             <!-- 后一张 -->
27             <a class="right carousel-control" href="#目标元素ID" data-slide="next">
28                  
29              </a>
30        </div>   

 

  实例:

Bootstrap 3Bootstrap 4

  1 <!DOCTYPE html>
  2 <html lang="zh-cn">
  3   <head>
  4     <meta charset="utf-8">
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6     <meta name="viewport" content="width=device-width, initial-scale=1">
  7     <title></title>
  8     <!-- Bootstrap -->
  9     <link href="css/bootstrap.css" rel="stylesheet">
 10     <!--[if lt IE 9]>
 11       <script src="js/html5shiv.min.js"></script>
 12       <script src="js/respond.min.js"></script>
 13     <![endif]-->
 14   </head>
 15   <body>
 16     <div class="container"> 
 17         <h1>jQuery插件 —— 轮播图</h1>
 18         <div class="banner" style="width: 900px;">
 19             <h2>最基本的轮播图</h2>
 20             <div class="carousel" data-ride="carousel">
 21                 <div class="carousel-inner">
 22                     <div class="item active">
 23                         <img src="img/11.jpg">
 24                     </div>
 25                     <div class="item">
 26                         <img src="img/22.jpg">
 27                     </div>
 28                     <div class="item">
 29                         <img src="img/33.jpg">
 30                     </div>
 31                     <div class="item">
 32                         <img src="img/44.jpg">
 33                     </div>
 34                 </div>
 35             </div>
 36 
 37             <h2>滑动转变的轮播图</h2>
 38             <div class="carousel slide" data-ride="carousel">
 39                 <div class="carousel-inner">
 40                     <div class="item active">
 41                         <img src="img/11.jpg">
 42                     </div>
 43                     <div class="item">
 44                         <img src="img/22.jpg">
 45                     </div>
 46                     <div class="item">
 47                         <img src="img/33.jpg">
 48                     </div>
 49                     <div class="item">
 50                         <img src="img/44.jpg">
 51                     </div>
 52                 </div>
 53             </div>
 54 
 55             <h2>修改间隔时间后的轮播图</h2>
 56             <div class="carousel slide" data-ride="carousel" data-interval="3000">
 57                 <div class="carousel-inner">
 58                     <div class="item active">
 59                         <img src="img/11.jpg">
 60                     </div>
 61                     <div class="item">
 62                         <img src="img/22.jpg">
 63                     </div>
 64                     <div class="item">
 65                         <img src="img/33.jpg">
 66                     </div>
 67                     <div class="item">
 68                         <img src="img/44.jpg">
 69                     </div>
 70                 </div>
 71             </div>
 72 
 73             <h2>添加文字说明</h2>
 74             <div class="carousel slide" data-ride="carousel">
 75                 <div class="carousel-inner">
 76                     <div class="item active">
 77                         <img src="img/11.jpg">
 78                         <div class="carousel-caption">
 79                             <h4>秋菊</h4>
 80                             <p>为图片添加简单说明</p>
 81                         </div>
 82                     </div>
 83                     <div class="item">
 84                         <img src="img/22.jpg">
 85                         <div class="carousel-caption">
 86                             <h4>大漠</h4>
 87                             <p>为图片添加简单说明</p>
 88                         </div>
 89                     </div>
 90                     <div class="item">
 91                         <img src="img/33.jpg">
 92                         <div class="carousel-caption">
 93                             <h4>春意</h4>
 94                             <p>为图片添加简单说明</p>
 95                         </div>
 96                     </div>
 97                     <div class="item">
 98                         <img src="img/44.jpg">
 99                         <div class="carousel-caption">
100                             <h4>水母</h4>
101                             <p>为图片添加简单说明</p>
102                         </div>
103                     </div>
104                 </div>
105             </div>
106 
107             <h2>带文字说明且有切换按钮和序号的轮播图</h2>
108             <div class="carousel slide" id="carousel-example-generic" data-ride="carousel">
109                 <!-- 图片序号 -->
110                 <ol class="carousel-indicators">
111                     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
112                     <li data-target="#carousel-example-generic" data-slide-to="1"></li>
113                     <li data-target="#carousel-example-generic" data-slide-to="2"></li>
114                     <li data-target="#carousel-example-generic" data-slide-to="3"></li>
115                 </ol>
116 
117                 <!-- 图片加载容器 -->
118                 <div class="carousel-inner">
119                     <div class="item active">
120                         <img src="img/11.jpg">
121                         <div class="carousel-caption">秋菊</div>
122                     </div>
123                     <div class="item">
124                         <img src="img/22.jpg">
125                         <div class="carousel-caption">大漠</div>
126                     </div>
127                     <div class="item">
128                         <img src="img/33.jpg">
129                         <div class="carousel-caption">春意</div>
130                     </div>
131                     <div class="item">
132                         <img src="img/44.jpg">
133                         <div class="carousel-caption">水母</div>
134                     </div>
135                 </div>
136 
137                 <!-- 轮播控制 -->
138                 <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
139                     
140                 </a>
141                 <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
142                     
143                 </a>
144             </div>
145         </div>
146 
147     </div>
148         
149     <script src="js/jquery-1.11.3.js"></script>
150     <script src="js/bootstrap.js"></script>
151     <script src="js/bootlint.js"></script>
152   </body>
153 </html>

View Code

  7、附加导航

     代码结构:

 1         <div class="row">
 2                 <!-- 主体 -->
 3                 <div class="col-xs-10">
 4                     <h3 id="ID1">XXX</h3>
 5                     <p class="text-justify">XXX </p>
 6 
 7                     <h3></h3>
 8                     <p></p>
 9                     ...
10                   </div>
11                 <!-- 附加导航 -->
12                 <div class="col-xs-2">
13                     <div data-spy="affix" data-offset-top="220">
14                         <ul class="nav nav-pills nav-stacked">
15                             <li><a href="#ID1">XXX</a></li>
16                             <li><a href="#ID2">XXX</a></li>
17                             <li><a href="#ID3">XXX</a></li>
18                             <li><a href="#ID4">XXX</a></li>
19                         </ul>
20                     </div>
21                 </div>
22             </div>

  8、滚动监听  

    代码结构:

 1           <body data-spy="scroll" data-target="#目标元素ID">
 2                     <div class="container"> 
 3                          <div class="row">
 4                         <!-- main context -->
 5                         <div class="col-xs-10">
 6                             <h3 id="ID1">XXX</h3>
 7                             <p>XXX</p>
 8                             <h3></h3>
 9                             <p></p>
10                             ...
11                           </div>
12                         <!-- 附加导航 -->
13                         <div class="col-xs-2">
14                             <div id="目标元素ID" data-spy="affix" data-offset-top="220">
15                                 <ul class="nav nav-pills nav-stacked">
16                                     <li><a href="#ID1">XXX</a></li>
17                                     <li><a href="#ID2">XXX</a></li>
18                                     <li><a href="#ID3">XXX</a></li>
19                                     <li><a href="#ID4">XXX</a></li>
20                                 </ul>
21                             </div>
22                         </div>
23                         </div>
24                     </div>
25                 </body>

 

相关文章