您的位置：首页 > Web前端 > BootStrap

【原创】bootstrap框架的学习 第八课 -[bootstrap表单]

2015-06-11 18:19 561 查看
Bootstrap提供了下列类型的表单布局：

垂直表单（默认）

内联表单

水平表单

吹着表单或基本表单

向父<form>元素添加role="form"。

把标签和控件放在一个带有class.form-group的<div>中。这是获取最佳间距所必需的。

向所有的文本元素<input>、<textarea>和<select>添加class.form-control。

例子：

<!DOCTYPEhtml>
<html>
<head>
<title>Bootstrap实例-内联表单</title>
<linkhref="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"rel="stylesheet">
<scriptsrc="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<scriptsrc="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<formclass="form-inline"role="form"> <divclass="form-group"> <labelclass="sr-only"for="name">名称</label> <inputtype="text"class="form-control"id="name" placeholder="请输入名称"> </div> <divclass="form-group"> <labelclass="sr-only"for="inputfile">文件输入</label> <inputtype="file"id="inputfile"> </div> <divclass="checkbox"> <label> <inputtype="checkbox">请打勾 </label> </div> <buttontype="submit"class="btnbtn-default">提交</button> </form></body>
</html>效果图：



内联表单

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向<form>标签添加class.form-inline。

<formclass="form-inline"role="form">
<divclass="form-group">
<labelclass="sr-only"for="name">名称</label>
<inputtype="text"class="form-control"id="name"
placeholder="请输入名称">
</div>
<divclass="form-group">
<labelclass="sr-only"for="inputfile">文件输入</label>
<inputtype="file"id="inputfile">
</div>
<divclass="checkbox">
<label>
<inputtype="checkbox">请打勾
</label>
</div>
<buttontype="submit"class="btnbtn-default">提交</button>
</form>


默认情况下，Bootstrap中的input、select和textarea有100%宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。

使用class.sr-only，您可以隐藏内联表单的标签。

效果图：




水平表单

水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：

向父<form>元素添加class.form-horizontal。

把标签和控件放在一个带有class.form-group的<div>中。

向标签添加class.control-label。

<formclass="form-horizontal"role="form">
<divclass="form-group">
<labelfor="firstname"class="col-sm-2control-label">名字</label>
<divclass="col-sm-10">
<inputtype="text"class="form-control"id="firstname"
placeholder="请输入名字">
</div>
</div>
<divclass="form-group">
<labelfor="lastname"class="col-sm-2control-label">姓</label>
<divclass="col-sm-10">
<inputtype="text"class="form-control"id="lastname"
placeholder="请输入姓">
</div>
</div>
<divclass="form-group">
<divclass="col-sm-offset-2col-sm-10">
<divclass="checkbox">
<label>
<inputtype="checkbox">请记住我
</label>
</div>
</div>
</div>
<divclass="form-group">
<divclass="col-sm-offset-2col-sm-10">
<buttontype="submit"class="btnbtn-default">登录</button>
</div>
</div>
</form>效果图：




输入框（Input）

<formrole="form">
<divclass="form-group">
<labelfor="name">标签</label>
<inputtype="text"class="form-control"placeholder="文本输入">
</div>
</form>




文本框（Textarea）

<formrole="form">
<divclass="form-group">
<labelfor="name">文本框</label>
<textareaclass="form-control"rows="3"></textarea>
</div>
</form>

复选框（（Checkbox）和单选框（Radio）

<labelfor="name">默认的复选框和单选按钮的实例</label>
<divclass="checkbox">
<label><inputtype="checkbox"value="">选项1</label>
</div>
<divclass="checkbox">
<label><inputtype="checkbox"value="">选项2</label>
</div>

<divclass="radio">
<label>
<inputtype="radio"name="optionsRadios"id="optionsRadios1"
value="option1"checked>选项1
</label>
</div>
<divclass="radio">
<label>
<inputtype="radio"name="optionsRadios"id="optionsRadios2"
value="option2">
选项2-选择它将会取消选择选项1
</label>
</div>
<labelfor="name">内联的复选框和单选按钮的实例</label>
<div>
<labelclass="checkbox-inline">
<inputtype="checkbox"id="inlineCheckbox1"value="option1">选项1
</label>
<labelclass="checkbox-inline">
<inputtype="checkbox"id="inlineCheckbox2"value="option2">选项2
</label>
<labelclass="checkbox-inline">
<inputtype="checkbox"id="inlineCheckbox3"value="option3">选项3
</label>
<labelclass="checkbox-inline">
<inputtype="radio"name="optionsRadiosinline"id="optionsRadios3"
value="option1"checked>选项1
</label>
<labelclass="checkbox-inline">
<inputtype="radio"name="optionsRadiosinline"id="optionsRadios4"
value="option2">选项2
</label>
</div>

