Bootstrap 基本表单


基本表单

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input><textarea><select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤:

向父 <form> 元素添加 role="form"
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control

Example block-level help text here.

  1. <form role="form"> 
  2.   <div class="form-group"> 
  3.     <label for="exampleInputEmail1">Email address</label> 
  4.     <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> 
  5.   </div> 
  6.   <div class="form-group"> 
  7.     <label for="exampleInputPassword1">Password</label> 
  8.     <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> 
  9.   </div> 
  10.   <div class="form-group"> 
  11.     <label for="exampleInputFile">File input</label> 
  12.     <input type="file" id="exampleInputFile"> 
  13.     <p class="help-block">Example block-level help text here.</p> 
  14.   </div> 
  15.   <div class="checkbox"> 
  16.     <label> 
  17.       <input type="checkbox"> Check me out 
  18.     </label> 
  19.   </div> 
  20.   <button type="submit" class="btn btn-default">Submit</button> 
  21. </form> 

不要将表单组合输入框组混合使用

不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。


没有找到答案?搜索一下吧!

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)