Bootstrap入门（十五）组件9：面板组件

Bootstrap入门（十五）组件9：面板组件

虽然不总是必须，但是某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况，可以试试面板组件。

1.基本实例

2.带标题的面板

3.情景效果

4.代表格的面板

5.带列表组的面板

先引入本地的CSS文件

<link href="bootstrap.min.css" rel="stylesheet">

1.基本实例

我们先来创建一个基本的面板实例，在容器div中新建一个属性为panel，样式制定为默认样式的面板，主体内容要用到panel-body

　　　　　<div class="container">
            <div class="panel panel-default">
                <div class="panel-body">
                    HELLO WORLD!
                </div>
            </div>
　　　　　</div>

效果

 

2.带标题的面板

有时候我们需要用标题来帮助显示panel-heading

　　　　　<div class="container">
            <div class="panel panel-default">
　　　　　　　　　<div class="panel-heading">
                    标题
                </div>
                <div class="panel-body">
                    HELLO WORLD!
                </div>
            </div>
　　　　　</div>

效果

同理，既然有标题，也会有脚注

　　　　　<div class="container">
            <div class="panel panel-default">
                <div class="panel-body">
                    HELLO WORLD!
                </div>
　　　　　　　　　<div class="panel-footer panel-danger">
　　　　　　　　　　　　www.test.com
　　　　　　　　　</div>
            </div>
　　　　　</div>

效果

 

3.情景效果

也就是把默认的样式修改为其他，比如panel-info

（还有其他，比如panel-primary，panel-success，panel-danger等）

　　　　　　　<div class="panel panel-info">
                 <div class="panel-heading panel-success">
                    标题
                </div>
                <div class="panel-body">
                    HELLO WORLD!
                </div>
                <div class="panel-footer panel-danger">www.test.com</div>
            </div>

效果

 

4.代表格的面板

为面板中不需要边框的表格添加 .table 类，是整个面板看上去更像是一个整体设计。

如果是带有 .panel-body 的面板，我们为表格的上方添加一个边框，看上去有分隔效果。

 　　　　　　　<div class="panel panel-default">
                  <div class="panel-heading">
                    列表
                </div>
                <div class="panel-body">
                    HELLO WORLD!
                </div>
                 <table class="table">
                     <thead>
                         <tr class="active">
                             <th>标题</th>
                             <th>标题</th>
                             <th>标题</th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr class="success">
                             <td>单元格</td>
                             <td>单元格</td>
                             <td>单元格</td>
                         </tr>
                         <tr class="info">
                             <td>单元格</td>
                             <td>单元格</td>
                             <td>单元格</td>
                         </tr>
                         <tr class="success">
                             <td>单元格</td>
                             <td>单元格</td>
                             <td>单元格</td>
                         </tr>
                         <tr class="success">
                             <td>单元格</td>
                             <td>单元格</td>
                             <td>单元格</td>
                         </tr>
                     </tbody>                               
                 </table>
            </div>

效果（其中<tr>标签的class可以修改，这里的第二行就改为了info）

 

5.带列表组的面板

 （就是结合了<ul><li>标签的面板）

 

　　　　　　 <div class="panel panel-default">
                <div class="panel-heading">
                    标题
                </div>
                <div class="panel-body">
                    HELLO WORLD!
                </div>
                 <ul class="list-group">
                     <li class="list-group-item">
                         hello1
                     </li>
                     <li class="list-group-item">
                         hello2
                     </li>
                     <li class="list-group-item">
                         hello3
                     </li>
                 </ul>
            </div>

效果：