Bootstrap基本插件学习笔记之折叠(22)
(编辑:jimmy 日期: 2026/5/2 浏览:3 次 )
折叠(Collapse)插件可以很容易地让页面区域折叠起来。
0x01 例子
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="/UploadFiles/2021-04-02/jquery.min.js">效果如下:
这里有个新的属性:data-parent ,用于把折叠面板(accordion)的 id 添加到要展开或折叠的组件的链接上。
0x02 JS方式
也可以通过JS代码来动态显示:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="/UploadFiles/2021-04-02/jquery.min.js">效果如下:
初始全部是折叠状态,因为toggle初始化均为false。
如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:Bootstrap基本插件学习笔记之轮播幻灯片(23)
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。

