Bootstrap 面板（Panels）

最新推荐文章于 2023-07-25 18:37:50 发布

蓝色漩沐

最新推荐文章于 2023-07-25 18:37:50 发布

阅读量542

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/Helloxiaovv/article/details/104153837

版权

Bootstrap 面板组件用于包装 DOM 元素，提供预定义样式。可以添加面板标题，使用 .panel-heading 和 .panel-title 类。此外，面板支持语境色彩，如 panel-primary、panel-success 等，并能包含表格和列表组，实现丰富的布局效果。

摘要由CSDN通过智能技术生成

Bootstrap 面板（Panels）。面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向

元素添加 class .panel 和 class .panel-default 即可，如下面的实例所示：

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