Question

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

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

我尝试了以下标记，但我遇到了以下问题。

我无法为底部div设置百分比高度（以支持不同的显示器）
我不知道怎么让它折叠起来（可能是自举手风琴？）。

＆＃13;

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

＆＃13;

enter image description here

Answer 1

您也可以使用bootstraps collapse

这是一个简单的例子：

＆＃13;

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

＆＃13;

Answer 2

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

.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切换为箭头或其他内容，以便用户知道他们可以再次点击它以重新打开通知栏。

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

3 个答案: