what is bootstrap panel

In bootstrap, panel refers to the "panel" component, which is used to insert DOM components into a box; to create this component, just add "panel" and "panel-xxx" styles to the div element That's it, a text display block with a border will be generated, and the "panel-xxx" style is used to set the theme color.

The operating environment of this tutorial: Windows7 system, bootsrap3.3.7 version, DELL G3 computer

1, panel

Panel (Panels) is a new component of the Bootstrap framework. Its main function is to handle some functions that cannot be completed by other components. There are also different source codes in different versions:

☑ Less version: The corresponding source code file is panels.less

☑ Sass version : The corresponding source code file is _panels.scss

☑ The compiled Bootstrap: Corresponding to the bootstrap.css file Line 4995 ~ Line 5302

2. Panel – Basic Panel

The basic panel is very simple. It is a div container that uses the "panel" style to generate a A text display block with a border. Since "panel" does not control the theme color, a color-controlling theme "panel-default" is added on the basis of "panel", and inside Added a "dpanel-body" style div to place the main content of the panel:

<div>
    <div>我是一个基础面板，带有默认主题样式风格</div>
</div>

The running effect is as follows:

Principle analysis:

"panel"Mainly make certain settings for the border, spacing and rounded corners:

/bootstrap.cssFileLine 4995～ Line 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. Panel – panel with head and tail

The basic panel looks too simple, BootstrapIn order to enrich the functions of the panel , specially add the "Panel Header" and "Page Footer" effects to the panel:

☑ panel-heading: Used to set the panel header style

☑ panel-footer: Used to set the panel tail style

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

The operation effect is as follows:

Principle analysis:

panel-heading and panel-footer only have spacing and rounded corners set:

/bootstrap.cssFile No. 5006 Line ~ Line 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 – Color Panel

In the Basic Panel section, we learned that the panel style does not modify the theme Style setting, and theme style is set through panel-default. In the Bootstrap framework, in addition to the default theme style, the panel component also includes the following theme styles, which constitute a colored panel:

☑ panel-primary ：Key blue

☑ panel-success：Success green

☑ panel-info:Information blue

☑ panel-warning：Warning yellow

☑ panel-danger：Danger red

The method of use is very simple, just click on panel# Based on the class name of ##, add the class name you need:

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

The running effect is as follows:

It is not difficult to find from the effect that these styles are just changes The background color, text and border color of the panel are changed: the specific source code can be viewed in
bootstrap.cssfileline 5195~line 5302.

5. Panel – Nested list group in panel

In the previous section, we introduced how to place a table in the panel. Now let’s learn how to place a list group in the panel. We Let’s take a simple look at an example:

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

The running effect is as follows:

Optimized code:

The same as nested tables, if you think this is helpful The spacing is not good-looking, you can extract the list group:

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

The running effect is as follows:

In the same way,
Bootstrap will be nested Certain style optimizations have been made to the list group in the panel. The specific source code can be viewed in bootstrap.css file line 5031 to line 5053.

For more knowledge about bootstrap, please visit:

bootstrap basic tutorial! !

The above is the detailed content of what is bootstrap panel. For more information, please follow other related articles on the PHP Chinese website!