您的位置：首页 > Web前端 > BootStrap

Bootstrap插件（七）——按钮（button.js）与collapse（collapse.js）

2017-09-21 22:10 375 查看
1.按钮（button.js）     

    button.js主要是运用选中状态来实现toggle状态以及和CheckBox、radio的组合使用，使用都相对简单，我们来看看通过选中状态去实现的toggle状态效果：



     下面贴出上面效果的示例代码：

1
<!DOCTYPE html>
2
<html>
3
<head lang="en">
4
   <meta charset="UTF-8">
5
   <title>组件</title>
6
   <!--引入bootstrap样式文件-->
7
   <link href="css/bootstrap.min.css" rel="stylesheet">
8
   <!--引入jq（必须在bootstrap.min.js文件之前）-->
9
   <script type="application/javascript" src="js/jquery-3.2.0.js"></script>
10
   <!--引入bootstrap js-->
11
   <script type="application/javascript" src="js/bootstrap.min.js"></script>
12
13
</head>
14
<body style="margin: 150px">
15
16
   <!--
17
       设置 data-toggle="button"和 aria-pressed="false"(可省略)实现
18
   按钮的toggle状态
19
   -->
20
   <button type="button" class="btn btn-danger" data-toggle="button"  aria-pressed="false" autocomplete="off">
21
       切换选中状态
22
   </button>
23
   <hr/>
24
   <div class="btn-group" data-toggle="buttons">
25
       <label type="button" class="btn btn-primary active">
26
           <input type="checkbox" autocomplete="off" checked>checkbox1
27
       </label>
28
       <label type="button" class="btn btn-primary">
29
           <input type="checkbox" autocomplete="off">checkbox2
30
       </label>
31
       <label type="button" class="btn btn-primary">
32
           <input type="checkbox" autocomplete="off">checkbox3
33
       </label>
34
       <label type="button" class="btn btn-primary">
35
           <input type="checkbox" autocomplete="off">checkbox4
36
       </label>
37
   </div>
38
39
   <hr/>
40
   <div class="btn-group" data-toggle="buttons">
41
       <label type="button" class="btn btn-default active">
42
           <input type="radio" autocomplete="off" checked>radio1
43
       </label>
44
       <label type="button" class="btn btn-default">
45
           <input type="radio" autocomplete="off">radio2
46
       </label>
47
       <label type="button" class="btn btn-default">
48
           <input type="radio" autocomplete="off">radio3
49
       </label>
50
       <label type="button" class="btn btn-default">
51
           <input type="radio" autocomplete="off">radio4
52
       </label>
53
   </div>
54
</body>
55
</html>
  2.collapse（collapse.js）
    collapse是折叠的意思，应用场景也就是我们的折叠面板，在有限的控件内展示更多的内容，ok，话不多说依然是一个示例来学习它的使用方法。来看看我们的效果图：


 依然是贴出我们的示例代码：



1

<!DOCTYPE html>


2

<html>


3

<head lang="en">


4

   <meta charset="UTF-8">


5

   <title>组件</title>


6

   <!--引入bootstrap样式文件-->


7

   <link href="css/bootstrap.min.css" rel="stylesheet">


8

   <!--引入jq（必须在bootstrap.min.js文件之前）-->


9

   <script type="application/javascript" src="js/jquery-3.2.0.js"></script>


10

   <!--引入bootstrap js-->


11

   <script type="application/javascript" src="js/bootstrap.min.js"></script>


12

​


13

</head>


14

<body style="margin: 100px">


15

​


16

   <!--


17

       1.通过data-toggle="collapse"设置折叠效果


18

       2.用data-target="#collapseDiv"设置目标div


19

   -->


20

   <h4>按钮显示折叠效果</h4><hr/>


21

   <button type="button" class="btn btn-warning" data-toggle="collapse" data-target="#collapseDiv">


22

       data-target绑定


23

   </button>


24

​


25

   <button type="button" class="btn btn-primary" href="#collapseDiv" data-toggle="collapse">


26

       href绑定


27

   </button>


28

​


29

   <div id="collapseDiv" class="collapse" style="margin-top: 10px">


30

       <div class="well">


31

           至情至性、玩世不恭、纵横四海！


32

       </div>


33

   </div>


34

​


35

   <!--


36

       1.父div 设置 class="panel-group" 设置role="tablist"


37

​


38

       2.单个div设置 class="panel"


39

​


40

       3.panel-heading设置role="tab" 其中的a设置data-toggle="collapse" 并绑定父div data-parent="#accordion"


41

           在绑定目标内容data-target="#collapseContent1"


42

​


43

       4.内容div 设置class="panel-collapse collapse in"  role="tabpanel"并设定对应的id id="collapseContent1"


44

   -->


45

   <h4>手风琴效果</h4><hr/>


46

   <div class="panel-group" id="accordion" role="tablist">


47

       <div class="panel panel-default">


48

           <div class="panel panel-heading" role="tab" id="heading1">


49

               <h4 class="panel-title">


50

                   <a role="button" data-toggle="collapse" data-parent="#accordion"


51

                      data-target="#collapseContent1">


52

                       于人


53

                   </a>


54

               </h4>


55

           </div>


56

​


57

           <div id="collapseContent1" class="panel-collapse collapse in" role="tabpanel">


58

               <div class="panel-body">


59

                   至情至性


60

               </div>


61

           </div>


62

​


63

       </div>


64

​


65

​


66

       <div class="panel panel-default">


67

           <div class="panel panel-heading" role="tab" id="heading2">


68

               <h4 class="panel-title">


69

                   <a role="button" data-toggle="collapse" data-parent="#accordion"


70

                      data-target="#collapseContent2">


71

                       于事


72

                   </a>


73

               </h4>


74

           </div>


75

​


76

           <div id="collapseContent2" class="panel-collapse collapse in" role="tabpanel">


77

               <div class="panel-body">


78

                   玩世不恭


79

               </div>


80

           </div>


81

​


82

       </div>


83

​


84

       <div class="panel panel-default">


85

           <div class="panel panel-heading" role="tab" id="heading3">


86

               <h4 class="panel-title">


87

                   <a role="button" data-toggle="collapse" data-parent="#accordion"


88

                      data-target="#collapseContent3">


89

                       于梦想


90

                   </a>


91

               </h4>


92

           </div>


93

​


94

           <div id="collapseContent3" class="panel-collapse collapse in" role="tabpanel">


95

               <div class="panel-body">


96

                   纵横四海


97

               </div>


98

           </div>


99

​


100

       </div>


101

   </div>


102

​


103

</body>


104

</html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                bootstrap
                                                插件
                                                button.js
                                                collapse
                                                折叠面板
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航