bootstrap面板怎么用-Bootstrap教程-PHP中文网

首页

web前端

Bootstrap教程

bootstrap面板怎么用

Jul 11, 2019 am 11:30 AM

bootstrap

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

bootstrap面板怎么用

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

创建一个基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可。

如下面的实例所示：

&lt;div class=&quot;panel panel-default&quot;&gt;
    &lt;div class=&quot;panel-body&quot;&gt;
        这是一个基本的面板
    &lt;/div&gt;
&lt;/div&gt;

登录后复制

面板标题

我们可以通过以下两种方式来添加面板标题：

使用 .panel-heading class 可以很简单地向面板添加标题容器。

使用带有 .panel-title class 的 <h1>-<h6> 来添加预定义样式的标题。

下面的实例演示了这两种方式：

&lt;div class=&quot;panel panel-default&quot;&gt;
    &lt;div class=&quot;panel-heading&quot;&gt;
        不带 title 的面板标题
    &lt;/div&gt;
    &lt;div class=&quot;panel-body&quot;&gt;
        面板内容
    &lt;/div&gt;
&lt;/div&gt;
 
&lt;div class=&quot;panel panel-default&quot;&gt;
    &lt;div class=&quot;panel-heading&quot;&gt;
        &lt;h3 class=&quot;panel-title&quot;&gt;
            带有 title 的面板标题
        &lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class=&quot;panel-body&quot;&gt;
        面板内容
    &lt;/div&gt;
&lt;/div&gt;

登录后复制

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

以上是bootstrap面板怎么用的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn