Detailed introduction to Bootstrap panel

零下一度
Release: 2017-07-19 17:12:53
Original
1821 people have browsed it

1. Panels

Panels (Panels) are a new component of the Bootstrap framework. Its main function is to handle some functions that other components cannot complete. There are also different source codes in different versions:

☑ Less version: the corresponding source code file is panels.less

☑ Sass version: the corresponding source code file is _panels.scss

☑ Compiled Bootstrap: Corresponds to lines 4995 to 5302 of the bootstrap.css file

Basic panel

The basic panel is very simple, it is a div container using "panel" Style, generates a text display block with a border, and adds a "div.panel-body" inside to place the main content of the panel

.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;
}
Copy after login
<div class="panel"><div class="panel-body">我是一个基础面板</div></div>
Copy after login


【Components】

The basic panel looks too simple. In order to enrich the functions of the panel, Bootstrap specially adds the "Panel Header" and "Page Footer" effects to the panel:

 ☑ panel-heading: used to set the panel head style

 ☑ panel-footer: used to set the panel tail style

panel-heading and panel-footer are only spacing and rounded corners and other styles are set

.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;
}
Copy after login
<div class="panel"><div class="panel-heading">小火柴的蓝色理想</div><div class="panel-body">前端学习博客</div><div class="panel-footer">作者:小火柴</div></div>
Copy after login

Color panel

The panel style does not style the theme, but the theme style is Set via panel-default. In the Bootstrap framework, in addition to the default theme style, the panel component also includes the following theme styles, forming a colored panel:

 ☑ panel-primary: key blue

 ☑ panel- success: success green

☑ panel-info: information blue

☑ panel-warning: warning yellow

☑ panel-danger: danger red

Use The method is very simple. You only need to add the class name you need based on the class name of the panel.

<div class="panel"><div class="panel-heading">小火柴的蓝色理想</div>
<div class="panel-body">前端学习博客</div><div class="panel-footer">作者:小火柴</div></div><div class="panel panel-default"><div class="panel-heading">小火柴的蓝色理想</div><div class="panel-body">前端学习博客</div><div class="panel-footer">作者:小火柴</div></div><div class="panel panel-primary"><div class="panel-heading">小火柴的蓝色理想</div><div class="panel-body">前端学习博客</div><div class="panel-footer">作者:小火柴</div></div>
<div class="panel panel-success">
<div class="panel-heading">小火柴的蓝色理想</div>
<div class="panel-body">前端学习博客</div><div class="panel-footer">作者:小火柴</div>
</div><div class="panel panel-info"><div class="panel-heading">小火柴的蓝色理想</div>
<div class="panel-body">前端学习博客</div><div class="panel-footer">作者:小火柴</div>
</div><div class="panel panel-warning"><div class="panel-heading">小火柴的蓝色理想</div>
<div class="panel-body">前端学习博客</div><div class="panel-footer">作者:小火柴</div></div>
<div class="panel panel-danger"><div class="panel-heading">小火柴的蓝色理想</div>
<div class="panel-body">前端学习博客</div><div class="panel-footer">作者:小火柴</div></div>
Copy after login

Table nesting

Generally speaking, the panel can be understood as a Area, when using the panel, the required content will be placed in the panel-body, which may be pictures, tables or lists, etc.

Add the .table class to the tables in the panel that do not require borders , making the entire panel look more like an overall design. If it is a panel with .panel-body, we add a border above the table, which looks like a separation effect

<div class="panel panel-default"><div class="panel-heading">小火柴的蓝色理想</div><div class="panel-body"><p>前端学习博客</p></div><table class="table"><thead>  <tr><th>#</th><th>名称</th><th>博客数量</th><th>难度</th>  </tr></thead><tbody>  <tr><th scope="row">1</th><td>HTML</td><td>30</td><td>较难</td>  
</tr>  <tr><th scope="row">2</th><td>CSS</td><td>60</td><td>较难</td>  </tr>  <tr><th scope="row">3</th><td>javascript</td><td>200</td><td>很难</td>  </tr></tbody></table></div>
Copy after login

If there is no . panel-body, the panel title will be connected to the table without any gaps

List group nesting

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

<div class="panel panel-default"><div class="panel-heading">小火柴的蓝色理想</div>
<div class="panel-body"><p>前端学习博客</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>
Copy after login

The above is the detailed content of Detailed introduction to Bootstrap panel. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template