The best Bootstrap panel Tutorial In 2024, In this tutorial you can learn
Examples,Panel title,Examples,Panel Footnote,Examples,Context panel with color,Examples,With a table panel,Examples,With a list of groups of panel,Examples,
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>
The results are as follows:
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>
The results are as follows:
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>
The results are as follows:
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>
The results are as follows:
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>
The results are as follows:
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>
The results are as follows: