Bootstrap must-learn panels every day_javascript skills

1. Panel

Panels are a new component of the Bootstrap framework. Its main function is to handle some functions that cannot be completed by other components. Also has 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

☑ Compiled Bootstrap: corresponds to lines 4995 to 5302 of the bootstrap.css file

2. Panel – Basic Panel

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

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

The operation effect is as follows:

Principle analysis:

"Panel" mainly sets certain borders, spacing and rounded corners:

/Line 4995~Line 5005 of the bootstrap.css file/

.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. In order to enrich the functions of the panel, Bootstrap specially adds the "Panel Header" and "Page Footer" effects to the panel:

☑ panel-heading: is used to set the panel header style

☑ panel-footer: is used to set the panel footer 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:

/Line 5006~Line 5030 of the bootstrap.css file/

.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 set the theme style, but the theme style is set through panel-default. In addition to the default theme style, the panel component in the Bootstrap framework also includes the following theme styles, which constitute a colorful 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. You only need to add the class name you need based on the class name of the panel:

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

It is not difficult to find from the effect that these styles only change the background color, text and border color of the panel: for the specific source code, you can view lines 5195 to 5302 of the bootstrap.css file.

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. Let's simply 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 operation effect is as follows:

Optimize code:

Same as nested tables, if you think the spacing does not look good, 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 operation effect is as follows:

For the same reason, Bootstrap has made certain style optimizations for list groups nested in panels. For the specific source code, you can view lines 5031 to 5053 of the bootstrap.css file.

For panels, the above introduces basic panels, color panels, etc. to help you learn the Bootstrap panel more comprehensively. I hope you will gain something from it.