Analysis of panel component _ javascript tips of Bootstrap components-js tutorial

This article mainly introduces the relevant information about panel components of Bootstrap components. For more information, see Bootstrap. Twitter is the most popular front-end framework. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is concise and flexible, making Web development faster.

Panel components are mainly used to process functions that cannot be completed by other components and have different source codes in different versions:

LESS: panels. less
SASS: _ panels. scss

The basic panel is very simple, that is, a class is used in a p container. the panel style generates a text display block with a border. Because the panel does not control the subject color. adds a color-controlled topic Class Based on the panel. panel-default: Add a p. panel-body to place the panel subject content
. Panel is mainly used to set borders, spacing, rounded corners, and left and right:

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

Basic panel usage:

Basic panel
This is a basic panel with default theme Style

Panel with head and tail

To enrich the Panel functions, bootstrap adds the effects of the panel header and the Panel tail to the Panel,

. Panel-heading: Set the panel Header style.

. Panel-footer: Set the panel tail Style

. Panel-headingh and. panel-footer only set styles such as spacing and rounded corners.

.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:

Panel with head and tail
The title of the panel header
Here is the panel content part here is the panel content part
Here is the rear part of the panel.

Color panel

Since the. panel style does not set the style of the topic color, the panel component in the bootstrap Framework processes the default theme (. panel-default) style and also includes the following theme styles:

. Panel-primary: highlighted blue

. Panel-success: Successful green

. Panel-info: the information is blue (light)

. Panel-warning: warning yellow

. Panel-danger: Dangerous red

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

The method is simple. You only need to append the required topic class name based on the. panel class name.

Example:

Color panel
Bai shouyin
Snow on a mountain, or a month between clouds. Wen Jun had two meanings, So he refused. Today's liquor fighting conference, mingdangou water head. Yu Gou, the gully water flow east and west. You can't marry. May the hearts of the people, the white heads will not be separated. What are the bamboo and fish tails! How can I use a money knife to help a man!
Author: Zhuo Wenjun
No question
Last night, stars wind last night, and the painting building is on the east side of guitang. Without the colorful Phoenix Wings, you can feel the best. Send hook spring wine warm seat, Cao shot covered wax red. Yan Yu listened to Gu Ying's official visit and went to the marathon class.
Author: Li Shangyin
Qingyu case · Yuan Xi
Dongfeng night flowers and trees, more blow down, stars such as rain. Xiangmanlu, a BMW car. Fengyi sound, the jade pot light turn, a night of fish dragon dance. Moth snow Willow yellow wisp, smile Ying dark incense to go. The crowd looked for him thousands of Baidu, suddenly looked back, but that person was in, lights dim.
Author: Xin Qiji
LITH
Once the sea was difficult for water, but Wushan was not a cloud. Take the flowers for lazy review, half-margin repair half-margin.
Author: Yuan
Shumei
The first half of the moon pool in the light of micro-snow, and two or three branches in the hedge. The fragrance is passed by the sky, not uncommon.
Author: Fang XiaoYu
Chrysanthemum
Qiu Cong around the house like taojia, around the fence side gradually oblique. Not in the flowers love chrysanthemum, this flowers do more than flowers.
Author: Yuan

The effect is as follows:

Nested tables in the panel

Generally, you can regard the Panel as an area. the container of the panel-body contains the required content, which may be images, tables, and lists. Let's take a look at the effect of nested tables and list groups in the panel, the following is an example of a nested table:

Nested tables in the panel
Describe the lines of flowers
The poet is fond of chrysanthemum: the popular chrysanthemum clusters and clusters are all around the house, and he enjoys the autumn chrysanthemum planted by himself along the bamboo.
 
 

  
  
 
   
 
    
Not in the flowers love chrysanthemum, the flowers do not flower chrysanthemum
 
    
May the white heads be separated from the white-headed Yin
 
    
Moonlight in front of bed, suspected to be on the ground frost "quiet night thinking"
 
   
 
  
  
  
 
   
 
    
Let's see the joy of Yueyang Tower.
 
    
I want to know each other and never let go of "shangxie"
 
    
People do not know where to go, peach blossom still smile Spring Breeze "question capital Nanzhuang"
 
   
 
  
 
 
This poem draws the artistic conception of Tao's poems, and also sings in a gentle and plain language. It is not like Tao Gong's full-use of the image, but after describing the image, in self-describing mode, the love of chrysanthemum is explained without a word, leaving the imagination space for people to review and chew, which enhances its artistic appeal. Therefore, it has always been favored by people.

In practical use, the table and panel edge do not need any spacing,. panel-body sets a padding: 15px value. To achieve this effect, you can extract the table to the outside of panel-body during actual use:

For example:

Describe the lines of flowers
The poet is fond of chrysanthemum: the popular chrysanthemum clusters and clusters are all around the house, and he enjoys the autumn chrysanthemum planted by himself along the bamboo.

 
 

  
  
 
   
 
    
Yueyang Tower
 
    
Shangxie
 
    
Title capital Nanzhuang
 
   
 
  
  
  
 
   
 
    
The world is better than the world.
 
    
I want to know each other.
 
    
The peach blossom still smiles when people do not know where to go
 
   
 
  
 
 
This poem draws the artistic conception of Tao's poems, and also sings in a gentle and plain language. It is not like Tao Gong's full-use of the image, but after describing the image, in self-describing mode, the love of chrysanthemum is explained without a word, leaving the imagination space for people to review and chew, which enhances its artistic appeal. Therefore, it has always been favored by people.

Nested list groups in the panel

Example:

Nested list groups in the panel
Describe the lines of flowers
Panel nested list Group
 
 

  
  
List item 1
  
  
List item 2
  
  
List item 3
  
  
Item 4
  
  
List item 5
 
 
Author: Li Shangyin

The nested list of panel composite nested table is the same. If such spacing is not required, you can extract the List Group from. panel-body.

Example:

Nested list groups in the panel
Describe the lines of flowers
Panel nested list Group

 
 

  
  
List item 1
  
  
List item 2
  
  
List item 3
  
  
Item 4
  
  
List item 5
 
 
Author: Li Shangyin

The effect is as follows:

The above section describes the Panel components of the Bootstrap component. I hope it will be helpful to you!