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

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

实例


	
  1. <form>
  2.   <div class="row">
  3.     <div class="large-10 medium-7 columns">
  4.       <label>large-10 medium-7 (100% on small)
  5.         <input type="text" placeholder="Name">
  6.       </label>
  7.     </div>
  8.   </div>
  9.  
  10.   <div class="row">
  11.     <div class="small-5 columns">
  12.       <label>small-5
  13.         <input type="text" placeholder="Name">
  14.       </label>
  15.     </div>
  16.   </div>
  17.  
  18.   <div class="row">
  19.     <div class="medium-3 columns">
  20.       <label>medium-3 (100% on small)
  21.         <input type="text" placeholder="Name">
  22.       </label>
  23.     </div>
  24.   </div>
  25. </form>
复制
实例预览 »

相等大小列

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

实例


	
  1. <form>
  2.   <div class="row">
  3.     <div class="medium-4 columns">
  4.       <label>medium-4 (100% on small, stacked)
  5.         <input type="text" placeholder="Name">
  6.       </label>
  7.     </div>
  8.  
  9.     <div class="medium-4 columns">
  10.       <label>medium-4 (100% on small, stacked)
  11.         <input type="text" placeholder="Name">
  12.       </label>
  13.     </div>
  14.  
  15.     <div class="medium-4 columns">
  16.       <label>medium-4 (100% on small, stacked)
  17.         <input type="text" placeholder="Name">
  18.       </label>
  19.     </div>
  20.   </div>
  21. </form>
复制
实例预览 »

内联标签

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

实例


	
  1. <form>
  2.   <div class="row">
  3.     <div class="small-8">
  4.       <div class="row">
  5.         <div class="small-3 columns">
  6.           <label for="name" class="inline right">Name</label>
  7.         </div>
  8.         <div class="small-9 columns">
  9.           <input type="text" id="name" placeholder="First Name..">
  10.         </div>
  11.       </div>
  12.     </div>
  13.   </div>
  14. </form>
复制
实例预览 »

前置和后置标签

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

实例


	
  1. <form>
  2.   <div class="row">
  3.     <div class="large-6 columns">
  4.       <div class="row collapse prefix-radius">
  5.         <div class="small-3 columns">
  6.           <span class="prefix">Prefix</span>
  7.         </div>
  8.         <div class="small-9 columns">
  9.           <input type="text" placeholder="Value">
  10.         </div>
  11.       </div>
  12.     </div>
  13.     <div class="large-6 columns">
  14.       <div class="row collapse postfix-radius">
  15.         <div class="small-9 columns">
  16.           <input type="text" placeholder="Value">
  17.         </div>
  18.         <div class="small-3 columns">
  19.           <span class="postfix">Postfix</span>
  20.         </div>
  21.       </div>
  22.     </div>
  23.   </div>
  24. </form>
复制
实例预览 »

前置和后置标签按钮

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

实例


	
  1. <a href="#" class="postfix button">Go</a>
复制
实例预览 »

前置和后置标签圆角按钮

实例


	
  1.  <form>
  2.   <div class="row">
  3.     <div class="large-6 columns">
  4.       <div class="row collapse prefix-radius">
  5.         <div class="small-3 columns">
  6.           <span class="prefix">Prefix</span>
  7.         </div>
  8.         <div class="small-9 columns">
  9.           <input type="text" placeholder="Value">
  10.         </div>
  11.       </div>
  12.     </div>
  13.     <div class="large-6 columns">
  14.       <div class="row collapse postfix-radius">
  15.         <div class="small-9 columns">
  16.           <input type="text" placeholder="Value">
  17.         </div>
  18.         <div class="small-3 columns">
  19.           <span class="postfix">Postfix</span>
  20.         </div>
  21.       </div>
  22.     </div>
  23.   </div>
  24.   <div class="row">
  25.     <div class="large-6 columns">
  26.       <div class="row collapse prefix-round">
  27.         <div class="small-3 columns">
  28.           <a href="#" class="button prefix">Go</a>
  29.         </div>
  30.         <div class="small-9 columns">
  31.           <input type="text" placeholder="Value">
  32.         </div>
  33.       </div>
  34.     </div>
  35.     <div class="large-6 columns">
  36.       <div class="row collapse postfix-round">
  37.         <div class="small-9 columns">
  38.           <input type="text" placeholder="Value">
  39.         </div>
  40.         <div class="small-3 columns">
  41.           <a href="#" class="button postfix">Go</a>
  42.         </div>
  43.       </div>
  44.     </div>
  45.   </div>
  46. </form>
复制
实例预览 »
 

相关教程