Bootstrap——手机端手风琴效果实现

最新推荐文章于 2023-06-16 16:55:31 发布
最新推荐文章于 2023-06-16 16:55:31 发布
阅读量1.3k 收藏 3
点赞数 1
分类专栏： bootstarp html+css 文章标签： bootstrap 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nanchen_J/article/details/125197397
版权

先看效果

 这种手风琴效果可以直接通过bootstrap进行制作

代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/footer.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/nav.css">
    <script src="./js/rem7.5.js"></script>
    <title>页面二</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./js/jquery-3.5.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
</head>

<body>
    <div class="panel-group" id="accordion">
        <div class="panel ">
            <div class="panel-heading">
                <!-- 主盒子样式panel-title -->
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                        专家团队
                    </a>
                </h4>
            </div>
            <!-- in默认展开 -->
            <div id="collapseOne" class="panel-collapse collapse ">
                <div class="panel-ul">
                    <ul>
                        <li>
                            <a href="###">
                                重点研究方向
                            </a>
                        </li>
                        <li><a href="###">重点工程项目</a></li>
                        <li><a href="###">数字医学白皮书</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="panel " style="margin-top: 0px">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                        科研与转化
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-ul">
                    <ul>
                        <li><a href="###">重点研究方向</a></li>
                        <li><a href="###">重点工程项目</a></li>
                        <li><a href="###">数字医学白皮书</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="panel " style="margin-top: 0px">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                        教育与讲座
                    </a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-ul">
                    <ul>
                        <li><a href="###">重点研究方向</a></li>
                        <li><a href="###">重点工程项目</a></li>
                        <li><a href="###">数字医学白皮书</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="panel ">
            <div class="panel-heading">
                <!-- 主盒子样式panel-title -->
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
                        新闻中心
                    </a>
                </h4>
            </div>
            <!-- in默认展开 -->
            <div id="collapseFour" class="panel-collapse collapse ">
                <div class="panel-ul">
                    <ul>
                        <li><a href="###">重点研究方向</a></li>
                        <li><a href="###">重点工程项目</a></li>
                        <li><a href="###">数字医学白皮书</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="panel ">
            <div class="panel-heading">
                <!-- 主盒子样式panel-title -->
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseFive">
                        关于我们
                    </a>
                </h4>
            </div>
            <!-- in默认展开 -->
            <div id="collapseFive" class="panel-collapse collapse ">
                <div class="panel-ul">
                    <ul>
                        <li>
                            <a href="###">
                                重点研究方向
                            </a>
                        </li>
                        <li><a href="###">重点工程项目</a></li>
                        <li><a href="###">数字医学白皮书</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

css样式

#accordion {
    padding: 0;
    margin: 0;
}

.panel-title a {
    background: url("../image/daohang/＞.png") right .46rem center no-repeat;
    background-size: .33rem .2rem;
    display: block;
    font-size: .2rem;
    /* padding: .3rem; */
    text-decoration: none;
    width: 6.9rem;
    margin: 0 auto;
    height: 1.1rem;
    line-height: 1.1rem;
    padding-left: .47rem;
    box-sizing: border-box;
    border-bottom: .02rem solid #E7E7E7;
    font-size: .3rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    color: #292929;

}

a:link {
    text-decoration: none;
}
a:hover, a:focus{
    text-decoration:none !important;
}

.panel-heading {
    padding: 0;
    margin: 0;
}

.panel-ul ul {
    list-style: none;
    text-decoration: none;
    width: 6.9rem;
    margin: 0 auto;
}

.panel-ul ul li {
    width: 6.9rem;
    height: 1.1rem;
    border-bottom: .02rem solid #E7E7E7;
    padding-left: .62rem;
}

.panel-ul ul li a {
    width: 6.9rem;
    height: 1.1rem;
    display: inline-block;
    line-height: 1.1rem;
    font-size: .3rem;
    font-family: SourceHanSansCN;
    font-weight: 400;
    color: #292929;
}

.panel-group .panel+.panel {
    margin-top: 0 !important;
}

.panel-heading {
    padding: 0 !important;
}

