Bootstrap, from Twitter, is the most popular front-end framework at present. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is simple and flexible, making web development faster.
The main function of the panel component is to deal with some functions that other components cannot complete, with different source codes in different versions:
LESS: panels.less
SASS:_panels.scss
The basic panel is very simple. It uses the style of class .panel in a div container to generate a text display block with borders. Since the panel does not control the theme color, a class .panel-default for controlling the color of the theme is added to the .panel-controlled theme, and add a div.panel-body to place the main content of the panel.
.panel mainly sets certain settings for borders, spacing, rounded corners, and left and right:
.panel {margin-bottom: 20px;background-color: #ffff;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;}Application of basic panels:
<h1>Basic Panel</h1><div><div>This is a basic panel with default theme style</div></div>
Panel with head and tail
In order to enrich the functions of the panel, bootstrap specially adds the effects of the panel head and tail of the panel to the panel.
.panel-heading: Set the panel head style
.panel-footer: Set the tail style of the panel
.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:
<h1>Panel with head and tail</h1><div><div>Here is the head title of the panel</div><div>Here is the panel content partHere is the panel content partHere is the panel content partHere is the panel content partHere is the panel content partHere is the panel content partHere is the panel content partHere is the panel content partHere is the panel content partHere is the panel content partHere is the panel content part</div></div>Here is the panel tail part</div></div>
Color panels
Since the .panel style does not style the theme color, the panel component in the bootstrap framework handles the default theme (.panel-default) style, and also includes the following theme styles:
.panel-primary:Blue
.panel-success: Success green
.panel-info: information blue (light)
.panel-warning:Warning yellow
.panel-danger: Dangerous red
These styles just change the background color, text, and border color of the panel
The usage method is very simple. Just add the required theme class name to the .panel class name
example:
<h1>Colorful panel</h1><div><div>White-headed chant</div><div>Capric as snow on the mountain, as bright as the moon among the clouds. I heard that you have two intentions, so I came to make a decision. Today’s drink party, Mingdangou water head. The water flows east and west on the ditches. It is sad and sad, and there is no need to cry when you marry. I wish to win the heart of one person and never leave each other forever. What is the bamboo pole swaying, what is the fish tail? Men value impulse, so why use money knife! </div><div>Author: Zhuo Wenjun</div></div><div><div>Unt title</div><div>Last night, the stars last night, the wind last night, and the west side of the painting building was the east of the Guitang. The two flying wings of the phoenix without colorful phoenixes are in harmony with each other. The spring wine is warm across the seat, and the wax lights are red. Alas, I listened to the drum and answered the official, and walked on the Malantai and turned into a tunic. </div><div>Author: Li Shangyin</div></div><div><div>Qingyu Case・Yuanxi</div><div>The east wind blooms thousands of flowers and trees at night, and blows down, and the stars are like rain. BMW car carts are full of fragrance. The sound of the phoenix flute moves, the light of the jade pot turns, and the fish and dragon dance overnight. The moths and the willows are golden wisps, and the smiles are filled with fragrance. I searched for him in the crowd for thousands of times, but when I looked back, the man was there, in the dim light. </div><div>Author: Xin Qiji</div></div><div><div>Li Si</div><div>The sea was once a terrible sea of water, but Wushan was not cloudy. I will look back on the flowers and see half of my life, half of my life, half of my life. </div><div>Author: Yuan Zhen</div></div><div><div>Painted plum blossoms</div><div>Slight snow has just disappeared from half the pond, and two or three branches are seen from a distance by the fence. The fragrance spreads to the heart of heaven, and the unknown plants and trees are known. </div><div>Author: Fang Xiaoru</div></div><div><div>Chrysanthemums</div><div>Autumn bushes surround the houses like Tao’s houses, and the sun is gradually slanting around the fence. It’s not that I prefer chrysanthemums among the flowers, and there are no flowers whenever the flowers bloom. </div><div>Author: Yuan Zhen</div></div>
The effects are as follows:
Nested tables in panels
Generally speaking, the panel can be understood as an area. When using the panel, the required content will be placed in the .panel-body container, and the contents may be pictures, tables, lists, etc.; let’s take a look at the effects of nested tables and list groups in the panel. Here is an example of nested tables:
<h1>Nested tables in the panel</h1><div><div>Poems describing flowers</div><div><p>The poet sincerely loves chrysanthemums: clusters of blooming chrysanthemums are spread all around the house. He walked along the bamboo fence and admired these autumn chrysanthemums planted by himself, and before he could realize that the sun had set in the west. </p><table><thead><tr><th>It is not that the flowers prefer chrysanthemums, and there are no flowers when the flowers bloom. "Chrysanthemums"</th><th>I wish to win the heart of one person, and my head is not separated from each other. "Song of White Head"</th><th>The bright moonlight in front of the bed is suspected to be frost on the ground. "Quiet Night Thoughts"</th></tr></thead><tbody><td>Worry about the world before worrying, and then the world after joy. "Yueyang Tower Notes"</td><td>I want to know you, and my life will never end. "Shangxie"</td><td>The face of the human face is unknown, and the peach blossoms still smile in spring breeze. "Inscription on the Nanzhuang of the Capital"</td></tr></tbody></table></div><div>This poem takes the artistic conception of Tao's poems and is also chanted in elegant and simple language, which is not like Tao Gong using all the images and is profound; but after depicting the concrete, it reveals the reason for loving chrysanthemums in a self-describable way without saying it in one word, leaving behind an imagination space for people to savor and chew, which enhances its artistic appeal. Therefore, it has always been loved by people</div></div>
In actual use, perhaps there is no need to be any spacing between the edges of the table and the panel, but the .panel-body sets a padding: 15px value. In order to achieve this effect, the table can be extracted outside the panel-body during actual use:
For example:
<div><div>Poems describing flowers</div><div><p>The poet sincerely loves chrysanthemums: clusters of blooming chrysanthemums are spread all around the house. He walked along the bamboo fence and admired these autumn chrysanthemums planted by himself, and before he could realize that the sun had set in the west. </p></div><table><thead><tr><th>"Yueyang Tower Notes"</th><th>"Shangxie"</th><th>"Inscription on the capital city's Nanzhuang"</th></tr></thead><tbody><tr><td>Worry about the world before worrying, and then enjoying the world after joy</td><td>I want to know you, and my life will never fade</td><td>I don't know where the human face is, but the peach blossoms still smile in spring breeze</td></tr></tbody></table><div>This poem takes the artistic conception of Tao's poems and is also chanted in elegant and simple language, which is not like Tao Gong using all the images and is profound; but after depicting concrete images, he explains the reason for loving chrysanthemums in a self-describable way, leaving behind an imagination space for people to savor and chew, which enhances its artistic appeal. Therefore, it has always been loved by people</div></div>
Nested list groups in the panel
example:
<h1>Nested list group in the panel</h1><div><div>Poems describing flowers</div><div><p>Panel nested list group</p><ul><li>List item 1</li><li>List item 2</li><li>List item 3</li><li>List item 4</li><li>List item 5</li></ul></div><div>Author: Li Shangyin</div></div>
The same is true for panel nested list combination nested tables. If such spacing is not required, you can extract the list group from the .panel-body.
example:
<h1>Nested list group in the panel</h1><div><div>Poems describing flowers</div><div><p>Panel nested list group</p></div><ul><li>List item 1</li><li>List item 2</li><li>List item 3</li><li>List item 4</li><li>List item 5</li></ul><div> Author: Li Shangyin</div></div>
The effects are as follows:
The above is the panel component of the Bootstrap component introduced to you by the editor. I hope it will be helpful to everyone!