Skip to content

Z
zui

易企天创 / zui
12 个月 前同步成功

通知 6
Star 0
Fork 1
Z
zui

体验新版 GitCode，发现更多精彩内容 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
panels.html 3.7 KB
Newer Older
A
* finish task#1742.  
azhi 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>ZUI</title>
  <link rel="stylesheet/less" type="text/css" href="../src/less/zui.less" />
  <script type="text/javascript"> less = { env: "development", dumpLineNumbers:'mediaquery' }; </script>
  <script type="text/javascript" src="../assets/js/less.js"></script>
</head>

<body>
  <section id='panels' class="page-section">
    <div class="page-header"><h1>面板</h1></div>

    <h3>类型</h3>
    <h4>基本类型</h4>
    <div class="panel">
      <div class="panel-body">默认的.panel所做的只是提供基本的边界和内部，来包含内容。</div>
    </div>
    <h4>带标题</h4>
    <div class="panel">
      <div class="panel-heading">面板标题</div>
      <div class="panel-body">面板内容</div>
    </div>
    <h4>带脚注</h4>
    <div class="panel">
      <div class="panel-body">面板内容</div>
      <div class="panel-footer">面板脚注</div>
    </div>

    <h3>变化</h3>
    <h4>颜色</h4>
    <div class="panel panel-primary">
      <div class="panel-heading">.panel-primary</div>
      <div class="panel-body">面板内容</div>
    </div>
    <div class="panel panel-success">
      <div class="panel-heading">.panel-success</div>
      <div class="panel-body">面板内容</div>
    </div>
    <div class="panel panel-warning">
      <div class="panel-heading">.panel-warning</div>
      <div class="panel-body">面板内容</div>
    </div>
    <div class="panel panel-danger">
      <div class="panel-heading">.panel-danger</div>
      <div class="panel-body">面板内容</div>
    </div>
    <div class="panel panel-info">
      <div class="panel-heading">.panel-info</div>
      <div class="panel-body">面板内容</div>
    </div>

    <h4>包含表格</h4>
    <div class="panel">
      <!-- Default panel contents -->
      <div class="panel-heading">Panel heading</div>
      <!-- Table -->
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>
    <h4>包含列表</h4>
    <div class="panel">
      <div class="panel-heading">Panel heading</div>
      <ul class="list-group">
        <li class="list-group-item">todo</li>
        <li class="list-group-item">story</li>
        <li class="list-group-item">task</li>
        <li class="list-group-item">bug</li>
        <li class="list-group-item">case</li>
      </ul>
    </div>

    <h4>面板组</h4>
    <div class='panel-group'>
      <div class="panel">
        <div class="panel-heading">面板标题</div>
        <div class="panel-body">面板内容</div>
        <div class="panel-footer">面板脚注</div>
      </div>
      <div class="panel">
        <div class="panel-heading">面板标题</div>
        <div class="panel-body">面板内容</div>
        <div class="panel-footer">面板脚注</div>
      </div>
      <div class="panel">
        <div class="panel-heading">面板标题</div>
        <div class="panel-body">面板内容</div>
        <div class="panel-footer">面板脚注</div>
      </div>
    </div>

  </section>
</body>
</html>