您正在浏览:主页 > 最新网页游戏 > Bootstrap3.0学习第六轮：表单
作者：网页游戏公益服 来源：http://www.banruo.net 时间：2018-09-27 17:33
5.静态控件 6.控件状态 7.控件尺寸 8.帮助文本 9.总结 基本案例 单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control的<input>、<textarea>和<select>元素都将被默认设置为width: 100%;。将label和前面提到的这些控件包裹在.form-group中可以获得最好的排列。 <form role="form"> <div> <label for="exampleInputEmail1">Email address</label> <input type="email" placeholder="Enter email"> </div> <div> <label for="exampleInputPassword1">Password</label> <input type="password" placeholder="Password"> </div> <div> <label for="exampleInputFile">File input</label> <input type="file"> <p>Example block-level help text here.</p> </div> <div> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit">Submit</button> </form>
两个文本框的宽度的确为100%。并且有三个form-group。
内联表单
为左对齐和inline-block级别的控件设置.form-inline，可以将其排布的更紧凑。
需要设置宽度：在Bootstrap中,input、select和textarea默认被设置为100%宽度。为了使用内联表单，你需要专门为使用到的表单控件设置宽度。
一定要设置label:如果你没有为每个输入控件设置label,屏幕阅读器将无法正确识读。对于这些内联表单,你可以通过为label设置.sr-only已将其隐藏。
<form role="form">
<div>
<label for="exampleInputEmail2">Email address</label>
<input type="email" placeholder="Enter email">
</div>
<div>
<label for="exampleInputPassword2">Password</label>
<input type="password" placeholder="Password">
</div>
<div>
<label>
<input type="checkbox"> Remember me </label>
</div>
<button type="submit">Sign in</button>
</form>
水平排列的表单
通过为表单添加.form-horizontal，并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行（row），因此就无需再使用.row了。
<form role="form">
<div>
<label for="inputEmail3">Email</label>
<div>
<input type="email" placeholder="Email">
</div>
</div>
<div>
<label for="inputPassword3">Password</label>
<div>
<input type="password" placeholder="Password">
</div>
</div>
<div>
<div>
<div>
<label>
<input type="checkbox"> Remember me </label>
</div>
</div>
</div>
<div>
<div>
<button type="submit">Sign in</button>
</div>
</div>
</form>
被支持的控件
在表单布局案例中展示了其所支持的标准表单控件。
Input
大部分表单控件、文本输入域控件。包括HTML5支持的所有类型：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。
注意：有正确设置了type的input控件才能被赋予正确的样式。
文本框示例
<input type="text" placeholder="Text input">
Textarea
支持多行文本的表单控件。可根据需要改变rows属性。
<h1>textarea</h1> <textarea rows="3"></textarea>
Checkbox 和 radio
Checkbox用于选择列表中的一个或多个选项，而radio用于从多个选项中只选择一个。
默认外观(堆叠在一起) <div>
<label>
<input type="checkbox" value=""> Option one is this and that—be sure to include why it's great
</label>
</div>
<div>
<label>
<input type="radio" value="option1" checked> Option one is this and that—be sure to include why it's great
</label>
</div>
<div>
<label>
<input type="radio" value="option2"> Option two can be something else and selecting it will deselect option one </label>
</div>
Inline checkboxes
通过将.checkbox-inline 或 .radio-inline应用到一系列的checkbox或radio控件上，可以使这些控件排列在一行。
<label>
<input type="checkbox" value="option1"> 1
</label>
<label>
<input type="checkbox" value="option2"> 2
</label>
<label>
<input type="checkbox" value="option3"> 3
</label>
同理Radio是一样的，只需要添加一下样式即可。
Select <select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select multiple>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
静态控件
在水平布局的表单中，如果需要将一行纯文本放置于label的同一行，为<p>元素添加.form-control-static即可。
<form role="form">
<div>
<label>Email</label>
<div>
<p>email@example.com</p>
</div>
</div>
<div>
<label for="inputPassword">Password</label>
<div>
<input type="password" placeholder="Password">
</div>
</div>
</form>
控件状态
控件状态
通过为控件和label设置一些基本状态，可以为用户提供回馈。
输入焦点
我们移除了某些表单控件的默认outline样式，并对其:focus状态赋予了box-shadow样式。
<input type="text" value="This is focused...">
被禁用的输入框
为输入框设置disabled属性可以防止用户输入，，并能改变一点外观，使其更直观。
<input type="text" placeholder="Disabled input here..." disabled>
被禁用的fieldset
为<fieldset>设置disabled属性可以禁用<fieldset>中包含的所有控件。
<a>标签的链接功能不受影响
这个class只改变<a>按钮的外观，并不能禁用其功能。建议自己通过JavaScript代码禁用链接功能。
跨浏览器兼容性
虽然Bootstrap会将这些样式应用到所有浏览器上，Internet Explorer 9及以下浏览器中的<fieldset>并不支持disabled属性。因此建议在这些浏览器上通过JavaScript代码来禁用fieldset
<form role="form">
<fieldset disabled>
<div>
<label for="disabledTextInput">Disabled input</label>
<input type="text" placeholder="Disabled input">
</div>
<div>
<label for="disabledSelect">Disabled select menu</label>
<select>
<option>Disabled select</option>
</select>
</div>
<div>
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit">Submit</button>
</fieldset>
</form>
可将鼠标移到各个控件上进行查看效果。
校验状态
<<上一篇：CNTV and Bestv Win Building Right for China IPTV Broadcast C >>
<<下一篇：《Star Control: Origins》原声带将在游戏发售日推出 >>