Bootstrap表单使用方法详解

一、表单布局

十载建站经验，网站设计制作、成都做网站客户的见证与正确选择。成都创新互联公司提供完善的营销型网页建站明细报价表。后期开发更加便捷高效，我们致力于追求更美、更快、更规范。

Bootstrap 提供了下列类型的表单布局：

--垂直表单（默认）
--内联表单
--水平表单

（1）垂直或基本表单

基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。

下面列出了创建基本表单的步骤：

--向父

元素添加 role="form"。
--把标签和控件放在一个带有 class .form-group 的

中。这是获取最佳间距所必需的。
--向所有的文本元素、

和 <select> 添加 class .form-control。</p><div><pre><form role="form"> 
 <div class="form-group"> 
 <label for="name">名称</label> 
 <input type="text" class="form-control" id="name" placeholder="请输入名称"> 
 </div> 
 <div class="form-group"> 
 <label for="inputfile">文件输入</label> 
 <input type="file" id="inputfile"> 
 <p class="help-block">这里是块级帮助文本的实例。</p> 
 </div> 
 <div class="checkbox"> 
 <label> 
 <input type="checkbox">请打勾 
 </label> 
 </div> 
 <button type="submit" class="btn btn-default">提交</button> 
</form> 
</pre></div><p><strong><img src="/upload/otherpic76/77105.jpg" alt="Bootstrap表单使用方法详解"></strong></p><p><strong>（2）内联表单<br /></strong></p><p>如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline。</p><div><pre><form class="form-inline" role="form"> 
 <div class="form-group"> 
 <label class="sr-only" for="name">名称</label> 
 <input type="text" class="form-control" id="name" placeholder="请输入名称"> 
 </div> 
 <div class="form-group"> 
 <label class="sr-only" for="inputfile">文件输入</label> 
 <input type="file" id="inputfile"> 
 </div> 
 <div class="checkbox"> 
 <label> 
 <input type="checkbox">请打勾 
 </label> 
 </div> 
 <button type="submit" class="btn btn-default">提交</button> 
</form> 
</pre></div><p><img src="/upload/otherpic76/77106.jpg" alt="Bootstrap表单使用方法详解"></p><p>默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。<br /><strong>注：</strong>使用 class .sr-only，您可以隐藏内联表单的标签。</p><p><strong>（3）水平表单<br /></strong></p><p>水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：<br /><strong>--</strong>向父 <form> 元素添加 class .form-horizontal。<br /><strong>--</strong>把标签和控件放在一个带有 class .form-group 的 <div> 中。<br /><strong>--</strong>向标签添加 class .control-label。</p><div><pre><form class="form-horizontal" role="form"> 
 <div class="form-group"> 
 <label for="firstname" class="col-sm-2 control-label">名字</label> 
 <div class="col-sm-10"> 
 <input type="text" class="form-control" id="firstname" placeholder="请输入名字"> 
 </div> 
 </div> 
 <div class="form-group"> 
 <label for="lastname" class="col-sm-2 control-label">姓</label> 
 <div class="col-sm-10"> 
 <input type="text" class="form-control" id="lastname" placeholder="请输入姓"> 
 </div> 
 </div> 
 <div class="form-group"> 
 <div class="col-sm-offset-2 col-sm-10"> 
 <div class="checkbox"> 
 <label> 
  <input type="checkbox">请记住我 
 </label> 
 </div> 
 </div> 
 </div> 
 <div class="form-group"> 
 <div class="col-sm-offset-2 col-sm-10"> 
 <button type="submit" class="btn btn-default">登录</button> 
 </div> 
 </div> 
</form> 
</pre></div><p><strong><img src="/upload/otherpic76/77107.jpg" alt="Bootstrap表单使用方法详解"></strong></p><p><strong>二、支持的表单控件<br /></strong></p><p>Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。</p><p><strong>（1）输入框</strong><br />Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。适当的 type 声明是必需的，这样才能让 input 获得完整的样式。<br /><strong>（2）文本框<br /></strong></p><p><strong>（3）复选框和单选框<br /></strong>对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。<br /><strong>（4）选择框</strong></p><p>使用 multiple="multiple" 允许用户选择多个选项。</p><p><strong>三、静态控件<br /></strong>当您需要在一个水平表单内的表单标签后放置纯文本时，请在 <p> 上使用 class .form-control-static。</p><p><strong>四、表单控件状态<br /></strong></p><p>除了 :focus 状态外，Bootstrap 还为禁用的输入框定义了样式，并提供了表单验证的 class。</p><p>（1）输入框焦点<br />当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。</p><p>（2）禁用的输入框 input<br />如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。</p><p>（3）禁用的字段集 fieldset<br />对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。</p><p>（4）验证状态<br />Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。</p><div><pre><form class="form-horizontal" role="form"> 
 <div class="form-group"> 
 <label class="col-sm-2 control-label">聚焦</label> 
 <div class="col-sm-10"> 
  <input class="form-control" id="focusedInput" type="text" value="该输入框获得焦点..."> 
 </div> 
 </div> 
 <div class="form-group"> 
 <label for="inputPassword" class="col-sm-2 control-label">禁用</label> 
 <div class="col-sm-10"> 
  <input class="form-control" id="disabledInput" type="text" placeholder="该输入框禁止输入..." disabled> 
 </div> 
 </div> 
 <fieldset disabled> 
 <div class="form-group"> 
  <label for="disabledTextInput" class="col-sm-2 control-label">禁用输入（Fieldset disabled）</label> 
  <div class="col-sm-10"> 
  <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入"> 
  </div> 
 </div> 
 <div class="form-group"> 
  <label for="disabledSelect" class="col-sm-2 control-label">禁用选择菜单（Fieldset disabled）</label> 
  <div class="col-sm-10"> 
  <select id="disabledSelect" class="form-control"> 
   <option>禁止选择</option> 
  </select> 
  </div> 
 </div> 
 </fieldset> 
 <div class="form-group has-success"> 
 <label class="col-sm-2 control-label" for="inputSuccess">输入成功</label> 
 <div class="col-sm-10"> 
  <input type="text" class="form-control" id="inputSuccess"> 
 </div> 
 </div> 
 <div class="form-group has-warning"> 
 <label class="col-sm-2 control-label" for="inputWarning">输入警告</label> 
 <div class="col-sm-10"> 
  <input type="text" class="form-control" id="inputWarning"> 
 </div> 
 </div> 
 <div class="form-group has-error"> 
 <label class="col-sm-2 control-label" for="inputError">输入错误</label> 
 <div class="col-sm-10"> 
  <input type="text" class="form-control" id="inputError"> 
 </div> 
 </div> 
