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>

效果：

巴特西

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

最新文章

热门文章