Article Directory
Bootstrap panels (Panels)
This chapter will explain the Bootstrap panel (Panels). The panel component is used to insert DOM components into a box. To create a basic panel, just add class .panel and class .panel-default to the <div> element, as shown in the following example:
<div class="panel panel-default">
<div class="panel-body">
这是一个基本的面板
</div>
</div>
The result looks like this:
panel title
We can add panel titles in two ways:
- Adding a heading container to a panel is very simple using the .panel-heading class. to easily add a heading container to your panel.
- Use <h1>-<h6> with .panel-title class to add pre-styled headings.
The following example demonstrates both methods:
<div class="panel panel-default">
<div class="panel-heading">
不带 title 的面板标题
</div>
<div class="panel-body">
面板内容
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
带有 title 的面板标题
</h3>
</div>
<div class="panel-body">
面板内容
</div>
</div>
The result looks like this:
panel footnote
We can add a footer to the panel, just put the button or paratext in a <div> with class .panel-footer. The following example demonstrates this:
<div class="panel panel-default">
<div class="panel-body">
这是一个基本的面板
</div>
<div class="panel-footer">面板脚注</div>
</div>
The result looks like this:
Note: Panel footers do not inherit color and borders from contextually colored panels because it is not the foreground content.
Panels with contextual colors
Use the context status classes panel-primary, panel-success, panel-info, panel-warning, panel-danger to set up contextually colored panels, examples are as follows:
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">面板标题</h3>
</div>
<div class="panel-body">
这是一个基本的面板
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">面板标题</h3>
</div>
<div class="panel-body">
这是一个基本的面板
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">面板标题</h3>
</div>
<div class="panel-body">
这是一个基本的面板
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">面板标题</h3>
</div>
<div class="panel-body">
这是一个基本的面板
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">面板标题</h3>
</div>
<div class="panel-body">
这是一个基本的面板
</div>
</div>
The result looks like this:
panel with form
In order to create a borderless table in the panel, we can use class .table in the panel. Assuming there is a <div> containing .panel-body, we can add an extra border to the top of the table to separate it. If there is no <div> containing .panel-body, the component moves from the panel header to the table without interruption.
The following example demonstrates this:
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">面板标题</h3>
</div>
<div class="panel-body">
这是一个基本的面板
</div>
<table class="table">
<th>产品</th><th>价格 </th>
<tr><td>产品 A</td><td>200</td></tr>
<tr><td>产品 B</td><td>400</td></tr>
</table>
</div>
<div class="panel panel-default">
<div class="panel-heading">面板标题</div>
<table class="table">
<th>产品</th><th>价格 </th>
<tr><td>产品 A</td><td>200</td></tr>
<tr><td>产品 B</td><td>400</td></tr>
</table>
</div>
The result looks like this:
panel with list group
We can include listgroups in any panel by adding .panel and .panel-default classes to the <div> element to create the panel and add the listgroup inside the panel. You can learn how to create list groups from the chapter List Groups.
<div class="panel panel-default">
<div class="panel-heading">面板标题</div>
<div class="panel-body">
<p>这是一个基本的面板内容。这是一个基本的面板内容。
这是一个基本的面板内容。这是一个基本的面板内容。
这是一个基本的面板内容。这是一个基本的面板内容。
这是一个基本的面板内容。这是一个基本的面板内容。
</p>
</div>
<ul class="list-group">
<li class="list-group-item">免费域名注册</li>
<li class="list-group-item">免费 Window 空间托管</li>
<li class="list-group-item">图像的数量</li>
<li class="list-group-item">24*7 支持</li>
<li class="list-group-item">每年更新成本</li>
</ul>
</div>
The result looks like this:
