Skip to content

Z
zui

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

通知 6
Star 0
Fork 1
Z
zui

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

切换分支/标签
查找文件 普通视图历史永久链接Permalink
input-groups.html 4.7 KB
Newer Older
A
* add input-groups and forms.  
azhi 已提交
1 2 3 4 5 6 7 8 9 10 11 
<!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 href="../dist/css/zui.css" rel="stylesheet">
  <link href="../assets/css/doc.css" rel="stylesheet">
  <link rel="stylesheet/less" type="text/css" href="../src/less/zui.less" />
  <script type="text/javascript"> less = { env: "development", dumpLineNumbers:'mediaquery' }; </script>
C
* update examples.  
Catouse 已提交
12 13 
  <script src="../assets/js/less.js"></script>
  <script src="../assets/js/jquery.js"></script>
C
* update examples.  
Catouse 已提交
14 15 16 
  <script src="../dist/js/zui.min.js"></script>
C
* update examples.  
Catouse 已提交
17 18 19 20 
  <!--[if lt IE 9]>
  <script src="../assets/js/html5shiv.js"></script>
  <script src="../assets/js/respond.js"></script>
  <![endif]-->
C
* update examples.  
Catouse 已提交
21 
  <script src="../assets/js/doc.js"></script>
A
* add input-groups and forms.  
azhi 已提交
22 23 24 
</head>

<body>
C
* update examples.  
Catouse 已提交
25 26 27 28 29 30 31 32 33 34 35 36 37 
  <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 已提交
38 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span id="navbarCurrent">examples</span> <b class="caret"></b></a>
C
* update examples.  
Catouse 已提交
39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 
          <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 已提交
57 
            <li><a href="lightbox.html">Lightbox</a></li>
C
* update examples.  
Catouse 已提交
58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 
            <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 已提交
74 
        <li id="navbarNext"><a href="###">NEXT <i class="icon-angle-right icon-large"></i></a></li>
C
* update examples.  
Catouse 已提交
75 76 77 
      </ul>
    </div>
  </nav>
A
* add input-groups and forms.  
azhi 已提交
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 
<article>
  <section id='input-groups' class="page-section">
    <div class="page-header"><h1>输入框组</h1></div>

    <h3>类型</h3>
    <h4>基本类型</h4>
    <div class="input-group">
      <span class="input-group-addon">@</span>
        <input type="text" class="form-control" placeholder="Username">
<span class="glyphicon glyphicon-star"></span> 
    </div>

    <h4>单选框和复选框</h4>
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox">
      </span>
      <input type="text" class="form-control">
    </div><br />
     <div class="input-group">
      <span class="input-group-addon">
        <input type="radio">
      </span>
      <input type="text" class="form-control">
    </div>

    <h4>带按钮</h4>
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">搜索</button>
      </span>
    </div>

    <h4>分段按钮</h4>
    <div class="input-group col-md-6">
      <input type="text" class="form-control" placeholder='请输入邮箱地址'>
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" placeholder='请输入邮箱后缀'>
    </div>

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