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

Question

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

1. 如何使用引导程序设计这样的布局（我使用的是最新版本）
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

您也可以使用引导程序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>

Answer 2

我使用引导程序 accordion 而不是 collapse 因为我想让用户点击标题 (div) 而不是任何链接或按钮。请看附上的代码sn-p。

.bottom0.panel-group  {
margin-bottom: 0;
}

.notifications-scroll-area {
    height: 150px;
	position: relative;
	overflow: auto;
}

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

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<div class="container-fluid body-content">
  <div class="row">
    <div class="col-md-12">
      <h3>Admin Home</h3>
    </div>
  </div>
  <div class="row">
    <div class="col-md-3 col-md-offset-9">
      <a href="@Url.Action(" NewConfiguration ")" class="btn btn-link"><span class="text-uppercase"><i class="fa fa-play-circle"></i>&nbsp;New Configuration</span></a>
      <a href="#" class="btn btn-link"><span class="text-uppercase"><i class="fa fa-cog"></i>&nbsp;Manage Configuration</span></a>
      <hr />
    </div>
  </div>
  <div class="footer navbar-fixed-bottom">
    <div class="panel-group bottom0" id="accordion" role="tablist" aria-multiselectable="true">
      <div class="panel panel-primary">
        <div class="panel-heading" role="tab" id="headingOne" style="cursor: pointer" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          <h4 class="panel-title">
                            <i class="fa fa-info"></i>&nbsp;&nbsp;Notifications 
                        </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse notifications-scroll-area" role="tabpanel" aria-labelledby="headingOne">
          <div class="panel-body ">
            <table class="table table-striped table-hover table-condensed">
              <thead>
                <tr>
                  <th>TimeStamp</th>
                  <th>Type</th>
                  <th>Message</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>22/11/2014</td>
                  <td><span class="label label-info">INFO</span>
                  </td>
                  <td>Execution started.</td>
                </tr>
                <tr>
                  <td>22/11/2014</td>
                  <td><span class="label label-success">SUCCESS</span>
                  </td>
                  <td>Execution completed.</td>
                </tr>
                <tr>
                  <td>22/11/2014</td>
                  <td><span class="label label-danger">ERROR</span>
                  </td>
                  <td>Execution failed.</td>
                </tr>
                <tr>
                  <td>22/11/2014</td>
                  <td><span class="label label-info">INFO</span>
                  </td>
                  <td>Execution started.</td>
                </tr>

              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

您可以使用 Javascript/jQuery 来隐藏它。只需创建一个 ID 为“notifications_toggle”的元素（可能是“X”或其他元素）并将其用作 javascript。

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

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

这里有更多关于 jQuery toggle() 的信息

http://api.jquery.com/toggle/

你也可以使用 show() / hide()

http://www.w3schools.com/jquery/jquery_hide_show.asp