• 品书香 看电影 十堰市民过了个名副其实的“文化年” 2018-02-24
  • 人民网驻阿尔及利亚记者报道集 2018-02-24
  • 党务问答:党组与党委有何区别? 2018-02-24
  • 泽贡高等级公路2日起临时封闭 2018-02-23
  • 外媒称中国元素成为国际时尚:旗袍成经典服装 2018-02-23
  • 广东清远垃圾收集点火灾致9人死亡 系烟花爆竹引起 2018-02-22
  • 党务问答:党组与党委有何区别? 2018-02-21
  • 杨浦区贯彻实施长护险 春节加班满足老人护理需求 2018-02-21
  •  “不打烊”不等于“全配送” 快递如何保障春节网购 2018-02-21
  • 冬奥观察:奥林匹克在“云”间 2018-02-20
  •  “不打烊”不等于“全配送” 快递如何保障春节网购 2018-02-20
  • 开创生态文明新时代 绘出美丽中国新图景 2018-02-20
  • 人民网驻阿尔及利亚记者报道集 2018-02-19
  • 党务问答:党组与党委有何区别? 2018-02-19
  • MINI车联网服务3月起升级至4G网络 增加新功能 2018-02-18
  • 【bootstrap教程】Bootstrap 面板(Panels)

    栏目: bootstrap 发布于: 2014-11-28 12:38:09

    Bootstrap 面板(Panels)

    本章将讲解 Bootstrap 面板(Panels)。面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可,如下面的实例所示:

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 默认的面板</title>
       <link rel="nofollow" href="http://www.rocksun.cn/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="http://www.rocksun.cn/scripts/jquery.min.js"></script>
       <script src="http://www.rocksun.cn/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="panel panel-default">
       <div class="panel-body">
          这是一个基本的面板
       </div>
    </div>
    
    </body>
    </html>
    

    结果如下所示:

    默认的面板

    面板标题

    我们可以通过以下两种方式来添加面板标题:

    • 使用 .panel-heading class 可以很简单地向面板添加标题容器。to easily add a heading container to your panel.
    • 使用带有 .panel-title class 的 <h1>-<h6> 来添加预定义样式的标题。

    下面的实例演示了这两种方式:

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 面板标题</title>
       <link rel="nofollow" href="http://www.rocksun.cn/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="http://www.rocksun.cn/scripts/jquery.min.js"></script>
       <script src="http://www.rocksun.cn/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="panel panel-default">
       <div class="panel-heading">
          不带 title 的面板标题
       </div>
       <div class="panel-body">
          面板内容
       </div>
    </div>
    
    <div class="panel panel-default">
       <div class="panel-heading">
          <h3 class="panel-title">
             带有 title 的面板标题
          </h3>
       </div>
       <div class="panel-body">
          面板内容
       </div>
    </div>
    
    </body>
    </html>
    

    结果如下所示:

    面板标题

    面板脚注

    我们可以在面板中添加脚注,只需要把按钮或者副文本放在带有 class .panel-footer 的 <div> 中即可。下面的实例演示了这点:

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 面板脚注</title>
       <link rel="nofollow" href="http://www.rocksun.cn/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="http://www.rocksun.cn/scripts/jquery.min.js"></script>
       <script src="http://www.rocksun.cn/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="panel panel-default">
       <div class="panel-body">
          这是一个基本的面板
       </div>
       <div class="panel-footer">面板脚注</div>
    </div>
    
    </body>
    </html>
    

    结果如下所示:

    面板脚注
    面版脚注不会从带语境色彩的面板中继承颜色和边框,因为它不是前景中的内容。

    带语境色彩的面板

    使用语境状态类 panel-primary、panel-success、panel-info、panel-warning、panel-danger,来设置带语境色彩的面板,实例如下:

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 带语境色彩的面板</title>
       <link rel="nofollow" href="http://www.rocksun.cn/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="http://www.rocksun.cn/scripts/jquery.min.js"></script>
       <script src="http://www.rocksun.cn/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="panel panel-primary">
       <div class="panel-heading">
          <h3 class="panel-title">面板标题</h3>
       </div>
       <div class="panel-body">
          这是一个基本的面板
       </div>
    </div>
    <div class="panel panel-success">
       <div class="panel-heading">
          <h3 class="panel-title">面板标题</h3>
       </div>
       <div class="panel-body">
          这是一个基本的面板
       </div>
    </div>
    <div class="panel panel-info">
       <div class="panel-heading">
          <h3 class="panel-title">面板标题</h3>
       </div>
       <div class="panel-body">
          这是一个基本的面板
       </div>
    </div>
    <div class="panel panel-warning">
       <div class="panel-heading">
          <h3 class="panel-title">面板标题</h3>
       </div>
       <div class="panel-body">
          这是一个基本的面板
       </div>
    </div>
    <div class="panel panel-danger">
       <div class="panel-heading">
          <h3 class="panel-title">面板标题</h3>
       </div>
       <div class="panel-body">
          这是一个基本的面板
       </div>
    </div>
    
    </body>
    </html>
    

    结果如下所示:

    带语境色彩的面板

    带表格的面板

    为了在面板中创建一个无边框的表格,我们可以在面板中使用 class .table。假设有个 <div> 包含 .panel-body,我们可以向表格的顶部添加额外的边框用来分隔。如果没有包含 .panel-body 的 <div>,则组件会无中断地从面板头部移动到表格。

    下面的实例演示了这点:

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 带表格的面板</title>
       <link rel="nofollow" href="http://www.rocksun.cn/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="http://www.rocksun.cn/scripts/jquery.min.js"></script>
       <script src="http://www.rocksun.cn/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="panel panel-default">
       <div class="panel-heading">
          <h3 class="panel-title">面板标题</h3>
       </div>
       <div class="panel-body">
          这是一个基本的面板
       </div>
       <table class="table">
          <th>产品</th><th>价格 </th>
          <tr><td>产品 A</td><td>200</td></tr>
          <tr><td>产品 B</td><td>400</td></tr>
       </table>
    </div>
    <div class="panel panel-default">
       <div class="panel-heading">面板标题</div>
       <table class="table">
          <th>产品</th><th>价格 </th>
          <tr><td>产品 A</td><td>200</td></tr>
          <tr><td>产品 B</td><td>400</td></tr>
       </table>
    </div>
    
    </body>
    </html>
    

    结果如下所示:

    带表格的面板

    带列表组的面板

    我们可以在任何面板中包含列表组,通过在 <div> 元素中添加 .panel.panel-default 类来创建面板,并在面板中添加列表组。您可以从 列表组 一章中学习如何创建列表组。

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 带列表组的面板</title>
       <link rel="nofollow" href="http://www.rocksun.cn/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="http://www.rocksun.cn/scripts/jquery.min.js"></script>
       <script src="http://www.rocksun.cn/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="panel panel-default">
       <div class="panel-heading">面板标题</div>
          <div class="panel-body">
             <p>这是一个基本的面板内容。这是一个基本的面板内容。
             这是一个基本的面板内容。这是一个基本的面板内容。
             这是一个基本的面板内容。这是一个基本的面板内容。
    		 这是一个基本的面板内容。这是一个基本的面板内容。
             </p>
       </div>
       <ul class="list-group">
          <li class="list-group-item">免费域名注册</li>
          <li class="list-group-item">免费 Window 空间托管</li>
          <li class="list-group-item">图像的数量</li>
          <li class="list-group-item">24*7 支持</li>
          <li class="list-group-item">每年更新成本</li>
       </ul>
    </div>
    
    </body>
    </html>
    

    结果如下所示:

    带列表组的面板

    本文转载自:w3cschool
    本站文章除注明转载外,均为本站原创或编译?;队魏涡问降淖?,但请务必注明出处。
    转载请注明:文章转载自 七星彩票平台
    本文标题:【bootstrap教程】Bootstrap 面板(Panels)
    IT技术书籍推荐:
    Android编程权威指南
    Android编程权威指南
    菲利普斯 (Brian Hardy) (作者), 哈迪 (Bill Phillips) (作者), 王明发 (译者)
    Big Nerd Ranch是美国一家专业的移动开发技术培训机构,《Android编程权威指南》主要以训练营的5天教学课程为基础,融合了两位作者多年的心得体会,是一本完全面向实战的Android 编程权威指南?!禔ndroid编程权威指南》共37章,详细介绍了GeoQuiz、HelloMoon、DragAndDraw等8个Android应用。这些应用的难易程度不一,最复杂的CriminalIntent应用占用了13章的篇幅。通过这些精心设计的应用,读者可掌握很多重要的理论知识和开发技巧,获得最前沿的开发经验。   如果你熟悉Java语言,或者了解对面向对象编程,那就立刻开始Android编程之旅吧!