H-ui
/
demo.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<title>Helo,H-ui</title>
<meta name="keywords" content="关键词,5个左右,单个8汉字以内">
<meta name="description" content="网站描述，字数尽量空制在80个汉字，160个字符以内！">
<link rel="Bookmark" href="/favicon.ico" >
<link rel="Shortcut Icon" href="/favicon.ico" />
<!--[if lt IE 9]>
<script type="text/javascript" src="Lib/html5.js"></script>
<script type="text/javascript" src="Lib/respond.min.js"></script>
<script type="text/javascript" src="Lib/PIE_IE678.js"></script>
<![endif]-->
<link href="static/h-ui/css/H-ui.css" rel="stylesheet" type="text/css" />
<link href="static/h-ui/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!--[if IE 7]>
<link href="static/h-ui/css/font-awesome-ie7.min.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link href="static/h-ui/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Lib/jquery.min.js"></script>
<!--[if IE 6]>
<script type="text/javascript" src="Lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('.pngfix,.icon');</script>
<![endif]-->
</head>
<body>
<header class="header">
  <nav class="mainnav">
    <ul class="cl">
      <li class="current"><a href="#">首页</a></li>
      <li><a href="#">核心</a></li>
      <li><a href="#">扩展</a></li>
      <li><a href="#">案例</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
