VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > HTML >

  • HTML5 教程之Foundation 输入框尺寸

使用网格的列来设置输入框的大小，如 .large-6, .medium-6, 等。

实例



    

  1. 
<form>
    2. 

  2. 
  <div class="row">
    3. 

  3. 
    <div class="large-10 medium-7 columns">
    4. 

  4. 
      <label>large-10 medium-7 (100% on small)
    5. 

  5. 
        <input type="text" placeholder="Name">
    6. 

  6. 
      </label>
    7. 

  7. 
    </div>
    8. 

  8. 
  </div>
    9. 

  9. 
 
    10. 

  10. 
  <div class="row">
    11. 

  11. 
    <div class="small-5 columns">
    12. 

  12. 
      <label>small-5
    13. 

  13. 
        <input type="text" placeholder="Name">
    14. 

  14. 
      </label>
    15. 

  15. 
    </div>
    16. 

  16. 
  </div>
    17. 

  17. 
 
    18. 

  18. 
  <div class="row">
    19. 

  19. 
    <div class="medium-3 columns">
    20. 

  20. 
      <label>medium-3 (100% on small)
    21. 

  21. 
        <input type="text" placeholder="Name">
    22. 

  22. 
      </label>
    23. 

  23. 
    </div>
    24. 

  24. 
  </div>
    25. 

  25. 
</form>
    26. 




复制

实例预览 »



相等大小列



以下演示了相等大小列的实例:





实例




    

  1. 
<form>
    2. 

  2. 
  <div class="row">
    3. 

  3. 
    <div class="medium-4 columns">
    4. 

  4. 
      <label>medium-4 (100% on small, stacked)
    5. 

  5. 
        <input type="text" placeholder="Name">
    6. 

  6. 
      </label>
    7. 

  7. 
    </div>
    8. 

  8. 
 
    9. 

  9. 
    <div class="medium-4 columns">
    10. 

  10. 
      <label>medium-4 (100% on small, stacked)
    11. 

  11. 
        <input type="text" placeholder="Name">
    12. 

  12. 
      </label>
    13. 

  13. 
    </div>
    14. 

  14. 
 
    15. 

  15. 
    <div class="medium-4 columns">
    16. 

  16. 
      <label>medium-4 (100% on small, stacked)
    17. 

  17. 
        <input type="text" placeholder="Name">
    18. 

  18. 
      </label>
    19. 

  19. 
    </div>
    20. 

  20. 
  </div>
    21. 

  21. 
</form>
    22. 




复制

实例预览 »



内联标签



如果你希望你的标签内容显示在左边（不是上边），可以将标签元素 label 放在输入框左边的不同的列上，并使用 .inline 类来设置垂直居中:





实例




    

  1. 
<form>
    2. 

  2. 
  <div class="row">
    3. 

  3. 
    <div class="small-8">
    4. 

  4. 
      <div class="row">
    5. 

  5. 
        <div class="small-3 columns">
    6. 

  6. 
          <label for="name" class="inline right">Name</label>
    7. 

  7. 
        </div>
    8. 

  8. 
        <div class="small-9 columns">
    9. 

  9. 
          <input type="text" id="name" placeholder="First Name..">
    10. 

  10. 
        </div>
    11. 

  11. 
      </div>
    12. 

  12. 
    </div>
    13. 

  13. 
  </div>
    14. 

  14. 
</form>
    15. 




复制

实例预览 »



前置和后置标签



你可以在 <div class="row collapse"> 中添加前置和后置标签，元素为： <element class="postfix"> 或 <elementclass="prefix">。可以使用网格系统来设置前置和后置标签的大小：





实例




    

  1. 
<form>
    2. 

  2. 
  <div class="row">
    3. 

  3. 
    <div class="large-6 columns">
    4. 

  4. 
      <div class="row collapse prefix-radius">
    5. 

  5. 
        <div class="small-3 columns">
    6. 

  6. 
          <span class="prefix">Prefix</span>
    7. 

  7. 
        </div>
    8. 

  8. 
        <div class="small-9 columns">
    9. 

  9. 
          <input type="text" placeholder="Value">
    10. 

  10. 
        </div>
    11. 

  11. 
      </div>
    12. 

  12. 
    </div>
    13. 

  13. 
    <div class="large-6 columns">
    14. 

  14. 
      <div class="row collapse postfix-radius">
    15. 

  15. 
        <div class="small-9 columns">
    16. 

  16. 
          <input type="text" placeholder="Value">
    17. 

  17. 
        </div>
    18. 

  18. 
        <div class="small-3 columns">
    19. 

  19. 
          <span class="postfix">Postfix</span>
    20. 

  20. 
        </div>
    21. 

  21. 
      </div>
    22. 

  22. 
    </div>
    23. 

  23. 
  </div>
    24. 

  24. 
</form>
    25. 




复制

实例预览 »



前置和后置标签按钮



可以使用 <a> 元素添加 .button 类来设置前置和后置按钮:





实例




    

  1. 
<a href="#" class="postfix button">Go</a>
    2. 




复制

实例预览 »



前置和后置标签圆角按钮





实例




    

  1. 
 <form>
    2. 

  2. 
  <div class="row">
    3. 

  3. 
    <div class="large-6 columns">
    4. 

  4. 
      <div class="row collapse prefix-radius">
    5. 

  5. 
        <div class="small-3 columns">
    6. 

  6. 
          <span class="prefix">Prefix</span>
    7. 

  7. 
        </div>
    8. 

  8. 
        <div class="small-9 columns">
    9. 

  9. 
          <input type="text" placeholder="Value">
    10. 

  10. 
        </div>
    11. 

  11. 
      </div>
    12. 

  12. 
    </div>
    13. 

  13. 
    <div class="large-6 columns">
    14. 

  14. 
      <div class="row collapse postfix-radius">
    15. 

  15. 
        <div class="small-9 columns">
    16. 

  16. 
          <input type="text" placeholder="Value">
    17. 

  17. 
        </div>
    18. 

  18. 
        <div class="small-3 columns">
    19. 

  19. 
          <span class="postfix">Postfix</span>
    20. 

  20. 
        </div>
    21. 

  21. 
      </div>
    22. 

  22. 
    </div>
    23. 

  23. 
  </div>
    24. 

  24. 
  <div class="row">
    25. 

  25. 
    <div class="large-6 columns">
    26. 

  26. 
      <div class="row collapse prefix-round">
    27. 

  27. 
        <div class="small-3 columns">
    28. 

  28. 
          <a href="#" class="button prefix">Go</a>
    29. 

  29. 
        </div>
    30. 

  30. 
        <div class="small-9 columns">
    31. 

  31. 
          <input type="text" placeholder="Value">
    32. 

  32. 
        </div>
    33. 

  33. 
      </div>
    34. 

  34. 
    </div>
    35. 

  35. 
    <div class="large-6 columns">
    36. 

  36. 
      <div class="row collapse postfix-round">
    37. 

  37. 
        <div class="small-9 columns">
    38. 

  38. 
          <input type="text" placeholder="Value">
    39. 

  39. 
        </div>
    40. 

  40. 
        <div class="small-3 columns">
    41. 

  41. 
          <a href="#" class="button postfix">Go</a>
    42. 

  42. 
        </div>
    43. 

  43. 
      </div>
    44. 

  44. 
    </div>
    45. 

  45. 
  </div>
    46. 

  46. 
</form>
    47. 




复制

实例预览 »



 






    













相关教程