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. 
	

	

		复制

	实例预览 »



	 


      



  

  
  

   
    
    
   

  

  
 
 

 
 
  
 
 
 
 






 






相关教程