Bootstrap每天必学之表单(2)

Checkbox 和 radio
Checkbox用于选择列表中的一个或多个选项，而radio用于从多个选项中只选择一个。
默认外观(堆叠在一起)

<div> <label> <input type="checkbox" value=""> Option one is this and that&mdash;be sure to include why it's great </label> </div> <div> <label> <input type="radio" value="option1" checked> Option one is this and that&mdash;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>