Jquery 带可折叠页脚的引导布局

我想有一个布局如下。顶部标题（非粘性）和底部通知面板。我们计划在通知面板中显示可滚动文本。我们还想让用户把这个面板折叠起来，这样他只能在他想要的时候看到这个

如何使用bootstrap设计这样的布局（我使用的是最新版本）

通知面板的高度可以通过css固定

我尝试了以下标记，但我有以下问题

我无法设置底部div的百分比高度（以支持不同的监视器）

我不知道如何使其可折叠（引导手风琴可能是？）

标题

通知

您可以使用Javascript/jQuery来隐藏此内容。只需创建一个ID为“notifications\u toggle”的元素（可能是“X”之类的），并将其用作javascript

$('#notifications_toggle').click(function(){
  $('.scrollable_notifications').toggle();
});

您还可以使用javascript将x切换为箭头或其他内容，以便用户知道可以再次单击它以重新打开通知栏

以下是关于jquerytoggle（）的更多信息

您还可以使用show（）/hide（）

---

您也可以使用引导

下面是一个简单的例子：

标题

通知

我使用bootstrap

accordion

而不是

collapse

，因为我想让用户点击标题（div），而不是任何链接或按钮。请参阅所附的代码段

.bottom0.panel-group{
页边距底部：0；
}
.通知滚动区{
高度：150像素；
位置：相对位置；
溢出：自动；
}

管理之家

通知
时间戳
类型
消息
22/11/2014
信息
执行开始了。
22/11/2014
成功
执行完毕。
22/11/2014
错误
执行失败。
22/11/2014
信息
执行开始了。

这是可行的，但是因为问题被标记为Twitter引导，所以第一个答案涉及“自定义javascript”。除非您在应用程序的其他地方使用引导崩溃，我主张删除Bootstrap的这一部分，并使用自定义javascript尽可能保持应用程序的轻量级。我只是不喜欢Bootstrap/前端框架。加快原型的速度对他们来说是有好处的；不过，我认为它们会让开发人员变得懒惰。当然，他确实指定了“在引导中”，而且如果您打算在普通jQuery中启用一些切换功能，那么创建一个可折叠类并基于该类和一些数据属性添加它切换功能会更加枯燥（请注意，引导就是这样做的）不确定我的函数是干的（没有重复）；但是，如果他已经在使用引导，那么他可能更容易实现引导的折叠。要在单击标题（class=“panel heading”）时折叠，请在div上放置

数据切换

，而不是按钮。太棒了！