选择框（Select）

使用multiple="multiple"允许用户选择多个选项。

<formrole="form">
<divclass="form-group">
<labelfor="name">选择列表</label>
<selectclass="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

<labelfor="name">可多选的选择列表</label>
<selectmultipleclass="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>




静态控件

当您需要在一个水平表单内的表单标签后放置纯文本时，请在<p>上使用class.form-control-static。

<formclass="form-horizontal"role="form">
<divclass="form-group">
<labelclass="col-sm-2control-label">Email</label>
<divclass="col-sm-10">
<pclass="form-control-static">email@example.com</p>
</div>
</div>
<divclass="form-group">
<labelfor="inputPassword"class="col-sm-2control-label">密码</label>
<divclass="col-sm-10">
<inputtype="password"class="form-control"id="inputPassword"
placeholder="请输入密码">
</div>
</div>
</form>




表单控件状态

除了:focus状态（即，用户点击input或使用tab键聚焦到input上），Bootstrap还为禁用的输入框定义了样式，并提供了表单验证的class。

输入框焦点

当输入框input接收到:focus时，输入框的轮廓会被移除，同时应用box-shadow。

禁用的输入框input

如果您想要禁用一个输入框input，只需要简单地添加disabled属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

禁用的字段集fieldset

对<fieldset>添加disabled属性来禁用<fieldset>内的所有控件。

验证状态

Bootstrap包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的class（.has-warning、.has-error或.has-success）即可使用验证状态。

<formclass="form-horizontal"role="form">
<divclass="form-group">
<labelclass="col-sm-2control-label">聚焦</label>
<divclass="col-sm-9">
<inputclass="form-control"id="focusedInput"type="text"
value="该输入框获得焦点...">
</div>
</div>
<divclass="form-group">
<labelfor="inputPassword"class="col-sm-2control-label">
禁用
</label>
<divclass="col-sm-9">
<inputclass="form-control"id="disabledInput"type="text"
placeholder="该输入框禁止输入..."disabled>
</div>
</div>
<fieldsetdisabled>
<divclass="form-group">
<labelfor="disabledTextInput"class="col-sm-2control-label">
禁用输入（Fieldsetdisabled）
</label>
<divclass="col-sm-10">
<inputtype="text"id="disabledTextInput"class="form-control"
placeholder="禁止输入">
</div>
</div>
<divclass="form-group">
<labelfor="disabledSelect"class="col-sm-2control-label">
禁用选择菜单（Fieldsetdisabled）
</label>
<divclass="col-sm-10">
<selectid="disabledSelect"class="form-control">
<option>禁止选择</option>
</select>
</div>
</div>
</fieldset>
<divclass="form-grouphas-success">
<labelclass="col-sm-2control-label"for="inputSuccess">
输入成功
</label>
<divclass="col-sm-10">
<inputtype="text"class="form-control"id="inputSuccess">
</div>
</div>
<divclass="form-grouphas-warning">
<labelclass="col-sm-2control-label"for="inputWarning">
输入警告
</label>
<divclass="col-sm-10">
<inputtype="text"class="form-control"id="inputWarning">
</div>
</div>
<divclass="form-grouphas-error">
<labelclass="col-sm-2control-label"for="inputError">
输入错误
</label>
<divclass="col-sm-10">
<inputtype="text"class="form-control"id="inputError">
</div>
</div>
</form>


表单控件大小

您可以分别使用class.input-lg和.col-lg-*来设置表单的高度和宽度。

<formrole="form">
<divclass="form-group">
<inputclass="form-controlinput-lg"type="text"
placeholder=".input-lg">
</div>

<divclass="form-group">
<inputclass="form-control"type="text"placeholder="默认输入">
</div>

<divclass="form-group">
<inputclass="form-controlinput-sm"type="text"
placeholder=".input-sm">
</div>
<divclass="form-group">
</div>
<divclass="form-group">
<selectclass="form-controlinput-lg">
<optionvalue="">.input-lg</option>
</select>
</div>
<divclass="form-group">
<selectclass="form-control">
<optionvalue="">默认选择</option>
</select>
</div>
<divclass="form-group">
<selectclass="form-controlinput-sm">
<optionvalue="">.input-sm</option>
</select>
</div>

<divclass="row">
<divclass="col-lg-5">
<inputtype="text"class="form-control"placeholder=".col-lg-2">
</div>
<divclass="col-lg-3">
<inputtype="text"class="form-control"placeholder=".col-lg-3">
</div>
<divclass="col-lg-4">
<inputtype="text"class="form-control"placeholder=".col-lg-4">
</div>
</div>
</form>






                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航