• bootstrap 2手风琴折叠插件学习


    详细资料参见www.bootcss.com

    折叠插件的学习,效果如下:

    示例代码:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4 <meta charset="utf-8">
     5     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
     6 <link href="http://cdn.bootcss.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
     7     <link href="http://cdn.bootcss.com/twitter-bootstrap/2.3.2/css/bootstrap-responsive.min.css" rel="stylesheet">
     8     <title>title</title>
     9 </head>
    10 
    11 
    12 <div class="accordion" id="accordion2">
    13   <div class="accordion-group">
    14     <div class="accordion-heading">
    15       <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
    16         Collapsible Group Item #1
    17       </a>
    18     </div>
    19     <div id="collapseOne" class="accordion-body collapse in">
    20       <div class="accordion-inner">
    21         1111111111111111111111
    22       </div>
    23     </div>
    24   </div>
    25   <div class="accordion-group">
    26     <div class="accordion-heading">
    27       <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
    28     Collapsible Group Item #2
    29       </a>
    30     </div>
    31     <div id="collapseTwo" class="accordion-body collapse">
    32       <div class="accordion-inner">
    33         2222222222222222222222222
    34                      
    35       </div>
    36     </div>
    37   </div>
    38 </div>
    39 
    40 
    41 <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
    42 <script src="bootstrap.js" type="text/javascript"></script>
    43 </body>
    44 </html>
    View Code
  • 相关阅读:
    CSS学习笔记 -- 组合选择符
    CSS学习笔记 -- Position(定位)
    CSS学习笔记 -- CSS 列表
    CSS学习笔记 -- 多重样式优先级深入概念
    CSS学习笔记 -- ID和Class
    HTML学习笔记 -- XHTML
    HTML学习笔记 -- 速查列表
    HTML学习笔记 -- <div> 和<span>
    HTML学习笔记 -- HTML <head>
    HTML学习笔记 -- HTML 中 href、src 区别
  • 原文地址:https://www.cnblogs.com/luckyflower/p/3783848.html
Copyright © 2020-2023  润新知