添加 Bootstrap 面板的组件

• 下载源代码 - 564.4 KB

引言

Bootstrap 面板类允许您在网页上创建一个带边框的区域。面板类为您提供标题区域、正文区域和页脚区域。大多数设计师会在页脚区域添加按钮，以便对面板中的信息执行不同的操作。有时，他们会在面板的主体中添加额外的下拉菜单或按钮，以重新加载数据或采取行动。虽然这些方法有效，但有时您不想用这些操作占用那些空间。相反，您可以将面板的标题区域用于这些附加功能。本文将向您展示如何实现这一点。

添加重新加载按钮

您将学习的第一个示例是如何在面板的最右侧区域添加一个“reload”按钮，如图 1 所示。

要将此新按钮添加到标题，请在 <h1> 或用于面板标题的任何 HTML 元素中创建一个锚标记。我添加了 Bootstrap 中的一个字形以及“Reload”一词。然后，我向该 anchor 标记添加了一个名为 panel-right 的额外类，如下面的代码所示。

<div class="panel panel-primary">
  <div class="panel-heading">
    <h1 class="panel-title">
      <span class="glyphicon glyphicon-music">
      </span>
        &nbsp;CountryMusic
      <a href="#" 
         class="panel-right glyphicon glyphicon-random">
         &nbsp;Reload
      </a>
    </h1>
  </div>
  <div class="panel-body">
     // Other HTML here
  </div>
</div>

“panel-right”类非常简单，负责面板右侧按钮的外观。您首先在按钮周围添加一个边框并修改边框半径。添加一个 margin-top 来将按钮定位在正确的位置。根据需要修改填充和字体大小。最后，将 float 设置为 right，以便按钮始终位于面板的右侧。关闭锚标记上的所有 text-decoration，这样按钮上就不会出现下划线。下面显示的所有样式都将放入一个 *.CSS* 文件中，然后您可以将其添加到任何想要使用面板附加功能的页面。

.panel-right {
  border: 0.05em solid lightgray;
  border-radius: 0.25em 0.25em;
  margin-top: -0.2em;
  padding: 0.3em;
  font-size: 0.9em;
  float: right;
}

  .panel-title a,
  .panel-title a:active,
  .panel-title a:visited {
    text-decoration: none;
  }

面板中的下拉菜单

您可以添加到面板的另一个附加功能示例是下拉选择器，如图 2 所示。

添加下拉菜单与上一个示例中的简单按钮略有不同。您需要在 panel-title 中有更多的空间，因此不要使用 <h1> 元素，而使用 <div>。这在 panel-title 中提供了更多的空间。此外，您不能将 div 标签嵌套在 h1 中，因此我们必须使用这个外部 div 元素。在 <div> 元素中，放置另一个 <div> 以包含 Bootstrap 类“dropdown”和 panel-right 类。创建您正常的下拉按钮，如下面的示例所示

<div class="panel panel-primary">
  <div class="panel-heading">
    <div class="panel-title">
      <span class="glyphicon glyphicon-music">
      </span>
      &nbsp;
      <span id="genre">Country Music</span>
      <div class="dropdown panel-right">
        <button class="btn btn-success"
                id="selectButton" 
                data-toggle="dropdown">
          Change Genre&nbsp;
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" id="ulGenres">
          <li><a href="#">Jazz</a></li>
          <li><a href="#">Country</a></li>
          <li><a href="#">Rock</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="panel-body">
     // Other HTML here
  </div>
</div>

您用于 panel-right 的样式与上一个示例略有不同。您需要不同的 margin-top，并且需要关闭边框。此外，还添加了一些额外的样式，如下面的代码所示。

<style>
  .panel-right {
    border: none; 
    margin-top: -0.65em; 
    padding: 0.3em;
    font-size: 0.9em;
    float: right;
  }

  .panel-title a,
  .panel-title a:active,
  .panel-title a:visited {
    text-decoration: none;
  }
</style>

当您从下拉选择器中选择一个项目时，您应该更改面板上的标题。您可以使用一些 jQuery 代码来完成此操作。在页面的底部添加以下脚本，以便在用户单击下拉选择器中的项目时修改面板标题中的文本。

<script>
  $(document).ready(function () {
    $("#ulGenres li a").on("click", function () {
      var text = $(this).text();
      $("#genre").text(text + ' Music');

      // TODO: Do something to change the HTML table here
    });
  });
</script>

摘要

在本博文中，您学习了如何向 Bootstrap 面板类添加一些附加功能。使用面板的右侧是一种很好的方式，可以让您的用户在面板中执行操作，而无需占用面板本身内的宝贵空间。