创新互联Bootstrap教程：Bootstrap 面板（Panels）
Bootstrap 面板（Panels）
本章将讲解 Bootstrap 面板（Panels）。面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向
实例
<
div
class
=
"
panel panel-default
"
>
<
div
class
=
"
panel-body
"
>
这是一个基本的面板
div
>
div
>
尝试一下 »
结果如下所示：
面板标题
我们可以通过以下两种方式来添加面板标题：
- 使用 .panel-heading class 可以很简单地向面板添加标题容器。
- 使用带有 .panel-title class 的
-
来添加预定义样式的标题。
下面的实例演示了这两种方式：
实例
<
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
>
尝试一下 »
结果如下所示：
面板脚注
我们可以在面板中添加脚注，只需要把按钮或者副文本放在带有 class .panel-footer 的
实例
<
div
class
=
"
panel panel-default
"
>
<
div
class
=
"
panel-body
"
>
这是一个基本的面板
div
>
<
div
class
=
"
panel-footer
"
>
面板脚注
div
>
div
>
尝试一下 »
结果如下所示：
面版脚注不会从带语境色彩的面板中继承颜色和边框，因为它不是前景中的内容。
带语境色彩的面板
使用语境状态类 panel-primary、panel-success、panel-info、panel-warning、panel-danger，来设置带语境色彩的面板，实例如下：
实例
<
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
>
尝试一下 »
结果如下所示：
带表格的面板
为了在面板中创建一个无边框的表格，我们可以在面板中使用 class .table。假设有个
下面的实例演示了这点：
实例
<
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
>
尝试一下 »
结果如下所示：
带列表组的面板
我们可以在任何面板中包含列表组，通过在
实例
<
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
>
尝试一下 »
结果如下所示：
文章名称：创新互联Bootstrap教程：Bootstrap 面板（Panels）
文章地址：http://www.mswzjz.cn/qtweb/news42/390842.html
攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能