• 技术文章 >web前端 >Bootstrap教程

    bootstrap panel是什么

    青灯夜游青灯夜游2022-04-12 13:18:28原创1511

    在bootstrap中,panel指的是“面板”组件,用于把DOM组件插入到一个盒子中;创建该组件,只需向div元素添加“panel”和“panel-xxx”样式即可,会产生具有边框的文本显示块,“panel-xxx”样式用于设置主题颜色。

    本教程操作环境:Windows7系统、bootsrap3.3.7版、DELL G3电脑

    1、面板

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

    Less版本:对应的源码文件是 panels.less

    Sass版本:对应的源码文件是 _panels.scss

    ☑ 编译后的Bootstrap:对应bootstrap.css文件第4995行~第5302行

    2、面板–基础面板

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

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

    运行效果如下:
    在这里插入图片描述
    原理分析:

    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>

    运行效果如下:

    在这里插入图片描述
    原理分析:

    panel-headingpanel-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>

    运行效果如下:

    在这里插入图片描述
    从效果中不难发现,这几个样式只是改变了面板的背景色、文本和边框颜色:具体源码可以查看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>

    运行效果如下:

    在这里插入图片描述
    优化代码:

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

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

    运行效果如下:

    在这里插入图片描述
    同样的道理,Bootstrap将嵌套在面板中的列表组做了一定的样式优化。具体源码可以查看bootstrap.css文件第5031行~第5053行

    更多关于bootstrap的相关知识,可访问:bootstrap基础教程!!

    以上就是bootstrap panel是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:bootstrap panel
    上一篇:bootstrap的表格样式有哪些 下一篇:浅析Bootstrap中列表组、分页和进度条组件的用法
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• bootstrap4.0与3.0有什么区别• 如何安装和使用BootstrapVue,构建项目界面• 除了bootstrap还有什么其他的前端框架• 浅析BootstrapBlazor中Table组件的自动生成列功能• bootstrap实现响应式布局的原理是什么• 手把手带你使用Bootstrap实现瀑布流布局
    1/1

    PHP中文网