• 置业指南:买高层要注意这些问题 2018-05-22
  • い羛琩矪堵旧笴眏い瓣笴潦ㄆン 2018-05-22
  • 有力有序有效防范化解煤电产能过剩风险 2018-05-22
  • 美好生活的价值追求和实现路径-社会关注-理论频道-中工网 2018-05-21
  • 保罗亲手为自己圆梦 火箭勇士双双会师西部决赛 2018-05-21
  • Floating production, storage and offloading vessel delivered in Qingdao 2018-05-20
  • 汽車定位跟蹤官員意圖敲詐 追蹤器該怎麼管 2018-05-20
  • 工作队精准发力助力贫困村“摘帽” 2018-05-20
  • 中消协发布榨汁机比较试验结果 2018-05-20
  • 游花海林芝,赏野生桃花 2018林芝桃花节29日开幕 2018-05-20
  • 19米99轻松卫冕 巩立姣:没突破20米有点可惜 2018-05-18
  • 海南省工商局出实招提高干部素质 强化工作作风 2018-05-18
  • 栾蕾英亮相TOP100时尚盛典 盛装亮相仙气十足 2018-05-18
  • 以合法形式掩盖非法目的的合同效力 2018-05-18
  • 4月解放领跑重卡行业 红岩保持增幅第一 2018-05-17
  • 【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编程之旅吧!