Bootstrap 表单

在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。

成都创新互联专注为客户提供全方位的互联网综合服务，包含不限于网站设计、成都网站制作、鼓楼网络推广、重庆小程序开发、鼓楼网络营销、鼓楼企业策划、鼓楼品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联为所有大学生创业者提供鼓楼建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com

表单布局

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

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

垂直或基本表单

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

• 向父
  元素添加 role="form"。
• 把标签和控件放在一个带有 class .form-group 的
  中。这是获取最佳间距所必需的。
• 向所有的文本元素 、 和 <select> 添加 class ="<i>form-control</i>" 。</li></ul><h2>实例</h2><p><<br />form<br /><br />role<br />=<br />"<br />form<br />"<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />form-group<br />"<br />><br /><br /><<br />label<br /><br />for<br />=<br />"<br />name<br />"<br />><br />名称<br /></<br />label<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />text<br />"<br /><br />class<br />=<br />"<br />form-control<br />"<br /><br />id<br />=<br />"<br />name<br />"<br /><br />placeholder<br />=<br />"<br />请输入名称<br />"<br />><br /><br /></<br />div<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />form-group<br />"<br />><br /><br /><<br />label<br /><br />for<br />=<br />"<br />inputfile<br />"<br />><br />文件输入<br /></<br />label<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />file<br />"<br /><br />id<br />=<br />"<br />inputfile<br />"<br />><br /><br /><<br />p<br /><br />class<br />=<br />"<br />help-block<br />"<br />><br />这里是块级帮助文本的实例。<br /></<br />p<br />><br /><br /></<br />div<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />checkbox<br />"<br />><br /><br /><<br />label<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />checkbox<br />"<br />><br />请打勾<br /></<br />label<br />><br /><br /></<br />div<br />><br /><br /><<br />button<br /><br />type<br />=<br />"<br />submit<br />"<br /><br />class<br />=<br />"<br />btn btn-default<br />"<br />><br />提交<br /></<br />button<br />><br /><br /></<br />form<br />><br /><br /> 尝试一下 »</p><p>结果如下所示：</p><p></p><h3>内联表单</h3><p>如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class <i>.form-inline</i>。</p><h2>实例</h2><p><<br />form<br /><br />class<br />=<br />"<br />form-inline<br />"<br /><br />role<br />=<br />"<br />form<br />"<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />form-group<br />"<br />><br /><br /><<br />label<br /><br />class<br />=<br />"<br />sr-only<br />"<br /><br />for<br />=<br />"<br />name<br />"<br />><br />名称<br /></<br />label<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />text<br />"<br /><br />class<br />=<br />"<br />form-control<br />"<br /><br />id<br />=<br />"<br />name<br />"<br /><br />placeholder<br />=<br />"<br />请输入名称<br />"<br />><br /><br /></<br />div<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />form-group<br />"<br />><br /><br /><<br />label<br /><br />class<br />=<br />"<br />sr-only<br />"<br /><br />for<br />=<br />"<br />inputfile<br />"<br />><br />文件输入<br /></<br />label<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />file<br />"<br /><br />id<br />=<br />"<br />inputfile<br />"<br />><br /><br /></<br />div<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />checkbox<br />"<br />><br /><br /><<br />label<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />checkbox<br />"<br />><br />请打勾<br /></<br />label<br />><br /><br /></<br />div<br />><br /><br /><<br />button<br /><br />type<br />=<br />"<br />submit<br />"<br /><br />class<br />=<br />"<br />btn btn-default<br />"<br />><br />提交<br /></<br />button<br />><br /><br /></<br />form<br />><br /><br /> 尝试一下 »</p><p>结果如下所示：</p><p></p><ul><li>默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。</li><li>使用 class <i>.sr-only</i>，您可以隐藏内联表单的标签。</li></ul><h3>水平表单</h3><p>水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：</p><ul><li>向父 <form> 元素添加 class <i>.form-horizontal</i>。</li><li>把标签和控件放在一个带有 class <i>.form-group</i> 的 <div> 中。</li><li>向标签添加 class <i>.control-label</i>。</li></ul><h2>实例</h2><p><<br />form<br /><br />class<br />=<br />"<br />form-horizontal<br />"<br /><br />role<br />=<br />"<br />form<br />"<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />form-group<br />"<br />><br /><br /><<br />label<br /><br />for<br />=<br />"<br />firstname<br />"<br /><br />class<br />=<br />"<br />col-sm-2 control-label<br />"<br />><br />名字<br /></<br />label<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />col-sm-10<br />"<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />text<br />"<br /><br />class<br />=<br />"<br />form-control<br />"<br /><br />id<br />=<br />"<br />firstname<br />"<br /><br />placeholder<br />=<br />"<br />请输入名字<br />"<br />><br /><br /></<br />div<br />><br /><br /></<br />div<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />form-group<br />"<br />><br /><br /><<br />label<br /><br />for<br />=<br />"<br />lastname<br />"<br /><br />class<br />=<br />"<br />col-sm-2 control-label<br />"<br />><br />姓<br /></<br />label<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />col-sm-10<br />"<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />text<br />"<br /><br />class<br />=<br />"<br />form-control<br />"<br /><br />id<br />=<br />"<br />lastname<br />"<br /><br />placeholder<br />=<br />"<br />请输入姓<br />"<br />><br /><br /></<br />div<br />><br /><br /></<br />div<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />form-group<br />"<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />col-sm-offset-2 col-sm-10<br />"<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />checkbox<br />"<br />><br /><br /><<br />label<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />checkbox<br />"<br />><br />请记住我<br /></<br />label<br />><br /><br /></<br />div<br />><br /><br /></<br />div<br />><br /><br /></<br />div<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />form-group<br />"<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />col-sm-offset-2 col-sm-10<br />"<br />><br /><br /><<br />button<br /><br />type<br />=<br />"<br />submit<br />"<br /><br />class<br />=<br />"<br />btn btn-default<br />"<br />><br />登录<br /></<br />button<br />><br /><br /></<br />div<br />><br /><br /></<br />div<br />><br /><br /></<br />form<br />><br /><br /> 尝试一下 »</p><p>结果如下所示：</p><p><br /></p><h2>支持的表单控件</h2><p>Bootstrap 支持最常见的表单控件，主要是 <i>input、textarea、checkbox、radio 和 select</i>。</p><h3>输入框（Input）</h3><p>最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：<i>text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel</i> 和 <i>color</i>。适当的 <i>type</i> 声明是必需的，这样才能让 <i>input</i> 获得完整的样式。</p><h2>实例</h2><p><<br />form<br /><br />role<br />=<br />"<br />form<br />"<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />form-group<br />"<br />><br /><br /><<br />label<br /><br />for<br />=<br />"<br />name<br />"<br />><br />标签<br /></<br />label<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />text<br />"<br /><br />class<br />=<br />"<br />form-control<br />"<br /><br />placeholder<br />=<br />"<br />文本输入<br />"<br />><br /><br /></<br />div<br />><br /><br /></<br />form<br />><br /><br /> 尝试一下 »</p><p>结果如下所示：</p><p></p><h3>文本框（Textarea）</h3><p>当您需要进行多行输入的时，则可以使用文本框 textarea。必要时可以改变 <i>rows</i> 属性（较少的行 = 较小的盒子，较多的行 = 较大的盒子）。</p><h2>实例</h2><p><<br />form<br /><br />role<br />=<br />"<br />form<br />"<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />form-group<br />"<br />><br /><br /><<br />label<br /><br />for<br />=<br />"<br />name<br />"<br />><br />文本框<br /></<br />label<br />><br /><br /><<br />textarea<br /><br />class<br />=<br />"<br />form-control<br />"<br /><br />rows<br />=<br />"<br />3<br />"<br />><br /></<br />textarea<br />><br /><br /></<br />div<br />><br /><br /></<br />form<br />><br /><br /> 尝试一下 »</p><p>结果如下所示：</p><p></p><h3>复选框（Checkbox）和单选框（Radio）</h3><p>复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。</p><ul><li>当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 <i>checkbox</i>。如果您限制用户只能选择一个选项，请使用 <i>radio</i>。</li><li>对一系列复选框和单选框使用 <i>.checkbox-inline</i> 或 <i>.radio-inline</i> class，控制它们显示在同一行上。</li></ul><p>下面的实例演示了这两种类型（默认和内联）：</p><h2>实例</h2><p><<br />label<br /><br />for<br />=<br />"<br />name<br />"<br />><br />默认的复选框和单选按钮的实例<br /></<br />label<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />checkbox<br />"<br />><br /><br /><<br />label<br />><br /><<br />input<br /><br />type<br />=<br />"<br />checkbox<br />"<br /><br />value<br />=<br />"<br />"<br />><br />选项 1<br /></<br />label<br />><br /><br /></<br />div<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />checkbox<br />"<br />><br /><br /><<br />label<br />><br /><<br />input<br /><br />type<br />=<br />"<br />checkbox<br />"<br /><br />value<br />=<br />"<br />"<br />><br />选项 2<br /></<br />label<br />><br /><br /></<br />div<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />radio<br />"<br />><br /><br /><<br />label<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />radio<br />"<br /><br />name<br />=<br />"<br />optionsRadios<br />"<br /><br />id<br />=<br />"<br />optionsRadios1<br />"<br /><br />value<br />=<br />"<br />option1<br />"<br /><br />checked<br />><br /> 选项 1<br /></<br />label<br />><br /><br /></<br />div<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />radio<br />"<br />><br /><br /><<br />label<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />radio<br />"<br /><br />name<br />=<br />"<br />optionsRadios<br />"<br /><br />id<br />=<br />"<br />optionsRadios2<br />"<br /><br />value<br />=<br />"<br />option2<br />"<br />><br />选项 2 - 选择它将会取消选择选项 1<br /></<br />label<br />><br /><br /></<br />div<br />><br /><br /><<br />label<br /><br />for<br />=<br />"<br />name<br />"<br />><br />内联的复选框和单选按钮的实例<br /></<br />label<br />><br /><br /><<br />div<br />><br /><br /><<br />label<br /><br />class<br />=<br />"<br />checkbox-inline<br />"<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />checkbox<br />"<br /><br />id<br />=<br />"<br />inlineCheckbox1<br />"<br /><br />value<br />=<br />"<br />option1<br />"<br />><br /> 选项 1<br /></<br />label<br />><br /><br /><<br />label<br /><br />class<br />=<br />"<br />checkbox-inline<br />"<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />checkbox<br />"<br /><br />id<br />=<br />"<br />inlineCheckbox2<br />"<br /><br />value<br />=<br />"<br />option2<br />"<br />><br /> 选项 2<br /></<br />label<br />><br /><br /><<br />label<br /><br />class<br />=<br />"<br />checkbox-inline<br />"<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />checkbox<br />"<br /><br />id<br />=<br />"<br />inlineCheckbox3<br />"<br /><br />value<br />=<br />"<br />option3<br />"<br />><br /> 选项 3<br /></<br />label<br />><br /><br /><<br />label<br /><br />class<br />=<br />"<br />radio-inline<br />"<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />radio<br />"<br /><br />name<br />=<br />"<br />optionsRadiosinline<br />"<br /><br />id<br />=<br />"<br />optionsRadios3<br />"<br /><br />value<br />=<br />"<br />option1<br />"<br /><br />checked<br />><br /> 选项 1<br /></<br />label<br />><br /><br /><<br />label<br /><br />class<br />=<br />"<br />radio-inline<br />"<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />radio<br />"<br /><br />name<br />=<br />"<br />optionsRadiosinline<br />"<br /><br />id<br />=<br />"<br />optionsRadios4<br />"<br /><br />value<br />=<br />"<br />option2<br />"<br />><br /> 选项 2<br /></<br />label<br />><br /><br /></<br />div<br />><br /><br /> 尝试一下 »</p><p>结果如下所示：</p><p></p><h3>选择框（Select）</h3><p>当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。</p><ul><li>使用 <select> 展示列表选项，通常是那些用户很熟悉的选择列表，比如州或者数字。</li><li>使用 <i>multiple="multiple"</i> 允许用户选择多个选项。</li></ul><p>下面的实例演示了这两种类型（select 和 multiple）：</p><h2>实例</h2><p><<br />form<br /><br />role<br />=<br />"<br />form<br />"<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />form-group<br />"<br />><br /><br /><<br />label<br /><br />for<br />=<br />"<br />name<br />"<br />><br />选择列表<br /></<br />label<br />><br /><br /><<br />select<br /><br />class<br />=<br />"<br />form-control<br />"<br />><br /><br /><<br />option<br />><br />1<br /></<br />option<br />><br /><br /><<br />option<br />><br />2<br /></<br />option<br />><br /><br /><<br />option<br />><br />3<br /></<br />option<br />><br /><br /><<br />option<br />><br />4<br /></<br />option<br />><br /><br /><<br />option<br />><br />5<br /></<br />option<br />><br /><br /></<br />select<br />><br /><br /><<br />label<br /><br />for<br />=<br />"<br />name<br />"<br />><br />可多选的选择列表<br /></<br />label<br />><br /><br /><<br />select<br /><br />multiple<br /><br />class<br />=<br />"<br />form-control<br />"<br />><br /><br /><<br />option<br />><br />1<br /></<br />option<br />><br /><br /><<br />option<br />><br />2<br /></<br />option<br />><br /><br /><<br />option<br />><br />3<br /></<br />option<br />><br /><br /><<br />option<br />><br />4<br /></<br />option<br />><br /><br /><<br />option<br />><br />5<br /></<br />option<br />><br /><br /></<br />select<br />><br /><br /></<br />div<br />><br /><br /></<br />form<br />><br /><br /> 尝试一下 »</p><p>结果如下所示：</p><p><br /></p><h2>静态控件</h2><p>当您需要在一个水平表单内的表单标签后放置纯文本时，请在 <p> 上使用 class <i>.form-control-static</i>。</p><h2>实例</h2><p><<br />form<br /><br />class<br />=<br />"<br />form-horizontal<br />"<br /><br />role<br />=<br />"<br />form<br />"<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />form-group<br />"<br />><br /><br /><<br />label<br /><br />class<br />=<br />"<br />col-sm-2 control-label<br />"<br />><br />Email<br /></<br />label<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />col-sm-10<br />"<br />><br /><br /><<br />p<br /><br />class<br />=<br />"<br />form-control-static<br />"<br />><br />email@example.com<br /></<br />p<br />><br /><br /></<br />div<br />><br /><br /></<br />div<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />form-group<br />"<br />><br /><br /><<br />label<br /><br />for<br />=<br />"<br />inputPassword<br />"<br /><br />class<br />=<br />"<br />col-sm-2 control-label<br />"<br />><br />密码<br /></<br />label<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />col-sm-10<br />"<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />password<br />"<br /><br />class<br />=<br />"<br />form-control<br />"<br /><br />id<br />=<br />"<br />inputPassword<br />"<br /><br />placeholder<br />=<br />"<br />请输入密码<br />"<br />><br /><br /></<br />div<br />><br /><br /></<br />div<br />><br /><br /></<br />form<br />><br /><br /> 尝试一下 »</p><p>结果如下所示：</p><p><br /></p><h2>表单控件状态</h2><p>除了 <i>:focus</i> 状态（即，用户点击 input 或使用 tab 键聚焦到 input 上），Bootstrap 还为禁用的输入框定义了样式，并提供了表单验证的 class。</p><h3>输入框焦点</h3><p>当输入框 input 接收到 <i>:focus</i> 时，输入框的轮廓会被移除，同时应用 <i>box-shadow</i>。</p><h3>禁用的输入框 input</h3><p>如果您想要禁用一个输入框 input，只需要简单地添加 <i>disabled</i> 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。</p><h3>禁用的字段集 fieldset</h3><p>对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。</p><h3>验证状态</h3><p>Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（<i>.has-warning、 .has-error 或 .has-success</i>）即可使用验证状态。</p><p>下面的实例演示了所有控件状态：</p><h2>实例</h2><p><<br />form<br /><br />class<br />=<br />"<br />form-horizontal<br />"<br /><br />role<br />=<br />"<br />form<br />"<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />form-group<br />"<br />><br /><br /><<br />label<br /><br />class<br />=<br />"<br />col-sm-2 control-label<br />"<br />><br />聚焦<br /></<br />label<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />col-sm-10<br />"<br />><br /><br /><<br />input<br /><br />class<br />=<br />"<br />form-control<br />"<br /><br />id<br />=<br />"<br />focusedInput<br />"<br /><br />type<br />=<br />"<br />text<br />"<br /><br />value<br />=<br />"<br />该输入框获得焦点...<br />"<br />><br /><br /></<br />div<br />><br /><br /></<br />div<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />form-group<br />"<br />><br /><br /><<br />label<br /><br />for<br />=<br />"<br />inputPassword<br />"<br /><br />class<br />=<br />"<br />col-sm-2 control-label<br />"<br />><br />禁用<br /></<br />label<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />col-sm-10<br />"<br />><br /><br /><<br />input<br /><br />class<br />=<br />"<br />form-control<br />"<br /><br />id<br />=<br />"<br />disabledInput<br />"<br /><br />type<br />=<br />"<br />text<br />"<br /><br />placeholder<br />=<br />"<br />该输入框禁止输入...<br />"<br /><br />disabled<br />><br /><br /></<br />div<br />><br /><br /></<br />div<br />><br /><br /><<br />fieldset<br /><br />disabled<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />form-group<br />"<br />><br /><br /><<br />label<br /><br />for<br />=<br />"<br />disabledTextInput<br />"<br /><br />class<br />=<br />"<br />col-sm-2 control-label<br />"<br />><br />禁用输入（Fieldset disabled）<br /></<br />label<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />col-sm-10<br />"<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />text<br />"<br /><br />id<br />=<br />"<br />disabledTextInput<br />"<br /><br />class<br />=<br />"<br />form-control<br />"<br /><br />placeholder<br />=<br />"<br />禁止输入<br />"<br />><br /><br /></<br />div<br />><br /><br /></<br />div<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />form-group<br />"<br />><br /><br /><<br />label<br /><br />for<br />=<br />"<br />disabledSelect<br />"<br /><br />class<br />=<br />"<br />col-sm-2 control-label<br />"<br />><br />禁用选择菜单（Fieldset disabled）<br /></<br />label<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />col-sm-10<br />"<br />><br /><br /><<br />select<br /><br />id<br />=<br />"<br />disabledSelect<br />"<br /><br />class<br />=<br />"<br />form-control<br />"<br />><br /><br /><<br />option<br />><br />禁止选择<br /></<br />option<br />><br /><br /></<br />select<br />><br /><br /></<br />div<br />><br /><br /></<br />div<br />><br /><br /></<br />fieldset<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />form-group has-success<br />"<br />><br /><br /><<br />label<br /><br />class<br />=<br />"<br />col-sm-2 control-label<br />"<br /><br />for<br />=<br />"<br />inputSuccess<br />"<br />><br />输入成功<br /></<br />label<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />col-sm-10<br />"<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />text<br />"<br /><br />class<br />=<br />"<br />form-control<br />"<br /><br />id<br />=<br />"<br />inputSuccess<br />"<br />><br /><br /></<br />div<br />><br /><br /></<br />div<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />form-group has-warning<br />"<br />><br /><br /><<br />label<br /><br />class<br />=<br />"<br />col-sm-2 control-label<br />"<br /><br />for<br />=<br />"<br />inputWarning<br />"<br />><br />输入警告<br /></<br />label<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />col-sm-10<br />"<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />text<br />"<br /><br />class<br />=<br />"<br />form-control<br />"<br /><br />id<br />=<br />"<br />inputWarning<br />"<br />><br /><br /></<br />div<br />><br /><br /></<br />div<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />form-group has-error<br />"<br />><br /><br /><<br />label<br /><br />class<br />=<br />"<br />col-sm-2 control-label<br />"<br /><br />for<br />=<br />"<br />inputError<br />"<br />><br />输入错误<br /></<br />label<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />col-sm-10<br />"<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />text<br />"<br /><br />class<br />=<br />"<br />form-control<br />"<br /><br />id<br />=<br />"<br />inputError<br />"<br />><br /><br /></<br />div<br />><br /><br /></<br />div<br />><br /><br /></<br />form<br />><br /><br /> 尝试一下 »</p><p>结果如下所示：</p><p><br /></p><h2>表单控件大小</h2><p>您可以分别使用 class <i>.input-lg</i> 和 <i>.col-lg-*</i> 来设置表单的高度和宽度。下面的实例演示了这点：</p><h2>实例</h2><p><<br />form<br /><br />role<br />=<br />"<br />form<br />"<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />form-group<br />"<br />><br /><br /><<br />input<br /><br />class<br />=<br />"<br />form-control input-lg<br />"<br /><br />type<br />=<br />"<br />text<br />"<br /><br />placeholder<br />=<br />"<br />.input-lg<br />"<br />><br /><br /></<br />div<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />form-group<br />"<br />><br /><br /><<br />input<br /><br />class<br />=<br />"<br />form-control<br />"<br /><br />type<br />=<br />"<br />text<br />"<br /><br />placeholder<br />=<br />"<br />默认输入<br />"<br />><br /><br /></<br />div<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />form-group<br />"<br />><br /><br /><<br />input<br /><br />class<br />=<br />"<br />form-control input-sm<br />"<br /><br />type<br />=<br />"<br />text<br />"<br /><br />placeholder<br />=<br />"<br />.input-sm<br />"<br />><br /><br /></<br />div<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />form-group<br />"<br />><br /></<br />div<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />form-group<br />"<br />><br /><br /><<br />select<br /><br />class<br />=<br />"<br />form-control input-lg<br />"<br />><br /><br /><<br />option<br /><br />value<br />=<br />"<br />"<br />><br />.input-lg<br /></<br />option<br />><br /><br /></<br />select<br />><br /><br /></<br />div<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />form-group<br />"<br />><br /><br /><<br />select<br /><br />class<br />=<br />"<br />form-control<br />"<br />><br /><br /><<br />option<br /><br />value<br />=<br />"<br />"<br />><br />默认选择<br /></<br />option<br />><br /><br /></<br />select<br />><br /><br /></<br />div<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />form-group<br />"<br />><br /><br /><<br />select<br /><br />class<br />=<br />"<br />form-control input-sm<br />"<br />><br /><br /><<br />option<br /><br />value<br />=<br />"<br />"<br />><br />.input-sm<br /></<br />option<br />><br /><br /></<br />select<br />><br /><br /></<br />div<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />row<br />"<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />col-lg-2<br />"<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />text<br />"<br /><br />class<br />=<br />"<br />form-control<br />"<br /><br />placeholder<br />=<br />"<br />.col-lg-2<br />"<br />><br /><br /></<br />div<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />col-lg-3<br />"<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />text<br />"<br /><br />class<br />=<br />"<br />form-control<br />"<br /><br />placeholder<br />=<br />"<br />.col-lg-3<br />"<br />><br /><br /></<br />div<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />col-lg-4<br />"<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />text<br />"<br /><br />class<br />=<br />"<br />form-control<br />"<br /><br />placeholder<br />=<br />"<br />.col-lg-4<br />"<br />><br /><br /></<br />div<br />><br /><br /></<br />div<br />><br /><br /></<br />form<br />><br /><br /> 尝试一下 »</p><p>结果如下所示：</p><p><br /></p><h2>表单帮助文本</h2><p>Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在 <input> 后使用 <i>.help-block</i>。下面的实例演示了这点：</p><h2>实例</h2><p><<br />form<br /><br />role<br />=<br />"<br />form<br />"<br />><br /><br /><<br />span<br />><br />帮助文本实例<br /></<br />< <p> 新闻名称：<a href="http://www.mswzjz.cn/qtweb/news10/215110.html">创新互联Bootstrap教程：Bootstrap 表单</a> <br> 文章来源：<a href="http://www.mswzjz.cn/qtweb/news10/215110.html">http://www.mswzjz.cn/qtweb/news10/215110.html</a> </p> <p> 攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等 </p> <p class="adpic"> <a href="https://www.cdcxhl.com/service/ad.html" target="_blank" class="ad">广告</a> <a href="" target="_blank" class="adimg"><img src=""></a> </p> <p class="copy"> 声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： <a href="http://www.mswzjz.cn/" target="_blank">贝锐智能</a> </p> </div> <div class="newsmorelb"> <p>贝锐智能技术为您推荐以下文章</p> <ul> <li> <a href="/qtweb/news9/215109.html">UDP是什么意思？windows下Udp头部</a> </li><li> <a href="/qtweb/news8/215108.html">查网站漏洞_网站漏洞扫描</a> </li><li> <a href="/qtweb/news7/215107.html">美国云服务器排名</a> </li><li> <a href="/qtweb/news6/215106.html">创新互联GoFrame教程：GoFrame 环境变量-genv</a> </li><li> <a href="/qtweb/news5/215105.html">香港域名国内服务器?（香港域名国内服务器地址)</a> </li><li> <a href="/qtweb/news4/215104.html">发垃圾邮件策略：基于规则的系统</a> </li><li> <a href="/qtweb/news3/215103.html">增加Linux硬盘扩容：增加个数提升空间（linux硬盘个数）</a> </li><li> <a href="/qtweb/news2/215102.html">创新互联Python教程：pythonprogram是什么</a> </li><li> <a href="/qtweb/news1/215101.html">买了域名后怎么用？(购买了域名后如何访问)</a> </li> </ul> </div> </div> <div class="col-lg-3 noneb"> <div class="bkright" style="margin-top: 0"> <p><a href="https://www.cdcxhl.com/news/dingzhiwangzhan/">定制网站知识</a></p> <ul> <li> <a class="text_overflow" href="/qtweb/news21/318121.html">服务器怎么设置远程访问？(服务器如何设置远程连接)</a> </li><li> <a class="text_overflow" href="/qtweb/news36/132086.html">如何轻松学习Linux系统（怎么自学linux）</a> </li><li> <a class="text_overflow" href="/qtweb/news15/371415.html">网络安全认证如何保障物联网行业的安全</a> </li><li> <a class="text_overflow" href="/qtweb/news14/296514.html">阿里云服务器一年的费用？云服务器1折</a> </li><li> <a class="text_overflow" href="/qtweb/news19/265269.html">为什么时候朋友圈</a> </li><li> <a class="text_overflow" href="/qtweb/news19/174069.html">如何向云服务器传文件到手机</a> </li><li> <a class="text_overflow" href="/qtweb/news42/79092.html">IIS新手指南：为IIS入门测试环境</a> </li><li> <a class="text_overflow" href="/qtweb/news29/486529.html">Redis集群与单机模式对比及优劣比较（redis集群和单机对比）</a> </li><li> <a class="text_overflow" href="/qtweb/news3/417253.html">如何在电脑版微信打开欢乐斗地主</a> </li><li> <a class="text_overflow" href="/qtweb/news22/237022.html">网络监控录像机怎么设置ip地址？(监控储存服务器如何设置)</a> </li><li> <a class="text_overflow" href="/qtweb/news13/390963.html">Windows下如何查看网络IP与端口？查看windows打开的端口</a> </li><li> <a class="text_overflow" href="/qtweb/news9/136259.html">可以租用Cn2玩游戏么？（美国cn2服务器租用如何选择配置）</a> </li><li> <a class="text_overflow" href="/qtweb/news40/278390.html">怎么制作公众号?（怎么制作公众号微信)</a> </li><li> <a class="text_overflow" href="/qtweb/news8/376408.html">分页查询出现数据重复或丢失，你遇到过吗？</a> </li><li> <a class="text_overflow" href="/qtweb/news26/280726.html">备案后过户需要还原吗？（月日我就过户了模板了提交备案）</a> </li> </ul> </div> <div class="bkright tag"> <p><a href="https://www.cdcxhl.com/hangye/" target="_blank">行业网站建设</a></p> <ul> <li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/kafeitingsj/" target="_blank">咖啡厅设计</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/jianzhudonghua/" target="_blank">建筑动画</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/xiaojbc/" target="_blank">小搅拌车</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/muwu/" target="_blank">木屋</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/shipaifang/" target="_blank">石牌坊</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/menchuang/" target="_blank">门窗定制</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/rxfhw/" target="_blank">柔性防护网</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/ldjbc/" target="_blank">履带搅拌车</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/lajitong/" target="_blank">垃圾桶</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/fadianji/" target="_blank">柴油发电机</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/baiwuyu/" target="_blank">白乌鱼</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/sljbgc/" target="_blank">三轮搅拌车</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/chayisj/" target="_blank">茶艺设计</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/ggtg/" target="_blank">广告推广</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/bangongkongjian/" target="_blank">办公空间设计</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/jizhuangxiang/" target="_blank">集装箱</a> </li> </ul> </div> </div> </div> <div class="carousel-inner linkbg" style="background: #fff"> <div class="container"> <a href="http://www.cdxwcx.cn/tuoguan/dazhou.html" target="_blank">达州电信机房</a>　　 　<a href="http://www.ty2auto.com/" target="_blank">添翼二手车鉴定评估</a>　　 　<a href="https://www.scvps.cn/" target="_blank">域名注册</a>　　 　<a href="http://www.cdxwcx.cn/tuoguan/deyang.html" target="_blank">德阳电信机房</a>　　 　<a href="http://www.cxhljz.com/" target="_blank">网站设计制作</a>　　 　<a href="http://seo.cdcxhl.cn/" target="_blank">成都SEO公司</a>　　 　<a href="http://www.ybwzjz.com/" target="_blank">宜宾网站设计</a>　　 　<a href="http://www.ndjierui.cn/" target="_blank">南部网站建设</a>　　 　<a href="https://www.cdcxhl.com/mianfei/jianshe/chengdu.html" target="_blank">成都免费网站建设</a>　　 　<a href="https://www.cdcxhl.cn/ " target="_blank">云虚拟主机</a>　　 　<a href="https://www.cdcxhl.com/app.html" target="_blank">成都app开发</a>　　 　<a href="https://www.scvps.cn/" target="_blank">服务器租凭</a>　　 　<a href="https://www.cdcxhl.com/mianfei/jianzhan/chengdu.html" target="_blank">成都免费建站</a>　　 　<a href="http://www.cxjianzhan.com/baojia/" target="_blank">网站建设策划方案</a>　　 　<a href="https://www.cdcxhl.com/tuoguan.html" target="_blank">四川主机托管</a>　　 　<a href="https://www.cdcxhl.com/shop.html" target="_blank">成都商城网站开发</a>　　 　<a href="http://www.zhbanjia.com/" target="_blank">子晨包装</a>　　 　<a href="https://www.cdcxhl.cn/ " target="_blank">香港云虚拟主机</a>　　 　<a href="http://www.cdkjz.cn/wangzhan/waimao/" target="_blank">成都外贸网站建设</a>　　 　<a href="https://www.cdcxhl.com/" target="_blank">网站建设公司</a>　　 　 </div> </div> <footer> <div class="carousel-inner footjz"> <div class="container"> <i class="icon iconfont zbw"></i> 品质网站制作 <i class="icon iconfont"></i> 自适应网站 <i class="icon iconfont"></i> 开发成本低 <i class="icon iconfont"></i> 响应速度快 <i class="icon iconfont"></i> 多人服务好 <button type="button" class="btn btn-default btn-lg" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 立即开始600网站建设</button> <button type="button" class="btn btn-default btn-xs" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 600网站制作</button> </div> </div> <div class="carousel-inner bqsy"> <div class="container"> <div class="lxfs"> <h4 class="yutelnone">028-86922220 13518219792</h4> <h4 class="yutelblock"><a href="tel:02886922220">028-86922220</a> <a href="tel:13518219792">13518219792</a></h4> <a class="btn btn-default" href="tencent://message/?uin=532337155&Site=&Menu=yes" role="button">网站建设<span>QQ</span>：532337155</a> <a class="btn btn-default" href="tencent://message/?uin=631063699&Site=&Menu=yes" role="button">营销推广<span>QQ</span>：631063699</a> <a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=532337155&version=1&src_type=web&web_src=oicqzone.com" role="button">网站制作<span>QQ</span>：532337155</a> <a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=631063699&version=1&src_type=web&web_src=oicqzone.com" role="button">营销推广<span>QQ</span>：631063699</a> <a class="btn btn-default nonea" href="tencent://message/?uin=1683211881&Site=&Menu=yes" role="button">售后QQ：1683211881</a> <div class="dz">创新互联建站专注： <a href="http://www.mswzjz.cn/" target="_blank">攀枝花网站设计</a> <a href="http://www.mswzjz.cn/" target="_blank">攀枝花网站制作</a> <a href="http://www.mswzjz.cn/" target="_blank">攀枝花网站建设</a> <address>地址：成都太升南路288号锦天国际A幢10楼</address> </div> </div> <div class="bzdh dz"><img src="https://www.cdcxhl.com/imges/bottom_logo.png" alt="创新互联"> <p><a href="https://www.cdcxhl.com/menu.html" target="_blank">成都创新互联科技有限公司</a><br> Tel：028-86922220（7x24h）</p></div> </div> </div> </footer> </body> </html> <script> $.getJSON ("../../qtwebpic.txt", function (data) { var jsonContent = { "featured":data } var random = jsonContent.featured[Math.floor(Math.random() * jsonContent.featured.length)]; $(".adpic .adimg").attr("href",random.link) $(".adpic img").attr("src",random.pic); }) </script>