位置: 编程技术 - 正文

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去除特殊字符)

  • 未交增值税和应交增值税科目怎么调整
  • 增值税加计抵减怎么做账
  • 二手房交易需要购房发票吗
  • 应交税费增值税明细账
  • 制造费用月末不可能有余额
  • 货架折旧年限
  • 开具发票时如何选择对应的商品分类编码?
  • 贷款逾期的本金怎么计算
  • 利税总额计算公式表
  • 未进行账务处理违反什么
  • 购买国税金税卡年费应该怎么做账务处理?
  • 公司无公务用车
  • 审核费用发票需要发票吗
  • 计提附加税的会计分录
  • 支付印花税计入什么科目
  • 长期股权投资佣金手续费计入
  • 房屋维修开的发票有哪些
  • 自然人收税管理
  • 支付短期借款利息
  • 税务票开错了怎么办理退税
  • 跨年得退货还用开负数发票吗?
  • 采购过程中产生的物流成本案例分析
  • 微软发布新windows
  • vue3如何
  • 速动比率计算公式多少合适
  • 软件开发过程rup
  • 收到的增值税专用发票如何认证
  • php支付接口开发
  • win11电脑怎么设置开机密码
  • 空调拆卸安装怎么找师傅
  • 企业盘盈资产开什么发票
  • 雷尼尔国家公园攻略
  • python抓取淘宝店铺商品
  • PHP自定义函数返回两个数中大的那个
  • 银行转账费用试算失败什么意思
  • typescript is as
  • 给兼职员工的劳动补贴
  • python中datetime用法
  • 进项税额转出加计抵减会计分录
  • 自产农产品免征个人所得税吗
  • 填写蓝字专用发票信息
  • 间接费用允许调整吗
  • 报销宽带费属于什么费用
  • 开票软件里税收分类编码在哪更新
  • 一次性伤残补助金怎么查询进度
  • PostgreSQL中调用存储过程并返回数据集实例
  • 免税农产品范围目录的文件
  • sql中多条件查询
  • 研发费用辅助账怎么做
  • 律师事务所的所属行业是什么
  • 安全生产费如何计量
  • 集团公司收到的上级工作秘密比照国家
  • 积分兑换如何做表格分析
  • 冲销以前年度主营业务成本
  • 借款利息如何记账
  • 科目汇总表里面要填累计折旧吗
  • 建账有哪些步骤,每个步骤有哪些注意事项
  • 修改mysql字段默认值
  • win7怎么把桌面图标显示出来
  • 电脑svchost占用cpu很大
  • fedora win10
  • freebsd启动网卡
  • mac所有窗口最小化
  • windows1021h2更新
  • Win10 build 10240有"启用快速启动"功能吗?如何开启和关闭这个功能?
  • 开机需要两次
  • win7系统电脑无声音
  • 持久化存储数据的方式
  • recycleview使用
  • jquery上滑下滑
  • JavaScript中的数据类型分为两大类
  • 安卓手机管家
  • [置顶]游戏名 TentacleLocker
  • unity example project
  • python 字符串
  • python解决方案与程序有什么不同
  • 自定义水印相机
  • 12366纳税服务热线工作时间
  • 税务副处级竞争上岗笔试题
  • 车辆购置税纳税申报表下载
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设