zoukankan      html  css  js  c++  java
  • Bootstrap 面板(Panels)

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

    <div class="panel panel-default">
       <div class="panel-body">
          这是一个基本的面板
       </div>
    </div>

    二、面板标题

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

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

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

    <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>

    三、面板脚注

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

    <div class="panel panel-default">
       <div class="panel-body">
          这是一个基本的面板
       </div>
       <div class="panel-footer">面板脚注</div>
    </div>

    四、带语境色彩的面板

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

    <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>
  • 相关阅读:
    第十章、数据库运行维护与优化
    第九章、安全管理
    第八章、数据库后台编程技术
    第七章、高级数据库查询
    第六章、数据库及数据库对象
    第五章、UML与数据库应用系统
    第四章、数据库应用系统功能设计与实施
    struts2标签debug
    SSH框架 more than one namespace has been specificed without a prefix
    Http Status 404
  • 原文地址:https://www.cnblogs.com/hjbky/p/7018290.html
Copyright © 2011-2022 走看看