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

2.4Bootstrap表单

2014-05-03 22:23 363 查看
1、基本案例

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

<form role="form">
<div class="form-group">
<label for="email">电子邮箱</label>
<input type="email" class="form-control" id="email"  placeholder="Enter email"/>
</div>
<div class="form-group">
<label for=""></label>
<input type="password" class="form-control" id="email" placeholder="Password"/>
</div>
<div class="form-group">
<label for="file"></label>
<input type="file" id="file" />
<p class="help-block">例子的帮助文字</p>
</div>
<div class="checkbox">
<label for="">
<input type="checkbox" />check me out
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>


效果：



两个文本框的宽度的确为100%。并且有三个form-group。

2、内联表单

 为左对齐和inline-block级别的控件设置
.form-inline
，可以将其排布的更紧凑。只适用于浏览器窗口至少在
768px 宽度时（窗口宽度再小的话就会使表单折叠）。

需要设置宽度：在Bootstrap中,input、select和textarea默认被设置为100%宽度。为了使用内联表单，你需要专门为使用到的表单控件设置宽度。

 

一定要设置label:如果你没有为每个输入控件设置label,屏幕阅读器将无法正确识读。对于这些内联表单,你可以通过为label设置
.sr-only
已将其隐藏。



3、水平排列的表单

通过为表单添加
.form-horizontal
，并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局。这样做将改变
.form-group
的行为，使其表现为栅格系统中的行（row），因此就无需再使用
.row
了。


代码段：<form role="form" class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">电子邮箱</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Email"/>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="email" placeholder="Password"/>
</div>
</div>

<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label for="">
<input type="checkbox" />check me out
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>





4、被支持的控件

在表单布局案例中展示了其所支持的标准表单控件。


Input

大部分表单控件、文本输入域控件。包括HTML5支持的所有类型：
text
、
password
、
datetime
、
datetime-local
、
date
、
month
、
time
、
week
、
number
、
email
、
url
、
search
、
tel
和
color
。

注意：有正确设置了
type
的input控件才能被赋予正确的样式。

文本框示例

<input type="text" class="form-control" placeholder="Text input">



Textarea

支持多行文本的表单控件。可根据需要改变
rows
属性。

<h1>textarea</h1>
<textarea class="form-control" rows="3"></textarea>



Checkbox 和 radio

Checkbox用于选择列表中的一个或多个选项，而radio用于从多个选项中只选择一个。


默认外观(堆叠在一起)


Inline checkboxes

通过将
.checkbox-inline
 或 
.radio-inline
应用到一系列的checkbox或radio控件上，可以使这些控件排列在一行。
<div class="checkbox">
<label for="">
<input type="checkbox" value=""/>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label for="">
<input type="radio" value="" name="optionsradios" checked/>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label for="">
<input type="radio" value="" name="optionsradios"/>
<form action="" class="form-horizontal">
<div class="form-group">
<label for="" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">email@exampel.com</p>
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" placeholder="password"/>
</div>
</div>
</form>


Option two can be something else and selecting it will deselect option one</label></div>



Inline checkboxes
通过将
.checkbox-inline
 或 
.radio-inline
应用到一系列的checkbox或radio控件上，可以使这些控件排列在一行。

 <label for="" class="checkbox-inline">
<input type="checkbox" id="" value=""/>1
</label>
<label for="" class="checkbox-inline">
<input type="checkbox" id="" value=""/>2
</label>
<label for="" class="checkbox-inline">
<input type="checkbox" id="" value=""/>3
</label>
同理Radio是一样的，只需要添加一下样式即可。



Select
使用默认选项或添加
multiple
属性可以显示多个选项。

代码段：

<select name="" id="" class="form-control">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
</select>
<select multiple id="" class="form-control">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
</select>效果：








5、静态控件

 在水平布局的表单中，如果需要将一行纯文本放置于label的同一行，为
<p>
元素添加
.form-control-static
即可。


<form action="" class="form-horizontal">
<div class="form-group">
<label for="" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">email@exampel.com</p>
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" placeholder="password"/>
</div>
</div>
</form>

预览：

6、控件状态

　　通过为控件和label设置一些基本状态，可以为用户提供回馈。

　　输入焦点
　　我们移除了某些表单控件的默认
outline
样式，并对其
:focus
状态赋予了
box-shadow
样式。

<input class="form-control" id="focusedInput" type="text" value="This is focused...">





　　被禁用的输入框
 　　为输入框设置
disabled
属性可以防止用户输入，并能改变一点外观，使其更直观。

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>





　　被禁用的fieldset
　　为
<fieldset>
设置
disabled
属性可以禁用
<fieldset>
中包含的所有控件。

<a>
标签的链接功能不受影响
这个class只改变
<a class="btn btn-default">
按钮的外观，并不能禁用其功能。建议自己通过JavaScript代码禁用链接功能。

跨浏览器兼容性
虽然Bootstrap会将这些样式应用到所有浏览器上，Internet Explorer 9及以下浏览器中的
<fieldset>
并不支持
disabled
属性。因此建议在这些浏览器上通过JavaScript代码来禁用fieldset

<form action="" role="form">
<fieldset disabled>
<div class="form-group">
<label for="">Disabled input</label>
<input type="text"  class="form-control" placeholder="Disabled input"/>
</div>

<div class="form-group">
<label for="">Disabled select menu</label>
<select name="" id="" class="form-control">
<option value="Disabled select"></option>
</select>
</div>
<div class="checkbox">
<label for="">
<input type="checkbox" />can't check this.
</label>
</div>
<button type="submit" class="btn btn-primary">submit</button>
</fieldset>
</form>




校验状态

Bootstrap对表单控件的校验状态，如error、warning和success状态，都定义了样式。使用时，添加
.has-warning
、
.has-error
或
.has-success
到这些控件的父元素即可。任何包含在此元素之内的
.control-label
、
.form-control
和
.help-block
都将接受这些校验状态的样式。


7、控件尺寸

通过
.input-lg
之类的class可以为控件设置高度，通过
.col-lg-*
之类的class可以为控件设置宽度。





高度尺寸
创建大一些或小一些的表单控件以匹配按钮尺寸。
<input type="text" class="form-control input-lg" placeholder=".input-lg"/>
<input type="text" class="form-control" placeholder="Default input-lg"/>
<input type="text" class="form-control input-sm" placeholder=".input-sm"/>

<select name="" id="" class="form-control input-lg">...</select>
<select name="" id="" class="form-control">...</select>
<select name="" id="" class="form-control input-sm">...</select>





调整列尺寸
用栅格系统中的列包裹input或其任何父元素，都可很容易的为其设置宽度。

<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>


8、帮助文本

用于表单控件的块级帮助文本。




<span class="help-block">自己独占一行或多行的块级帮助文本。</span>



                                            

                                        

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

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航