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 theBootstrapframework. Its main function is to handle some functions that cannot be completed by other components. There are also different source codes in different versions:

☑Lessversion: The corresponding source code file is panels.less

☑Sassversion : The corresponding source code file is _panels.scss

☑ The compiledBootstrap: Corresponding to thebootstrap.cssfileLine 4995 ~ Line 5302

2. Panel – Basic Panel

The basic panel is very simple. It is adivcontainer 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:

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

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

 
图解CSS3
 
…
 
作者：大漠
 

The operation effect is as follows:

Principle analysis:

panel-headingandpanel-footeronly have spacing and rounded corners set:

/bootstrap.cssFileNo. 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 thepanelstyle does not modify the theme Style setting, and theme style is set throughpanel-default. In theBootstrapframework, 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 onpanel# Based on the class name of ##, add the class name you need:

 
图解CSS3
 
…
 
作者：大漠
 
       

        …
       
       

        …
       
       

        …
       
       

        …
       
       

        …
       

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:

 
图解CSS3
 
 
详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性 
 
 
我是列表项
 
我是列表项
 
我是列表项
 
 
 
作者：大漠
 

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:

 
图解CSS3
 
…
 
 
我是列表项
 
我是列表项
 
我是列表项
 
 
作者：大漠
 

The running effect is as follows:

In the same way,
Bootstrapwill be nested Certain style optimizations have been made to the list group in the panel. The specific source code can be viewed inbootstrap.cssfileline 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!