Discussion on the _javascript skill of panel component of Bootstrap component

Bootstrap, from Twitter, is currently the most popular front-end framework. Bootstrap is based on HTML, CSS, JAVASCRIPT, it is simple and flexible, making Web development faster.

The main role of panel components is to handle some of the other components can not complete the function, in different versions have different source code:

LESS:panels.less
Sass:_panels.scss

The base panel is very simple, which is a div container that uses a class. Panel style that produces a text display block with a border, because the Panel does not control the theme color, so add a class that controls the color theme on the. Panel. Panel-default, Add a div.panel-body inside to place the panel body content
. The panel is mainly for borders, spacing, rounded corners, and left-right settings:

. panel {
margin-bottom:20px;
Background-color: #fff;
border:1px solid transparent;
border-radius:4px;
-webkit-box-shadow:0 1px 1px rgba (0, 0, 0,.);
box-shadow:0 1px 1px rgba (0, 0, 0,.);
panel-body {
padding:15px;
}

The application of the basic panel:

Panel with head and tail

Bootstrap in order to enrich the function of the Panel, specifically for the panel to increase the panel head and the effect of the rear panel,

. panel-heading: Set Panel header style

. Panel-footer: Set the rear panel style

. Panel-headingh and. Panel-footer are only set for styles such as spacing and fillet

. 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;
}

Example:

Color panel

Because the. Panel style does not style the theme colors, the panel component in the bootstrap frame handles the default theme (. panel-default) style and includes the following theme styles:

. Panel-primary: Key Blue

. panel-success: Successful Green

. Panel-info: Information Blue (shallow)

. panel-warning: Warning Yellow

. Panel-danger: Dangerous Red

These styles only change the background color, text, and border color of the panel

The use of the method is simple, just add the required subject class name on the base of the. Panel's class name

Example:

The effect is as follows:

Nested table in panel

In general, the Panel can be understood as an area, when you use a panel, you will place what you want in the. Panel-body container, which may be pictures, tables, lists, etc. to see the effects of nested tables and list groups in the panel, below is an example of a nested table:

In practice, the table and the edge of the panel may not need to have any spacing, but. Panel-body sets a padding:15px value that, in order to achieve this effect, can be extracted from the table to the panel-body when it is actually used:

For example:

<div class= "Panel Panel-default" >
<div class= "panel-heading" > Descriptive verses of flowers </div>
<div class= "Panel-body" >
<p> poet of chrysanthemum heartfelt love: Open is flourishing chrysanthemum a cluster, a clump of bushes, all around the houses, he along the fence, indifferent to appreciate these personally planted tears, do not feel the day has been West oblique. </p>
</div>
<table class= "Table table-bordered" >
<thead>
<tr>
<th> "Yueyanglou" </th>
<th> "on Evil" </th>
<th> "title Chengnan Chuang" </th>
</tr>
</thead>
<tbody>
<tr>
<td> siane, enjoy </td>
<td > I want to be with you, long live without failure </td>
<td> people do not know where to go, peach still laugh spring </td>
</tr> </tbody>
</table>
<div class= "Panel-footer" > This poem takes the artistic conception of pottery poem, and also with elegant and simple language chant, it is not like Tao with imagery, implication the most; but after depicting the image, In the way of the narrative of the love of Chrysanthemum, but also different words, leaving the imagination of space for people to chew aftertaste, which strengthens its artistic appeal. So it has always been loved </div>
</div>

Nested list group in panel

Example:

Panel nested list combining nested tables, if you do not need such spacing, you can completely extract the list group from the. Panel-body

Example:

The effect is as follows:

The above is a small set up to introduce the bootstrap components of the panel components, we hope to help!