网站建设服务商_凡科商城官网_线上商城_商标免费设计在线生成_微商城
当前位置:建站首页 > 新闻资讯 > 网站优化 >

微信免费小程序_bootstrap手风琴折叠示例代码分享

发表日期:2021-01-12 11:06文章编辑:jianzhan浏览次数: 标签:    

bootstrap手风琴折叠示例代码分享       这篇文章主要为大家详细介绍了bootstrap手风琴折叠示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
meta http-equiv="X-UA-Compatible" content="IE=edge" meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" title XXX /title link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" link rel="stylesheet" href="css/main.css" !--[if lt IE 9] script src="5shiv.min.js" /script script src="lib/respond/respond.min.js" /script ![endif]-- /head body !--基本实例-- button data-toggle="colla凡科抠图e" data-target="#content" Bootstrap /button div id="content" !-- div id="content" -- div Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/HTML 框架。目 前,Bootstrap 最新版本为 3.0 。 /div /div !--1、折叠部分设置一个id 2、在被点击的连接处引入 a href="#colla凡科抠图eOne" rel="external nofollow" rel="external nofollow" rel="external nofollow" 3、还是在被点击的连接处加入 date-toggle="colla凡科抠图e" 4、写完之后第一次不正常,所以需要在折叠部分写上 "panel-group" !–大容器– div !–这个表示第一个整块儿的– div !–第一部分,被点击部分– a href="#colla凡科抠图eOne" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="colla凡科抠图e" 1号连接 /a /h4 /div div id="colla凡科抠图eOne" !–第二部分,折叠部分– div 1号内容 /div /div /div div !–这个表示第一个整块儿的– div !–第一部分,被点击部分– a href="#colla凡科抠图eTwo" rel="external nofollow" rel="external nofollow" data-toggle="colla凡科抠图e" 2号连接 /a /h4 /div div id="colla凡科抠图eTwo" !–第二部分,折叠部分– div 2号内容 /div /div /div div !–这个表示第一个整块儿的– div !–第一部分,被点击部分– a href="#colla凡科抠图eThree" rel="external nofollow" rel="external nofollow" data-toggle="colla凡科抠图e" 3号连接 /a /h4 /div div id="colla凡科抠图eThree" !–第二部分,折叠部分– div 3号内容 /div /div /div /div -- !--点击某一展开,其他的都自动折叠 1、给大容器加一个id id="accordion" 2、给每一个被点击链接加上一个 data-parent="#accordion" div id="accordion" !--大容器-- div !--这个表示第一个整块儿的-- div !--第一部分,被点击部分-- a href="#colla凡科抠图eOne" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="colla凡科抠图e" data-parent="#accordion" 1号连接 /a /h4 /div div id="colla凡科抠图eOne" !--第二部分,折叠部分-- div 1号内容 /div /div /div div !--这个表示第一个整块儿的-- div !--第一部分,被点击部分-- a href="#colla凡科抠图eTwo" rel="external nofollow" rel="external nofollow" data-toggle="colla凡科抠图e" data-parent="#accordion" 2号连接 /a /h4 /div div id="colla凡科抠图eTwo" !--第二部分,折叠部分-- div 2号内容 /div /div /div div !--这个表示第一个整块儿的-- div !--第一部分,被点击部分-- a href="#colla凡科抠图eThree" rel="external nofollow" rel="external nofollow" data-toggle="colla凡科抠图e" data-parent="#accordion" 3号连接 /a /h4 /div div id="colla凡科抠图eThree" !--第二部分,折叠部分-- div 3号内容 /div /div /div /div script src="lib/jquery/jquery.js" /script script src="lib/bootstrap/js/bootstrap.js" /script script src="js/main.js" /script /body /html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


相关新闻