Bootstrap panel, bootstrap

Bootstrap panel, bootstrap
Previous

Panel (Panels) is a new component of the Bootstrap framework. In some cases, you may need to put some DOM content in a box. In this case, you can use the Panel component. This document describes the Bootstrap panel in detail.

 

Basic panel

The basic panel is very simple, that is, a div container uses the "panel" style to generate a text display block with a border, and adds a "div. panel-body

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

<Div class = "panel"> <div class = "panel-body"> I am a basic panel </div>

[Part]

The basic panel looks too simple. Bootstrap adds "panel header" and "Page tail" to enrich the Panel functions:

Panel-heading: used to set the panel Header style

Panel-footer: used to set the panel tail Style

Panel-heading and panel-footer are set only for the spacing and rounded corner styles.

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

<Div class = "panel"> <div class = "panel-heading"> small match Blue ideal </div> <div class = "panel-body"> front-end learning blog </div> <div class = "panel-footer"> author: match </div>

 

Color panel

The panel style does not set the style of the topic, but the topic style is set through panel-default. In the Bootstrap framework, in addition to the default theme style, the Panel component also includes the following theme styles to form a Color panel:

Panel-primary: highlighted blue

Panel-success: success green

Panel-info: Information blue

Panel-warning: warning yellow

Panel-danger: Dangerous red

The usage is simple. You only need to add the required class name based on the class name of the panel.

<Div class = "panel"> <div class = "panel-heading"> small match Blue ideal </div> <div class = "panel-body"> front-end learning blog </div> <div class = "panel-footer"> author: match </div> <div class = "panel-default"> <div class = "panel-heading"> the blue ideal of match </div> <div class = "panel-body"> front-end learning blog </div> <div class = "panel-footer"> author: match </div> <div class = "panel-primary"> <div class = "panel-heading"> the blue ideal of match </div> <div class = "panel-body"> front-end learning blog </div> <div class = "panel-footer"> author: match </div> <div class = "panel-success"> <div class = "panel-heading"> the blue ideal of match </div> <div class = "panel-body"> front-end learning blog </div> <div class = "panel-footer"> author: match </div> <div class = "panel-info"> <div class = "panel-heading"> the blue ideal of match </div> <div class = "panel-body"> front-end learning blog </div> <div class = "panel-footer"> author: match </div> <div class = "panel-warning"> <div class = "panel-heading"> the blue ideal of match </div> <div class = "panel-body"> front-end learning blog </div> <div class = "panel-footer"> author: match </div> <div class = "panel-danger"> <div class = "panel-heading"> the blue ideal of match </div> <div class = "panel-body"> front-end learning blog </div> <div class = "panel-footer"> author: match </div>

 

Table nesting

Generally, the panel can be understood as a region. When using the panel, the required content will be placed in the panel-body, which may be images, tables, or lists.

Add a border-less table to the Panel.tableClass to make the entire panel look more like an overall design. If.panel-bodyIn the left-side Navigation Pane, we add a border to the top of the table.

<Div class = "panel-default"> <div class = "panel-heading"> blue ideals of small matches </div> <div class = "panel-body"> <p> front-end learning blog </p> </div> <table class = "table"> <thead> <tr> <th >#</th> <th> name </th> <th> Number of blogs </th> <th> difficulty </th> </tr> </thead> <tbody> <tr> <th scope =" row "> 1 </th> <td> HTML </td> <td> 30 </td> <td> difficult </td> </tr> <th scope = "row"> 2 </th> <td> CSS </td> <td> 60 </td> <td> difficult </td> </tr> <tr> <th scope = "row"> 3 </th> <td> javascript </td> <td> 200 </td> <td> difficult </td>> </tr> </tbody> </table> </div>

If no.panel-bodyThe panel title will be connected to the table and there is no gap

 

List Group nesting

You can simply add a list group with the maximum width to any panel.

<Div class = "panel-default"> <div class = "panel-heading"> blue ideals of small matches </div> <div class = "panel-body"> <p> front-end learning blog </p> </div> <ul class = "list-group"> <li class = "list-group-item"> HTML </li> <li class = "list-group-item"> CSS </li> <li class = "list-group-item"> javascript </li> <li class =" list-group-item "> bootstrap </li> <li class =" list-group-item "> jquery </li> </ul> </div>