位置: 编程技术 - 正文

Bootstrap每天必学之折叠(bootstrap基础教程)

编辑:rootadmin

推荐整理分享Bootstrap每天必学之折叠(bootstrap基础教程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:bootstrap要学多久,bootstrap怎么学,bootstrap怎么学,bootstrap要学到什么程度,bootstrap快速入门,bootstrap学习,bootstrap基础教程,bootstrap学习,内容如对您有帮助,希望把文章链接给更多的朋友!

本文主要来学习一下JavaScript插件--折叠。1、过渡效果 关于过渡效果对于简单的过渡效果,只需将transition.js和其它JS文件一起引入即可。如果你使用的是编译(或压缩)好的bootstrap.js文件,就无需再单独将其引入了。What's insideTransition.js是针对 is a basic helper for transitionEnd事件的一个基本助手工具,也是对CSS过渡效果的模拟。它被其它插件用来检测当前浏览器对CSS过渡效果是否支持。2、折叠对为支持折叠功能的组件,例如accordions和导航,赋予基本样式和灵活的支持。

插件依赖

折叠插件依赖过渡效果插件。

案例使用折叠插件,通过扩展panel组件从而构建了一个简单的accordion组件。先来看一下效果。

接下来看一下代码的实现。

Bootstrap每天必学之折叠(bootstrap基础教程)

第一步:首先最外面那层panel-group这层下面包括几个小组。第二步:看一下几个简单的组

通过代码也比较清楚的可以看出一个panel的结构。panel-header和pandl-body,然后panel-header里面可以包含标题,链接。通过链接和panel-body相连。第三步:你可以发现在panel-group中有一个id="accordion",然后下面每个标题下链接中有个data-parent="#accordion"。如果去掉的话,那么效果就是点击其他链接后,原来的panel并不会再缩起来了。你可以通过另一个方式来展示折叠的效果。

用法折叠插件通过几个简单的类来控制样式.collapse 隐藏内容.collapse in 显示内容.collapsing。 It is added when the transition starts, and removed when it finishes意思大概可能就是折叠被添加后过渡效果就有了,然后如果被移除了它就结束了。通过data属性仅仅通过向页面元素添加data-toggle="collapse" 和data-target就可以为其赋予控制可折叠页面元素的能力。data-target属性接受一个CSS选择器作为其控制对象。请确保为可折叠页面元素添加collapse class。如果你希望可折叠页面元素的默认状态是展开的,请添加in class。为了给一组可折叠页面元素添加控制器,添加data-parent="#selector"即可。请参考上面的例子即可。通过JavaScript

来看一下上面的效果

方法赋予页面元素可折叠功能。接受一个可选的object作为参数。$("#demo").collapse({toggle: false})这样元素在初始化的时候会是展开的。1.collapse('toggle')展示或隐藏一个可折叠的页面元素。2.collapse('show')展示一个可折叠页面元素。3.collapse('hide')隐藏一个可折叠页面元素。事件Bootstrap中的折叠插件对外暴露了一组可以监听的事件。

这样就为元素绑定了隐藏时的事件。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

标签: bootstrap基础教程

本文链接地址:https://www.jiuchutong.com/biancheng/373433.html 转载请保留说明!

上一篇:JavaScript几种数组去掉重复值的方法推荐(javascript几种数据类型)

下一篇:javascript中去除数组重复元素的实现方法【实例】(js去除特殊字符)

  • 北京市增值税发票
  • 应收利息增加会计分录
  • 小微企业利润表模板
  • 业务招待费扣除基数的收入包括哪些
  • 纳税表不得抵扣什么意思
  • 网上报税超过了时间还能报吗
  • 2018年度企业所得税税率表
  • 个体户对公账户怎么办理
  • 抵扣认证发票时间
  • 个体工商户生产经营所得税率
  • 分公司清算和总公司清算
  • 收到技术服务费计入什么科目
  • 个体广告用去税务报账吗?
  • 发票抬头写个人有效吗
  • 公司名下的车怎么报废
  • 单位有临时工工资怎么发
  • 保理利率多少可以买房
  • 公司理财取得的成果
  • 审计调整后如何入账
  • 固定资产已入库款项已付次月开发票何时记提折旧
  • 工会账户销户
  • 增值税进项税额抵扣期限最新
  • 小企业成本核算方法移动加权平均法
  • 配股的基本含义是什么
  • 如何配置环境变量windows
  • 复制粘贴快捷键失效了怎么回事
  • 参保各险种人数统计
  • win11安卓子系统在哪打开
  • 收到发票后补付什么意思
  • php ftp上传文件
  • PHP:stream_get_transports()的用法_Stream函数
  • linux系统网络日志
  • Win7系统僵尸部队4存档丢失的解决方法
  • un system
  • (二) Vue3 + Element-Plus 实现动态菜单栏
  • 职工住院的护理费标准
  • “Property or method “***“ is not defined on the instance but referenced during render.”报错的原因及解决方案
  • 记账凭证的总账科目是什么
  • idea如何运行springboot项目
  • elementui input无法输入
  • 论文implications
  • #cookie jar
  • 不缴纳增值税
  • 有哪些员工福利
  • 报销差旅费属于什么现金流量项目
  • 织梦相关文章调用
  • sql无法运行
  • mysql的服务器
  • 未交增值税借方表示什么意思
  • sql server 用法
  • 房屋租赁不开发票需要交税吗
  • 补助资金如何做账
  • 个人所得税多计算了一个月工资怎么办
  • 一次性补缴一年社保
  • 电子银行承兑汇票操作流程
  • 预付账款的会计处理
  • 会议服务公司名称大全
  • mysql创建数据库的操作步骤
  • linux rpm文件怎么安装
  • win8破解密码开机密码
  • win8.1安装过程
  • win7使用率
  • 装win8还是win10
  • PQIBrowser.exe是什么进程 PQIBrowser进程查询
  • 32位win7安装
  • linux内核怎么使用
  • 程序员基本入门知识
  • javascript字符串操作函数
  • pycharm安装教程2020.2
  • xcopy命令怎么用
  • vue分页查询
  • js判断页面是否跳出弹窗
  • shell脚本clear
  • android事件处理方式有几种
  • android设置无标题
  • js link global
  • 高速通行费发票查验
  • 新能源免税申报,车辆类型怎么填
  • 完税证明可以自己在官网打印吗
  • 烟丝和烟有什么区别
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设