Skip to content

Z
zui

zzx_123123 / zui
与 Fork 源项目一致

Fork自 易企天创 / zui

通知 1
Star 0
Fork 0
Z
zui

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

切换分支/标签
查找文件 普通视图历史永久链接Permalink
grid.html 4.9 KB
Newer Older
C
* change file structure.  
Catouse 已提交
1 2 3 4 5 6 7 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>ZUI</title>
A
* change the doc of progress same with semantic-ui.  
azhi 已提交
8 
  <link rel="stylesheet/less" type="text/css" href="../src/less/zui.less" />
C
* change file structure.  
Catouse 已提交
9 
  <script type="text/javascript"> less = { env: "development", dumpLineNumbers:'mediaquery' }; </script>
C
* update examples.  
Catouse 已提交
10 
  <script src="../assets/js/less.js"></script>
C
* updated zui.chanzhi.less.  
Catouse 已提交
11 
  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
C
* update example files.  
Catouse 已提交
12 13 
  <link href="../assets/css/doc.css" rel="stylesheet">
  <!-- Latest compiled and minified JavaScript -->
C
* update examples.  
Catouse 已提交
14 
  <script src="../assets/js/jquery.js"></script>
C
* update examples.  
Catouse 已提交
15 
  <script src="../dist/js/zui.min.js"></script>
C
* added debug.js.  
Catouse 已提交
16 
  <script src="../src/js/debug.js"></script>
C
* update examples.  
Catouse 已提交
17 18
C
* update examples.  
Catouse 已提交
19 20 21 22 
  <!--[if lt IE 9]>
  <script src="../assets/js/html5shiv.js"></script>
  <script src="../assets/js/respond.js"></script>
  <![endif]-->
C
* update examples.  
Catouse 已提交
23 
  <script src="../assets/js/doc.js"></script>
C
* change file structure.  
Catouse 已提交
24 25 26 
</head>

<body>
C
* update examples.  
Catouse 已提交
27 28 29 30 31 32 33 34 35 36 37 38 39 
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">ZUI</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav">
        <li class="dropdown">
C
* update examples.  
Catouse 已提交
40 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span id="navbarCurrent">examples</span> <b class="caret"></b></a>
C
* update examples.  
Catouse 已提交
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 
          <ul class="dropdown-menu" role="menu">
            <li><a href="alerts.html">alerts</a></li>
            <li><a href="article.html">article</a></li>
            <li><a href="breadcrumb.html">breadcrumb</a></li>
            <li><a href="button-groups.html">button-groups</a></li>
            <li><a href="buttons.html">buttons</a></li>
            <li><a href="cards.html">cards</a></li>
            <li><a href="carousel.html">carousel</a></li>
            <li><a href="chosen.html">chosen</a></li>
            <li><a href="collapse.html">collapse</a></li>
            <li><a href="comment.html">comment</a></li>
            <li><a href="dropdowns.html">dropdowns</a></li>
            <li><a href="forms.html">forms</a></li>
            <li><a href="grid.html">grid</a></li>
            <li><a href="icons.html">icons</a></li>
            <li><a href="input-groups.html">input-groups</a></li>
            <li><a href="kindeditor.html">kindeditor</a></li>
            <li><a href="labels.html">labels</a></li>
C
* added lightbox.  
Catouse 已提交
59 
            <li><a href="lightbox.html">Lightbox</a></li>
C
* update examples.  
Catouse 已提交
60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 
            <li><a href="list-group.html">list-group</a></li>
            <li><a href="list.html">list</a></li>
            <li><a href="modals.html">modals</a></li>
            <li><a href="navbars.html">navbars</a></li>
            <li><a href="navs.html">navs</a></li>
            <li><a href="pager.html">pager</a></li>
            <li><a href="panels.html">panels</a></li>
            <li><a href="popovers.html">popovers</a></li>
            <li><a href="progress.html">progress</a></li>
            <li><a href="tables.html">tables</a></li>
            <li><a href="tabs.html">tabs</a></li>
            <li><a href="textbox.html">textbox</a></li>
            <li><a href="tooltip.html">tooltip</a></li>
            <li><a href="type.html">type</a></li>
          </ul>
        </li>
C
* update examples.  
Catouse 已提交
76 
        <li id="navbarNext"><a href="###">NEXT <i class="icon-angle-right icon-large"></i></a></li>
C
* update examples.  
Catouse 已提交
77 78 79 
      </ul>
    </div>
  </nav>
C
* change file structure.  
Catouse 已提交
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 127 128 
<style>
.row { margin-bottom: 20px; }
.row .row { margin-top: 10px; margin-bottom: 0; }
[class*="col-"] {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
  border: 1px solid #ddd;
  background-color: rgba(86,61,124,.15);
  border: 1px solid rgba(86,61,124,.2);
}

</style>
<div class='container'>
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    <!-- Optional: clear the XS cols if their content doesn't match in height -->
    <div class="clearfix visible-xs"></div>
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  </div>

  <div class="row">
    <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
    <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
  </div>

</div>
</body>
</html>