textbox.html 2.0 KB
Newer Older
A
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
<!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='textbox' class="page-section">
    <div class="page-header"><h1>文本框</h1></div>

    <h3>类型</h3>
    <h4>基本类型</h4>
    <table class="table">
      <tr>
        <th width='200px'>文本框</th>
        <th>描述</th>
      </tr>
      <tr>
        <td><input type="text" class='form-control' placeholder="Text input"></td>
        <td>input type='text'</td>
      </tr>
      <tr>
        <td><textarea class='form-control' rows="3"></textarea></td>
        <td>textarea row='3'</td>
      </tr>
      <tr>
        <td>
          <select class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
        </td>
        <td>select </td>
      <tr>
    </table>
   

    <h3>状态</h3>
    <table class="table">
      <tr>
        <th width='200px'>文本框</th>
        <th>描述</th>
      </tr>
      <tr>
        <td><input class="form-control"  type="text" placeholder="Disabled input here..." disabled><br /></td>
        <td>禁用:input type='text' diabled</td>
      </tr>
    </table>

    <h3>变化</h3>
    <h4>宽度</h4>
    <div class="row">
      <div class="col-xs-2">
        <input type="text" class="form-control" placeholder=".col-xs-2">
      </div>
      <div class="col-xs-3">
        <input type="text" class="form-control" placeholder=".col-xs-3">
      </div>
      <div class="col-xs-4">
        <input type="text" class="form-control" placeholder=".col-xs-4">
      </div>
    </div>
  </section>
</body>
</html>