Bootstrap创建表单（一）-前端--易笔记

Bootstrap表单类型分为三种格式：垂直或基本表单、内联表单、水平表单。

垂直或基本表单(display:block;)

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

向父
元素添加 role="form"。
- 把标签和控件放在一个带有 class .form-group 的
  中。这是获取最佳间距所必需的。
- 向所有的文本元素、和 <select> 添加 class .form-control。 <pre class="brush:java;"><!doctype html> <cke:html lang="en"> <cke:head>  <cke:encoded>%3Cmeta%20http-equiv%3D%22content-type%22%20content%3D%22text%2Fhtml%3Bcharset%3Dutf-8%22%20%2F%3E</cke:encoded> <cke:encoded>%3Cmeta%20http-equiv%3D%22X-UA-Compatible%22%20content%3D%22IE%3Dedge%22%3E</cke:encoded> <cke:encoded>%3Cmeta%20name%3D%22Keywords%22%20content%3D%22%E5%85%B3%E9%94%AE%E8%AF%8D%E4%B8%80%EF%BC%8C%E5%85%B3%E9%94%AE%E8%AF%8D%E4%BA%8C%22%3E</cke:encoded> <cke:encoded>%3Cmeta%20name%3D%22Description%22%20content%3D%22%E7%BD%91%E7%AB%99%E6%8F%8F%E8%BF%B0%E5%86%85%E5%AE%B9%22%3E</cke:encoded> <cke:encoded>%3Cmeta%20name%3D%22Author%22%20content%3D%22Yvette%20Lau%22%3E</cke:encoded> <cke:encoded>%3Cmeta%20name%20%3D%20%22viewport%22%20content%20%3D%20%22%20width%20%3D%20device-width%2C%20initial-scale%20%3D%201%20%22%3E</cke:encoded> <cke:title>BootstrapDemo</cke:title>  <cke:encoded>%3Clink%20rel%3D%22stylesheet%22%20type%3D%22text%2Fcss%22%20href%3D%22..%2Fbootstrap-3.3.5-dist%2Fcss%2Fbootstrap.min.css%22%3E</cke:encoded> </cke:head> <cke:body style="padding: 20px;"> <p class = "col-xs-12 col-sm-6 col-md-4 col-lg-3"> <form role = "form"> <p class = "form-group"> <label for = "name">姓名</label> <input type = "text" class = "form-control" id = "name" placeholder = "请输入姓名"></input> </p> <p class = "form-group"> <label for = "tel">电话号码</label> <input type="text" class="form-control" id = "tel" placeholder = "请输入您的电话号码"></input> </p> <p class = "form-group"> <label for = "idCard">请上传身份证</label> <input type = "file" id = "idCard"></input> </p> <p class = "form-group"> <label for = "profession">选择职业</label> <select id = "profession" class = "form-control"> <option>软件工程师</option> <option>测试工程师</option> <option>硬件工程师</option> <option>质量分析师</option> </select> </p> <p class="form-group"> <button type = "submit" class="btn-info btn-lg">提交</button> </p> </form> </p> </cke:body> </cke:html></pre><br> 效果如下： <p><img data-cke-saved-src=/uploadfile/2016/0105/20160105061651812.png" src=/uploadfile/2016/0105/20160105061651812.png" alt=""><br> </p> <p>如果我们将select的form-control去掉，并给input type = "file"加上form-control，看看效果如何。<br> </p> <p><img data-cke-saved-src=/uploadfile/2016/0105/20160105061651520.png" src=/uploadfile/2016/0105/20160105061651520.png" alt=""><br> </p> <p>是不是能看出和上面效果的区别了呢？这样您大概明白form-control的作用了，它是设置外围的边框效果，包括宽、高、获取</p> <p>焦点时form的样式。<br> </p> <p></p> <p><br> </p> <p> <h2>内联表单（全部在同一行，display为inline-block）</h2> <p>如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline。<br> 因为head部分的内容都是一样的，所以我们只列出body部分的内容。</p> <p><pre class="brush:java;"><cke:body style="padding: 20px;"> <form role = "form" class="form-inline"> <p class = "form-group"> <label for = "name">姓名</label> <input type = "text" class = "form-control" id = "name" placeholder = "请输入姓名"></input> </p> <p class = "form-group"> <label for = "tel">电话号码</label> <input type="text" class="form-control" id = "tel" placeholder = "请输入您的电话号码"></input> </p> <p class = "form-group"> <label for = "idCard">请上传身份证</label> <input type = "file" id = "idCard"></input> </p> <p class = "form-group"> <label for = "profession">选择职业</label> <select id = "profession" class = "form-control"> <option>软件工程师</option> <option>测试工程师</option> <option>硬件工程师</option> <option>质量分析师</option> </select> </p> <p class="form-group"> <button type = "submit" class="btn-info btn-lg">提交</button> </p> </form> </cke:body></pre><br> 显示效果：</p> <p><img data-cke-saved-src=/uploadfile/2016/0105/20160105061651732.png" src=/uploadfile/2016/0105/20160105061651732.png" alt=""><br> </p> <p></p> <ul> <li>默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用水平表单时，您需要在表单控件上设置一个宽度。<li>使用 class .sr-only，可以隐藏内联表单的标签。 <p><br> </p> <p> 注：sr-only是展示给屏幕<a href="http://www.weiyer.com" target="_blank" class="keylink">阅读</a>器，而非是普通的读者看的。</p> <p> 其它元素在form的class为form-inline时，display为inLine-block;但是input tyoe = "file"却仍是display:block，可以看出其布局是有问题的，此时可以单独设置其display为inline-block;<br> </p> <p> <br> </p> <p> <h2><strong>水平表单(label和input等表单元素在同一行)</strong></h2> <p> <p> <p><strong>水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：</strong></p> <p> <p><strong> 1、向父 <form> 元素添加 class .form-horizontal。</strong></p> <p><strong> 2、把标签和控件放在一个带有 class .form-group 的 <p> 中。</strong></p> <p><strong> 3、向标签添加 class .control-label。</strong></p> </p> </p> <p><strong> 4、设置label和其兄弟p的宽度（因为input等默认宽度是100%）。</strong></p> </p> </p> <p></p> <p><pre class="brush:java;"><cke:body style="padding: 20px;"> <form role = "form" class="form-horizontal"> <p class = "form-group"> <label class="col-sm-2 control-label" for = "name">姓名</label> <p class="col-sm-2"> <input type = "text" class = "form-control" id = "name" placeholder = "请输入姓名"></input> </p> </p> <p class = "form-group"> <label class="col-sm-2 control-label" for = "tel">电话号码</label> <p class="col-sm-2"> <input type="text" class="form-control" id = "tel" placeholder = "请输入您的电话号码"></input> </p> </p> <p class = "form-group"> <label class="col-sm-2 control-label" for = "idCard">请上传身份证</label> <p class="col-sm-2"> <input type = "file" id = "idCard" style="display:inline-block;"></input> </p> </p> <p class = "form-group"> <label class="col-sm-2 control-label" for = "profession">选择职业</label> <p class="col-sm-2"> <select id = "profession" class = "form-control"> <option>软件工程师</option> <option>测试工程师</option> <option>硬件工程师</option> <option>质量分析师</option> </select> </p> </p> <p class="form-group"> <p class="col-sm-2 col-sm-offset-2"> <button type = "submit" class="btn-info btn-lg">提交</button> </p> </p> </form> </cke:body></pre><br> 效果：</p> <h6> <p><img data-cke-saved-src=/uploadfile/2016/0105/20160105061651528.png" src=/uploadfile/2016/0105/20160105061651528.png" alt=""><br> </p> </h6> </p> <p></p> <p><br> </p> </p>

时间：2016/1/4 9:22:57

垂直或基本表单(display:block;)