具有可折叠页脚的引导程序布局

Question

我想有一个像下面这样的布局.顶部标题(非粘性)和底部通知面板.我们计划在通知面板中显示可滚动文本.我们还希望让用户将此面板折叠起来,以便他只能在他想要的时候看到这个.

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

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

1. 我无法为底部div设置百分比高度(以支持不同的监视器)
2. 我不知道如何使它可折叠(可能是自举手风琴？).

<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>

Answer 1

你也可以使用bootstraps 崩溃

这是一个简单的例子:

<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>