深入理解BootStrap-- 面板(panel)

忘是亡心i 2021-06-26 16:06 697阅读 0赞

## 1、面板 ##

面板（`Panels`）是`Bootstrap`框架新增的一个组件，其主要作用就是用来处理一些其他组件无法完成的功能。同样在不同的版本中具有不同的源码：

☑ `Less`版本：对应的源码文件是 panels.less

☑ `Sass`版本：对应的源码文件是 \_panels.scss

☑ 编译后的`Bootstrap`：对应`bootstrap.css`文件**第4995行～第5302行**

## 2、面板–基础面板 ##

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

<div class="panel panel-default">
        <div class="panel-body">我是一个基础面板，带有默认主题样式风格</div>
    </div>

运行效果如下：  
![在这里插入图片描述][20181208142602653.png]  
原理分析：

“`panel`“主要对边框，间距和圆角做了一定的设置：

`/bootstrap.css`文件**第4995行～第5005行**/

.panel { 
      margin-bottom: 20px;
      background-color: #fff;
      border: 1px solid transparent;
      border-radius: 4px;
      -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
              box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    }
    .panel-body { 
      padding: 15px;
    }

## 3、面板–带有头和尾的面板 ##

基础面板看上去太简单了，`Bootstrap`为了丰富面板的功能，特意为面板增加“面板头部”和“页面尾部”的效果：

☑ `panel-heading`：用来设置面板头部样式

☑ `panel-footer`：用来设置面板尾部样式

<div class="panel panel-default">
        <div class="panel-heading">图解CSS3</div>
        <div class="panel-body">…</div>
        <div class="panel-footer">作者：大漠</div>
    </div>

运行效果如下：  
![在这里插入图片描述][20181208142817702.png]  
原理分析：

`panel-heading`和`panel-footer`也仅仅间距和圆角等样式进行了设置：

`/bootstrap.css`文件**第5006行～第5030行**/

.panel-heading { 
      padding: 10px 15px;
      border-bottom: 1px solid transparent;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
    }
    .panel-heading > .dropdown .dropdown-toggle { 
      color: inherit;
    }
    .panel-title { 
      margin-top: 0;
      margin-bottom: 0;
      font-size: 16px;
      color: inherit;
    }
    .panel-title > a { 
      color: inherit;
    }
    .panel-footer { 
      padding: 10px 15px;
      background-color: #f5f5f5;
      border-top: 1px solid #ddd;
      border-bottom-right-radius: 3px;
      border-bottom-left-radius: 3px;
    }

## 4、面板–彩色面板 ##

在基础面板一节中了解到，`panel`样式并没有对主题进行样式设置，而主题样式是通过`panel-default`来设置。在`Bootstrap`框架中面板组件除了默认的主题样式之外，还包括以下几种主题样式，构成了一个彩色面板：

☑ `panel-primary`：重点蓝

☑ `panel-success`：成功绿

☑ `panel-info`:信息蓝

☑ `panel-warning`：警告黄

☑ `panel-danger`：危险红

使用方法就很简单了，只需要在`panel`的类名基础上增加自己需要的类名：

<div class="panel panel-default">
        <div class="panel-heading">图解CSS3</div>
        <div class="panel-body">…</div>
        <div class="panel-footer">作者：大漠</div>
    </div>
    <div class="panel panel-primary">…</div>
    <div class="panel panel-success">…</div>
    <div class="panel panel-info">…</div>
    <div class="panel panel-warning">…</div>
    <div class="panel panel-danger">…</div>

运行效果如下：  
![在这里插入图片描述][20181208143311290.png]  
从效果中不难发现，这几个样式只是改变了面板的背景色、文本和边框颜色：具体源码可以查看`bootstrap.css`文件**第5195行～第5302行**。

## 5、面板–面板中嵌套列表组 ##

在上一节，我们介绍了如何在面板中放置表格，现在我们来学习如何在面板中放置列表组，我们简单的来看一个示例：

<div class="panel panel-default">
        <div class="panel-heading">图解CSS3</div>
        <div class="panel-body">
            <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
            </p>
            <ul class="list-group">
                <li class="list-group-item">我是列表项</li>
                <li class="list-group-item">我是列表项</li>
                <li class="list-group-item">我是列表项</li>
            </ul>
        </div>
        <div class="panel-footer">作者：大漠</div>
    </div>

运行效果如下：  
![在这里插入图片描述][20181208143418466.png]  
优化代码：

和嵌套表格一样，如果你觉得这样有间距不好看，你完全可以把列表组提取出来：

<div class="panel panel-default">
        <div class="panel-heading">图解CSS3</div>
        <div class="panel-body">…</div>
        <ul class="list-group">
            <li class="list-group-item">我是列表项</li>
            <li class="list-group-item">我是列表项</li>
            <li class="list-group-item">我是列表项</li>
        </ul>
        <div class="panel-footer">作者：大漠</div>
    </div>

运行效果如下：  
![在这里插入图片描述][20181208143538797.png]  
同样的道理，`Bootstrap`将嵌套在面板中的列表组做了一定的样式优化。具体源码可以查看`bootstrap.css`文件**第5031行～第5053行**。

[20181208142602653.png]: /images/20210626/b5c4d101e6ee4155bb7495b35bfd0f56.png
[20181208142817702.png]: /images/20210626/467b0187b2914f6293997a5b631aca83.png
[20181208143311290.png]: /images/20210626/4f650da347f1492db69ec0cc33f7dadb.png
[20181208143418466.png]: /images/20210626/9fede3393ac84520a7d75ad0c5502a5d.png
[20181208143538797.png]: /images/20210626/ee321bcac2ca49ab8ac4e40bf292b971.png