</header>
<div class="wp cl mt-15 f-14">
  <h1>Helo,H-ui!</h1>
  <p>开始前端之旅！</p>
  <p>
    <input type="text" placeholder="文本框" class="input-text">
    <input class="btn btn-default" type="button" value="按钮">
    文字</p>
  <p><input type="password" placeholder="密码" class="input-text"></p>
  <p><textarea style="width:200px;" placeholder="说点什么..." class="textarea" rows="" cols="" name=""></textarea></p>
  <p><span class="btn-upload">
          <input type="text" readonly id="uploadfile_1" name="uploadfile_1" class="input-text upload-url">
          <a class="btn btn-default radius" href="javascript:void();" style="z-index:2;">浏览</a>
          <input type="file" class="input-file" name="file_0" multiple>
        </span></p>
  <p>
  <table class="table table-border table-bordered table-striped">
    <thead>
      <tr>
        <th class="col1">button</th>
        <th class="col2">input</th>
        <th class="col3">a</th>
        <th class="col4">disabled状态</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><button class="btn btn-default radius" type="button">默认</button></td>
        <td><input class="btn btn-default radius" type="button" value="默认"></td>
        <td><a href="#" class="btn btn-default radius">默认</a></td>
        <td><input class="btn btn-default radius disabled" type="button" value="不可点击"></td>
      </tr>
      <tr>
        <td><button class="btn btn-primary radius" type="button">主要</button></td>
        <td><input class="btn btn-primary radius" type="button" value="主要"></td>
        <td><a href="#" class="btn btn-primary radius">主要</a></td>
        <td><input class="btn btn-primary radius disabled" type="button" value="不可点击"></td>
      </tr>
      <tr>
        <td><button class="btn btn-info radius" type="button">信息</button></td>
        <td><input class="btn btn-info radius" type="button" value="信息"></td>
        <td><a href="#" class="btn btn-info radius">信息</a></td>
        <td><input class="btn btn-info radius disabled" type="button" value="不可点击"></td>
      </tr>
      <tr>
        <td><button class="btn btn-success radius" type="button">成功</button></td>
        <td><input class="btn btn-success radius" type="button" value="成功"></td>
        <td><a href="#" class="btn btn-success radius">成功</a></td>
        <td><input class="btn btn-success radius disabled" type="button" value="不可点击"></td>
      </tr>
      <tr>
        <td><button class="btn btn-warning radius" type="button">错误</button></td>
        <td><input class="btn btn-warning radius" type="button" value="错误"></td>
        <td><a href="#" class="btn btn-warning radius">错误</a></td>
        <td><input class="btn btn-warning radius disabled" type="button" value="不可点击"></td>
      </tr>
      <tr>
        <td><button class="btn btn-danger radius" type="button">危险</button></td>
        <td><input class="btn btn-danger radius" type="button" value="危险"></td>
        <td><a href="#" class="btn btn-danger radius">危险</a></td>
        <td><input class="btn btn-danger radius disabled" type="button" value="不可点击"></td>
      </tr>
      <tr>
        <td><button class="btn btn-inverse radius" type="button">反向</button></td>
        <td><input class="btn btn-inverse radius" type="button" value="反向"></td>
        <td><a href="#" class="btn btn-inverse radius">反向</a></td>
        <td><input class="btn btn-inverse radius disabled" type="button" value="不可点击"></td>
      </tr>
    </tbody>
  </table>

  </p>


  <p><span class="numberControlBox">
    <input type="number" class="input-text" value="1" min="0">
    </span></p>
  <table class="table table-border table-bordered table-striped">
    <thead>
      <tr>
        <th class="col1">表头</th>
        <th class="col2">表头</th>
        <th class="col3">表头</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th class="col1">类别</th>
        <td class="col2">表格内容</td>
        <td class="col3">表格内容</td>
      </tr>
      <tr>
        <th class="col1">类别</th>
        <td class="col2">表格内容</td>
        <td class="col3">表格内容</td>
      </tr>
      <tr>
        <th class="col1">类别</th>
        <td class="col2">表格内容</td>
        <td class="col3">表格内容</td>
      </tr>
    </tbody>
  </table>
  <div>
    <select name="demo" data-enabled="false">
      <option value="1" selected>默认</option>
      <option value="2">菜单二</option>
      <option value="3">菜单三</option>
    </select>
  </div>
  <div>
    <select name="birth-year" data-enabled="false">
      <option value="">请选择</option>
      <option value="2012">2012</option>
      <option value="2011">2011</option>
      <option value="2010">2010</option>
      <option value="2009">2009</option>
      <option value="2008">2008</option>
      <option value="2007">2007</option>
      <option value="2006">2006</option>
      <option value="2005">2005</option>
      <option value="2004">2004</option>
      <option value="2003">2003</option>
      <option value="2002">2002</option>
      <option value="2001">2001</option>
      <option value="2000">2000</option>
      <option value="1999">1999</option>
      <option value="1998">1998</option>
      <option value="1997">1997</option>
      <option value="1996">1996</option>
      <option value="1995">1995</option>
      <option value="1994">1994</option>
      <option value="1993">1993</option>
      <option value="1992">1992</option>
      <option value="1991">1991</option>
      <option value="1990">1990</option>
      <option value="1790">90后</option>
      <option value="1989">1989</option>
      <option value="1988">1988</option>
      <option value="1987">1987</option>
      <option value="1986">1986</option>
      <option value="1985">1985</option>
      <option value="1984">1984</option>
      <option value="1983">1983</option>
      <option value="1982">1982</option>
      <option value="1981">1981</option>
      <option value="1980">1980</option>
      <option value="1780">80后</option>
      <option value="1979">1979</option>
      <option value="1978">1978</option>
      <option value="1977">1977</option>
      <option value="1976">1976</option>
      <option value="1975">1975</option>
      <option value="1974">1974</option>
      <option value="1973">1973</option>
      <option value="1972">1972</option>
      <option value="1971">1971</option>
      <option value="1970">1970</option>
      <option value="1770">70后</option>
      <option value="1969">1969</option>
      <option value="1968">1968</option>
      <option value="1967">1967</option>
      <option value="1966">1966</option>
      <option value="1965">1965</option>
      <option value="1964">1964</option>
      <option value="1963">1963</option>
      <option value="1962">1962</option>
      <option value="1961">1961</option>
      <option value="1960">1960</option>
      <option value="1760">60后</option>
      <option value="1959">1959</option>
      <option value="1958">1958</option>
      <option value="1957">1957</option>
      <option value="1956">1956</option>
      <option value="1955">1955</option>
      <option value="1954">1954</option>
      <option value="1953">1953</option>
      <option value="1952">1952</option>
      <option value="1951">1951</option>
      <option value="1950">1950</option>
      <option value="1949">1949</option>
      <option value="1948">1948</option>
      <option value="1947">1947</option>
      <option value="1946">1946</option>
      <option value="1945">1945</option>
      <option value="1944">1944</option>
      <option value="1943">1943</option>
      <option value="1942">1942</option>
      <option value="1941">1941</option>
      <option value="1940">1940</option>
      <option value="1939">1939</option>
      <option value="1938">1938</option>
      <option value="1937">1937</option>
      <option value="1936">1936</option>
      <option value="1935">1935</option>
      <option value="1934">1934</option>
      <option value="1933">1933</option>
      <option value="1932">1932</option>
      <option value="1931">1931</option>
      <option value="1930">1930</option>
      <option value="1929">1929</option>
      <option value="1928">1928</option>
      <option value="1927">1927</option>
      <option value="1926">1926</option>
      <option value="1925">1925</option>
      <option value="1924">1924</option>
      <option value="1923">1923</option>
      <option value="1922">1922</option>
      <option value="1921">1921</option>
      <option value="1920">1920</option>
      <option value="1919">1919</option>
      <option value="1918">1918</option>
      <option value="1917">1917</option>
      <option value="1916">1916</option>
      <option value="1915">1915</option>
      <option value="1914">1914</option>
      <option value="1913">1913</option>
      <option value="1912">1912</option>
      <option value="1911">1911</option>
      <option value="1910">1910</option>
      <option value="1909">1909</option>
      <option value="1908">1908</option>
      <option value="1907">1907</option>
      <option value="1906">1906</option>
      <option value="1905">1905</option>
      <option value="1904">1904</option>
      <option value="1903">1903</option>
      <option value="1902">1902</option>
      <option value="1901">1901</option>
      <option value="1900">1900</option>
    </select>
  </div>
</div>
<footer class="footer">
  <p>Copyright &copy;2013-2014 H-ui.net All Rights Reserved.</p>
</footer>
<script type="text/javascript" src="static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="Lib/stickUp.min.js"></script>
<script type="text/javascript" src="Lib/bootstrap-modalmanager.js"></script>
<script type="text/javascript" src="Lib/bootstrap-modal.js"></script>

<!--下方是百度统计代码，请在自己项目中干掉-->
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F080836300300be57b7f34f4b3e97d911' type='text/javascript'%3E%3C/script%3E"));
</script>
</body>
</html>
<!--H-ui前端框架提供前端技术支持 h-ui.net @2015-3-10 -->