jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – 具有可折叠页脚的引导程序布局大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我想有一个像下面这样的布局.顶部标题(非粘性)和底部通知面板.我们计划在通知面板中显示可滚动文本.我们还希望让用户将此面板折叠起来,以便他只能在他想要的时候看到这个.

>如何使用bootstrap设计这样的布局(我使用的是最新版本)
>通知面板的高度可以通过CSS修复.

我尝试了以下标记,但我遇到了以下问题.

>我无法为底部div设置百分比高度(以支持不同的监视器)
>@R_876_6618@让它可折叠(可能是自举手风琴?).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>


<div class="row">
    <div class="col-md-12">
        <h3>heading</h3><hr/>
    </div>
</div>
<div class="footer navbar-fixed-bottom">
        <h4>Notifications</h4><hr/>
</div>

解决方法

您也可以使用bootstraps collapse

这是一个简单的例子

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>


<div class="row">
    <div class="col-md-12">
        <h3>heading</h3><hr/>
    </div>
</div>
<a class="btn btn-priMary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Toggle
</a>
<div id="collapseExample" class="footer navbar-fixed-bottom">
<h4>Notifications</h4><hr/>
</div>

大佬总结

以上是大佬教程为你收集整理的jquery – 具有可折叠页脚的引导程序布局全部内容,希望文章能够帮你解决jquery – 具有可折叠页脚的引导程序布局所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。