Latest web development tutorials

Bootstrap panel

This chapter will explain Bootstrap panel (Panels). DOM panel assembly for the assembly is inserted into a box. Create a basic panel, only need to <div> element and addclass .panel class.panel-default can, as shown in the following example:

Examples

<Div class = "panel panel-default" > <Div class = "panel-body"> This is a basic panel </ div> </ Div>

try it"

The results are as follows:

Default panel

Panel title

We are two great ways to add a panel title:

  • Use.panel-heading class can simply add the title to the panel container.to easily add a heading container to your panel.
  • Use with.panel-title class of <h1> - <h6> to add a predefined heading styles.

The following examples demonstrate this in two ways:

Examples

<Div class = "panel panel-default" > <Div class = "panel-heading"> The panel title without title </ div> <Div class = "panel-body"> Content panel </ div> </ Div> <Div class = "panel panel-default" > <Div class = "panel-heading"> <H3 class = "panel-title"> with the title of the panel title </ h3> </ Div> <Div class = "panel-body"> Content panel </ div> </ Div>

try it"

The results are as follows:

Panel title

Panel Footnote

We can add a footnote in the panel, just put the text on the button orby-class .panel-footer with a <div> can be.The following example illustrates this point:

Examples

<Div class = "panel panel-default" > <Div class = "panel-body"> This is a basic panel </ div> <Div class = "panel-footer"> Panel footnote </ div> </ Div>

try it"

The results are as follows:

Panel Footnote
Panel Footnote not inherit color and border color from the panel with the context, because it is not in the foreground content.

Context panel with color

Use Context class statuspanel-primary, panel-success, panel-info, panel-warning, panel-danger, to set the color panel with context, examples are as follows:

Examples

<Div class = "panel panel-primary" > <Div class = "panel-heading"> <H3 class = "panel-title"> Panel title </ h3> </ Div> <Div class = "panel-body"> This is a basic panel </ div> </ Div> <Div class = "panel panel-success" > <Div class = "panel-heading"> <H3 class = "panel-title"> Panel title </ h3> </ Div> <Div class = "panel-body"> This is a basic panel </ div> </ Div> <Div class = "panel panel-info" > <Div class = "panel-heading"> <H3 class = "panel-title"> Panel title </ h3> </ Div> <Div class = "panel-body"> This is a basic panel </ div> </ Div> <Div class = "panel panel-warning" > <Div class = "panel-heading"> <H3 class = "panel-title"> Panel title </ h3> </ Div> <Div class = "panel-body"> This is a basic panel </ div> </ Div> <Div class = "panel panel-danger" > <Div class = "panel-heading"> <H3 class = "panel-title"> Panel title </ h3> </ Div> <Div class = "panel-body"> This is a basic panel </ div> </ Div>

try it"

The results are as follows:

Context panel with color

With a table panel

To create a table with no borders in the panel, we can use theclass .table in the panel.Suppose there is a <div> containing.panel-body, we can add an extra border to the top of the table to separate.If it does not.panel-body of the <div>, the component will move without interruption from the panel to the head table.

The following example illustrates this point:

Examples

<Div class = "panel panel-default" > <Div class = "panel-heading"> <H3 class = "panel-title"> Panel title </ h3> </ Div> <Div class = "panel-body"> This is a basic panel </ div> <Table class = "table"> <Th> Products </ th> <th> Price </ th> <Tr> <td> Products A </ td> <td> 200 </ td> </ tr> <Tr> <td> Products B </ td> <td> 400 </ td> </ tr> </ Table> </ Div> <Div class = "panel panel-default" > <Div class = "panel-heading"> Panel title </ div> <Table class = "table"> <Th> Products </ th> <th> Price </ th> <Tr> <td> Products A </ td> <td> 200 </ td> </ tr> <Tr> <td> Products B </ td> <td> 400 </ td> </ tr> </ Table> </ Div>

try it"

The results are as follows:

With a table panel

With a list of groups of panel

We can be included in any list of the panel group by adding.panel and .panel-defaultclass in the <div> element to create the panel, and add the list of groups in the panel. You can choose from the list of groups to learn how to create a chapter list groups.

Examples

<Div class = "panel panel-default" > <Div class = "panel-heading"> Panel title </ div> <Div class = "panel-body"> <P> This is a basic content of the panel. This is a basic content of the panel. This is a basic content of the panel. This is a basic content of the panel. This is a basic content of the panel. This is a basic content of the panel. This is a basic content of the panel. This is a basic content of the panel. </ P> </ Div> <Ul class = "list-group"> <Li class = "list-group-item "> free domain name registration </ li> <Li class = "list-group-item "> free hosting space Window </ li> <Li class = "list-group-item "> The number of images </ li> <Li class = "list-group-item "> 24 * 7 support </ li> <Li class = "list-group-item "> Update annual cost </ li> </ Ul> </ Div>

try it"

The results are as follows:

With a list of groups of panel