Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of what panel refers to in bootstrap, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading what panel refers to in this bootstrap. Let's take a look at it.

In bootstrap, panel refers to the "panel" component, which is used to insert the DOM component into a box; to create this component, simply add "panel" and "panel-xxx" styles to the div element, resulting in a text display block with a border, and the "panel-xxx" style is used to set the theme color.

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

1. Panel

The Panels is a new component of the Bootstrap framework, and its main function is to deal with some functions that can not be done by other components. Also have different source codes in different versions:

☑ Less version: the corresponding source file is panels.less

☑ Sass version: the corresponding source file is _ panels.scss

Bootstrap compiled by ☑: corresponding to line 4995 to line 5302 of the bootstrap.css file

2. Panel-basic panel

The base panel is very simple: a div container uses the "panel" style to produce a text display block with a border. Since "panel" does not control the theme color, a theme "panel-default" that controls the color is added to "panel", and a "dpanel-body" style div is added to place the main content of the panel:

I am a basic panel with default theme style

The running effect is as follows:

Principle analysis:

"panel" mainly sets the border, spacing and fillet:

/ bootstrap.css file line 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. In order to enrich the function of the panel, Bootstrap specially adds the effect of "panel header" and "page footer" to the panel:

☑ panel-heading: used to style the panel header

☑ panel-footer: used to style the end of the panel

Illustration CSS3... Author: great Desert

The running effect is as follows:

Principle analysis:

Panel-heading and panel-footer are also set only in styles such as spacing and fillets:

/ bootstrap.css file line 5006 ~ 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

You learned in the basic panels section that the panel style does not style the theme, but the theme style is set through panel-default. In addition to the default theme styles, the panel components in the Bootstrap framework also include the following theme styles to form a color panel:

☑ panel-primary: key Blue

☑ panel-success: success Green

☑ panel-info: information blue

☑ panel-warning: warning yellow

☑ panel-danger: dangerous Red

The way to use it is simple, just add the class name you need to the class name of panel:

Illustration CSS3... Author: desert …

The running effect is as follows:

From the effect, it is not difficult to find that these styles just change the background color, text and border color of the panel: for specific source code, you can see line 5195 to line 5302 of the bootstrap.css file.

5. Panel-Panel nested list groups

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

Graphical CSS3

Explains in detail all the new CSS3 features covered under the topics of selector, border, background, text, color, box model, scalable layout box model, multi-column layout, gradient, transition, animation, media, responsive Web design, Web font, etc.

I am the author of the list: desert

The running effect is as follows:

Optimize the code:

Like nested tables, if you think the spacing doesn't look good, you can extract the list group:

Illustration CSS3... I am the author of the list: desert

The running effect is as follows:

By the same token, Bootstrap optimizes the list group nested in the panel.

This is the end of the article on "what does panel in bootstrap refer to?" Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "what does panel refer to in bootstrap". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.