面板 - Panels

怎样创建一个 Panel ?

通过 .panel .panel-default .panel-body 三个类可以创建一个 Panel

    

        这是一个最简单 Panel
    

01.PNG

怎样为 Panel 添加一个 Heading ?

在 Panel 的 .panel-body 之前加入一个 .panel-heading 元素就可以为 Panel 添加一个 Heading

    

        面板的 Heading
    

    

        ........
    

带 Heading 的面板

怎样为 Panel 添加一个 Footer ?

在 Panel 的 .panel-body 之后加入一个 .panel-footer 元素就可以为 Panel 添加一个 Footer

    

        带 Footer 的面板
    
    

        带 Footer 的面板
    

    
这里是 Footer

带 Footer 的面板

怎样为 Heading 增加预设样式 ？

在 Heading 内添加一个

-

的标签，并设置 .panel-title 类，即可呈现为预设的样式。

注意：

-

均可使用，效果是一样的

    

        这里的 Heading 没有设置预设样式
    

    

        面板内容
    




    

        

            这里的 Heading 内部多了一个 
 标签，设置了预设样式
        
    

    

        面板内容
    

预设样式

怎样在 Panel 的 Footer 中添加按钮 ？

直接将按钮包裹在一个

中，然后添加到 Footer 内部即可，要注意下面两点：

1. 必须为 Footer 添加 .clearfix 类，否则将破会 Footer 的布局
2. 包裹按钮的
   可以设置一个 .pull-right，让按钮向右侧对齐

    

        ......
    
 


    

        

            了解更多
            返回
        
    

为 Footer 添加按钮

面板有几种情景模式 ？

.panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger

    ......




    ......




    ......




    ......




    ......

面板的情景模式

怎样在面板中添加表格 ？

在 Panel 中添加一个 .table 即可在 Panel 中加入表格，可以保留 Panel 的 .panel-body

    

        
Panel title
    

    
    

        这里是面板的 body
    

    
    
        ......
    





    
Panel Heading

    
        ......
    

表格面板

怎样在面板中添加列表组 ？

在 Panel 中添加一个 .list-group 即可在 Panel 中加入列表组，同样可以保留 Panel 的 .panel-body

    

        
Panel title
    

    

        这里是面板的 body
    

    

        
Free Domain Name Registration
        
Free Window Space hosting
        ......
    

06.PNG