bootstrap面板怎么用

本章将讲解 Bootstrap 面板（Panels）。

面板组件用于把 DOM 组件插入到一个盒子中。（推荐学习：Bootstrap视频教程）

创建一个基本的面板，只需要向

元素添加 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">
        <h3 class="panel-title">
            带有 title 的面板标题
        </h3>
    </div>
    <div class="panel-body">
        面板内容
    </div>
</div>

更多Bootstrap相关技术文章，请访问Bootstrap教程栏目进行学习！

Atas ialah kandungan terperinci bootstrap面板怎么用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn