Bootstrap学习日记之面板

面板是什么？

面板就是可以将DOM组件放到一起的盒子，

创建基本面板

• 创建带有class="panel"的<div>面板容器
• 为面板容器添加基本样式，如：class="panel-primary"、class="panel-default"
• 在面板容器中创建标题<div>，class="panel-heading"
• 在面板容器中创建面板内容<div>，class="panel-body"

     <div class="panel panel-default">
         <div class="panel-heading">面板标题</div>
         <div class="panel-body">
             面板内容
         </div>
     </div>

运行结果

创建带有脚本标注的面板

• 在面板容器中创建带有class="panel-footer"的<div>

     <div class="panel panel-default">
         <div class="panel-body">
             面板内容
         </div>
         <div class="panel-footer">
             面板标注
         </div>
     </div>

运行结果

创建不同样式的面板

• 在面板容器中添加情景样式类，如：class="panel-primary"

<div class="panel panel-default">
         <div class="panel-heading">
             默认面板标题
         </div>
         <div class="panel-body">
             默认面板内容
         </div>
     </div>
     <div class="panel panel-primary">
    <div class="panel-heading">面板标题</div>
    <div class="panel-body">面板内容</div>
</div>

运行结果

创建带有表单的面板

• 在面板容器中添加表格
• 表格位置要在面板标题或者面板内容下

     <div class="panel panel-primary">
       <div class="panel-heading">面板标题</div>
         <table class="table">
             <th>产品</th><th>价格</th>
             <tr><td>产品A</td><td>2000</td></tr>
             <tr><td>产品B</td><td>5000</td></tr>
         </table>
    </div>

运行结果

创建带有列表组的面板

• 同表格的格式一样，列表组在面板容器内，在面板标题，面板内容后

     <div class="panel panel-primary">
       <div class="panel-heading">面板标题</div>
         <div class="panel-body">
             面板内容
         </div>
        <div class="list-group">
            <a class="list-group-item" href="#">
                好好吃饭
            </a>
            <a class="list-group-item" href="#">
                好好睡觉
            </a>
        </div>
    </div>

运行结果

注：本篇文章为博主在菜鸟教程学习的日记，菜鸟教程：http://www.runoob.com/