面板 - Panels

怎样创建一个 Panel ?

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

<div class = "panel panel-default">
    <div class = "panel-body">
        这是一个最简单 Panel
    </div>
</div>
01.PNG

怎样为 Panel 添加一个 Heading ?

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

<div class = "panel panel-default">
    <div class = "panel-heading">
        面板的 Heading
    </div>

    <div class = "panel-body">
        ........
    </div>
</div>
带 Heading 的面板

怎样为 Panel 添加一个 Footer ?

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

<div class="panel panel-danger">
    <div class = "panel-heading">
        带 Footer 的面板
    </div>
    <div class="panel-body">
        带 Footer 的面板
    </div>

    <div class="panel-footer">这里是 Footer</div>
</div>
带 Footer 的面板

怎样为 Heading 增加预设样式 ?

在 Heading 内添加一个<h1> - <h6> 的标签,并设置 .panel-title 类,即可呈现为预设的样式。

注意:<h1> - <h6> 均可使用,效果是一样的

<!-- 不使用预设样式 -->
<div class = "panel panel-success">
    <div class = "panel-heading">
        这里的 Heading 没有设置预设样式
    </div>

    <div class = "panel-body">
        面板内容
    </div>
</div>

<!-- 使用预设样式 -->
<div class = "panel panel-success">
    <div class = "panel-heading">
        <h6 class = "panel-title">
            这里的 Heading 内部多了一个 <h6> 标签,设置了预设样式
        </h6>
    </div>

    <div class = "panel-body">
        面板内容
    </div>
</div>
预设样式

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

直接将按钮包裹在一个 <div> 中,然后添加到 Footer 内部即可,要注意下面两点:

  1. 必须为 Footer 添加 .clearfix 类,否则将破会 Footer 的布局
  2. 包裹按钮的 <div> 可以设置一个 .pull-right,让按钮向右侧对齐
<div class="panel panel-default">
    <div class="panel-body">
        ......
    </div> 


    <div class="panel-footer clearfix">
        <div class="pull-right">
            <a href="#" class="btn btn-primary">了解更多</a>
            <a href="#" class="btn btn-default">返回</a>
        </div>
    </div>
</div>
为 Footer 添加按钮

面板有几种情景模式 ?

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

<div class="panel panel-primary">
    ......
</div>


<div class="panel panel-success">
    ......
</div>


<div class="panel panel-info">
    ......
</div>


<div class="panel panel-warning">
    ......
</div>


<div class="panel panel-danger">
    ......
</div>

面板的情景模式

怎样在面板中添加表格 ?

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

<!-- 带 body 的面板表格 -->
<div class = "panel panel-default">
    <div class = "panel-heading">
        <h3 class = "panel-title">Panel title</h3>
    </div>

    <!-- 注意:这里保留了面板的 body -->
    <div class = "panel-body">
        这里是面板的 body
    </div>

    <!-- 注意:在这里添加了表格 -->
    <table class = "table">
        ......
    </table>
</div>


<!-- 不带 body 的面板表格 -->
<div class = "panel panel-default">
    <div class = "panel-heading">Panel Heading</div>

    <table class = "table">
        ......
    </table>

</div>
表格面板

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

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

<div class = "panel panel-default">
    <div class = "panel-heading">
        <h3 class = "panel-title">Panel title</h3>
    </div>

    <div class = "panel-body">
        这里是面板的 body
    </div>

    <ul class = "list-group">
        <li class = "list-group-item">Free Domain Name Registration</li>
        <li class = "list-group-item">Free Window Space hosting</li>
        ......
    </ul>
</div>
06.PNG
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...
    凛0_0阅读 5,065评论 0 66
  • 教程整理自慕课网(原文部分错误在这篇文章得到修改,本文版本Bootstrap3.3.7)。 框架简介 Bootst...
    小小奶狗阅读 2,543评论 0 5
  • 文档结构 需要使用HTML5文档结构 <!DocType html> 移动设备优先 需要在头部增加 标签 引...
    风之帆阅读 2,540评论 0 4
  • 锡|茶 花花草草能让自己元气满满,没有学过插花,随心随意,花的鲜灵,锡的韵律,组成一幅别样的景致。 以前生活忙忙碌...
    杨胖家的瘦子阅读 333评论 0 4
  • 旧城xu阅读 142评论 0 0