Southern Wind
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Bootstrap实现手风琴效果
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
05-21 9221
用Bootstrap实现手风琴效果中，其实主要用到的就是一些折叠插件。
bootstrap实现手风琴功能(树形列表)
weixin_34387284的博客
02-23 605
首先把架包拷进项目，然后在页面中引进css,js <script src="js/jquery/jquery-2.1.1.min.js"></script> <script src="js/bootstrap/bootstrap.min.js"></script> <link href="css/bootstr...
HTML5 Bootstrap响应式手机导航下拉菜单代码
06-05
一款简洁实用基于HTML5 Bootstrap实现的响应式手机导航下拉菜单代码，Bootstrap自适应电脑手机端导航下拉菜单网页特效。
Bootstrap的使用方法，自适应手机页面
热门推荐
北斗星的爱886的博客
05-18 1万+
什么是 Bootstrap？ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 为什么使用 Bootstrap？ 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。 浏览器支持：所有的主流浏览器都支持 Bootstrap。 Bootstrap目录结构 bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.c
bootstrap+jquery应用手机自适应兼容
最新发布
qq_39951524的博客
06-16 585
所以在对这些资源文件导入方式封装时需要注意顺序，该报错情况只需把jquery放在bootstrap的上面即可（先引入jquery,再引入bootstrap）工作几年，略有心得，然很少整理成文，平常工作中浏览了不少道友的好文章，受益良多。顾也开始写一些文章， 希望能与各位道友分享进步！由于bootstrap的js文件也要。
手机端实现Bootstrap简单图片轮播效果
09-01
在这个场景中，我们探讨的是如何在手机端利用Bootstrap实现一个简单的图片轮播效果。首先，我们需要理解Bootstrap的轮播组件（Carousel）的基本结构和工作原理。 Bootstrap的轮播组件是一个可滑动的内容容器，通常...
Bootstrap 手风琴菜单的实现代码
08-31
主要介绍了Bootstrap 手风琴菜单的实现代码,需要的朋友可以参考下
Bootstrap漂亮的垂直手风琴列表效果.zip
07-04
这是一款基于Bootstrap的漂亮垂直手风琴列表效果。该垂直手风琴列表代码简单，样式新颖，值得推荐。
bootstrap手风琴折叠示例代码分享
08-30
Bootstrap 手风琴折叠示例代码主要用于实现折叠式菜单的效果。下面是一个简单的示例代码： ```html Bootstrap Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto ...
全面解析Bootstrap手风琴效果
09-03
主要介绍了全面解析Bootstrap手风琴效果，需要的朋友可以参考下
简洁的Bootstrap手风琴下拉列表美化效果
12-12
这是一款简洁的Bootstrap手风琴下拉列表美化效果。该效果在原生bootstrap Accordion的基础上，通过CSS样式来对它进行美化，生成简洁时尚的手风琴下拉列表效果。
美观实用的Bootstrap垂直手风琴特效
07-10
美观实用的Bootstrap垂直手风琴特效
一个炫酷的Bootstrap导航菜单
08-31
主要为大家详细介绍了一个炫酷的Bootstrap导航菜单的制作方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jquery 特效，实现可左右移动的tab效果
03-16
也是在网上找的，做项目中用到了。感觉还不错，拿来和大家分享。
jQuery实现垂直半透明手风琴特效代码分享
10-23
是一款jquery hover抽屉式导航图片展开收缩切换特效代码，用户还可以自定义对应幻灯片的标题与文字说明，是一款非常实用的幻灯片特效源码。
bootstrap手风琴_快速提示：如何自定义Bootstrap 4的手风琴组件
Web design 教程小屋
07-07 920
在这个快速技巧中，我们将构建Bootstrap 4手风琴，通过一些CSS更改来定制它，并应用一些JavaScript自定义。 让我们开始吧！ 注意 ：本教程假定您对Bootstrap 4 有所了解。 什么是Bootstrap组件？ Bootstrap具有大量（但不占绝大多数）的组件集合，您可以在项目中使用它们。 其中包括警报，徽章，面包屑，按钮，卡片，旋转木马-清单不胜枚举！ 在某些情...
Bootstrap Collapse（手风琴）插件添加加减号、三角形图标
Geek-Haoyu
06-25 3527
为Bootstrap Collapse（手风琴）插件添加加减号、三角形图标
bootstrap手风琴折叠
杨哥的博客
05-22 5083
手风琴折叠 XXX Bootstrap --> Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/
bootstrap实现手风琴效果
05-11
手风琴效果可以通过 Bootstrap 的 Collapse 组件来实现。下面是一个简单的示例代码： ```html 手风琴1 内容1 手风琴2 内容2 ``` 在这个例子中，我们使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Southern Wind

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值