Bootstrap 组件:面板组件(panel)

简介: Bootstrap 框架

作者:WangMin
格言:努力做好自己喜欢的每一件事

banner.png

基础面板非常简单,就是一个div容器中运用了类.panel的样式,产生一个具有边框的文本显示块,由于panel不控制主题颜色,所以在.panel基础上增加一个控制颜色的主题的类.panel-default,在里面添加一个div.panel-body来放置面板主体内容。

默认样式

默认的.panel组件所做的只是设置基本的边框(border)和内补(padding)来包含内容。其用法如下:

<div class="panel panel-default">
    <div class="panel-body">
        默认样式
    </div>
</div>

1.png


带标题的面版

通过.panel-heading可以很简单地为面板加入一个标题容器。你也可以通过添加设置了.panel-title类的<h1>-<h6>标签,添加一个预定义样式的标题。不过,<h1>-<h6>标签的字体大小将被.panel-heading的样式所覆盖。为了给链接设置合适的颜色,务必将链接放到带有.panel-title类的标题标签内。

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        面板内容
    </div>
</div>

2.png


带尾部的面版

把按钮或次要的文本放入.panel-footer容器内。注意面版的脚注不会从情境效果中继承颜色,因为他们并不是主要内容。

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        面板内容
    </div>
    <div class="panel-footer">面板尾部</div>
</div>

3.png


彩色面板

由于.panel样式并没有对主题颜色进行样式设置,bootstrap框架中的面板组件处理默认的主题(.panel-default)样式之外,还包括以下几种主题样式:

状态
.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-info">
    <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-danger">
    <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>

4.png


面板中嵌套表格

为面板中不需要边框的表格添加.table类,是整个面板看上去更像是一个整体设计。如果是带有.panel-body的面板,我们为表格的上方添加一个边框,看上去有分隔效果。

<div class="panel panel-warning">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        面板内容
    </div>
    <table class="table">
        <tr>
            <th>#</th>
            <th>name</th>
            <th>age</th>
        </tr>
        <tr>
            <td>1</td>
            <td>麦克</td>
            <td>23</td>
        </tr>
        <tr>
            <td>2</td>
            <td>玛丽</td>
            <td>20</td>
        </tr>
        <tr>
            <td>3</td>
            <td>莉莉</td>
            <td>21</td>
        </tr>
    </table>
</div>

5.png

当然也可以在 .panel-body 中添加表格。
如果没有.panel-body,面版标题会和表格连接起来,没有空隙。效果如下:

6.png


带列表组的面版

可以简单地在任何面版中加入具有最大宽度的列表组(.list-group),用法如下:

<div class="panel panel-warning">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        面板内容
    </div>
    <div class="list-group">
        <a class="list-group-item">item 1</a>
        <a class="list-group-item">item 2</a>
        <a class="list-group-item">item 3</a>
        <a class="list-group-item">item 4</a>
    </div>
</div>

7.png


就先分享到这里!! :smile: 后续继续更新!!

目录
相关文章
N..
|
7月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
68 0
|
前端开发 容器
|
前端开发 开发者 容器
|
5月前
|
开发框架 前端开发 JavaScript
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
|
前端开发
|
前端开发 JavaScript 容器
|
7月前
|
前端开发
bootstrap组件的案例代码
bootstrap组件的案例代码
|
7月前
|
前端开发
bootstrap组件
bootstrap组件
|
7月前
Bootstrap5 导航组件和面包屑
Bootstrap5 导航组件和面包屑
63 0
|
7月前
|
前端开发 JavaScript 容器
BootStrap 组件和样式
BootStrap 组件和样式
68 0