</form> 
</pre></div><p><strong><img src="/upload/otherpic76/77108.jpg" alt="Bootstrap表单使用方法详解"></strong></p><p><strong>五、表单控件大小<br /></strong>您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。</p><div><pre><form role="form"> 
 <div class="form-group"> 
 <input class="form-control input-lg" type="text" placeholder=".input-lg"> 
 </div> 
 <div class="form-group"> 
 <input class="form-control" type="text" placeholder="默认输入"> 
 </div> 
 <div class="form-group"> 
 <input class="form-control input-sm" type="text" placeholder=".input-sm"> 
 </div> 
 <div class="form-group"></div> 
 <div class="form-group"> 
 <select class="form-control input-lg"> 
  <option value="">.input-lg</option> 
 </select> 
 </div> 
 <div class="form-group"> 
 <select class="form-control"> 
  <option value="">默认选择</option> 
 </select> 
 </div> 
 <div class="form-group"> 
 <select class="form-control input-sm"> 
  <option value="">.input-sm</option> 
 </select> 
 </div> 
 <div class="row"> 
 <div class="col-lg-2"> 
  <input type="text" class="form-control" placeholder=".col-lg-2"> 
 </div> 
 <div class="col-lg-3"> 
  <input type="text" class="form-control" placeholder=".col-lg-3"> 
 </div> 
 <div class="col-lg-4"> 
  <input type="text" class="form-control" placeholder=".col-lg-4"> 
 </div> 
 </div> 
</form> 
</pre></div><p><strong><img src="/upload/otherpic76/77109.jpg" alt="Bootstrap表单使用方法详解"></strong></p><p><strong>六、表单帮助文本<br /></strong></p><p>Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在 <input> 后使用 .help-block。</p><div><pre><form role="form"> 
 <span>帮助文本实例</span> 
 <input class="form-control" type="text" placeholder=""> 
 <span class="help-block">一个较长的帮助文本块，超过一行， 
 需要扩展到下一行。本实例中的帮助文本总共有两行。</span> 
</form> </pre></div><p><img src="/upload/otherpic76/77110.jpg" alt="Bootstrap表单使用方法详解"></p><p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。</p>            
            
                        <br>
            网页名称：Bootstrap表单使用方法详解            <br>
            标题网址：<a href="http://shouzuofang.com/article/ppjooj.html">http://shouzuofang.com/article/ppjooj.html</a>
        </div>
    </div>
    <div class="other">
        <h3>其他资讯</h3>
        <ul>
            <li>
                    <a href="/article/ddooccj.html">php指定数据类型 php中数据类型</a>
                </li><li>
                    <a href="/article/ddoosed.html">mysql证书怎么考 mysql的认证考试多少钱</a>
                </li><li>
                    <a href="/article/ddoossh.html">linux查询分区命令 linux查看各分区情况命令</a>
                </li><li>
                    <a href="/article/ddoosge.html">ChatGPT官网已经满负荷 智能聊天满负荷怎么办</a>
                </li><li>
                    <a href="/article/ddoosei.html">关于SAP系统经验的信息</a>
                </li>        </ul>
    </div>
</div>
<footer>
    <div class="message">
        <div class="mess container">
            <p>免费获取网站建设与品牌策划方案报价</p>
            <span>*主要业务范围包括：高端网站建设， 集团网站建设(网站建设网站制作)找网站建设公司就上四川攀枝花网站建设。</span>
            <form action="">
                <input type="text" class="ipt1" placeholder="联系人">
                <input type="text" class="ipt2" placeholder="联系电话">
                <textarea name="" id=""  placeholder="内容描述：描述您的需求，如网站、微信、电商、APP等。">

提交需求

联系我们

028-86922220

手机：13518219792
地址：成都市太升南路288号锦天国际A幢1002号
24小时服务热线：400-028-6601

网站建设服务

网页设计
网站制作
网站开发

网站推广服务

营销网站建设
百度快速排名
整站网站推广

网站运维服务

基础维护
网站改版
网站维护

微信二维码

微信二维码

友情链接：香港云虚拟主机品牌网站建设 scyucang.com 成都企业网站建设网站建设研帮主微信服务号订阅号开发成都谷歌推广服务器租用公路打桩机

网站建设知识

Bootstrap表单使用方法详解

联系我们

网站建设服务

网站推广服务

网站运维服务

FOLLOW US