Bootstrap3.0学习第六轮：表单

Textarea

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

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

Checkbox 和 radio

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

默认外观(堆叠在一起) <div class="checkbox">

<label>

<input type="checkbox" value="">    Option one is this and that&mdash;be sure to include why it's great

</label>

</div>

<div class="radio">

<label>

<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>    Option one is this and that&mdash;be sure to include why it's great

</label>

</div>

<div class="radio">

<label>

<input type="radio" name="optionsRadios" id="optionsRadios2" 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 class="checkbox-inline">

<input type="checkbox" id="inlineCheckbox1" value="option1"> 1

</label>

<label class="checkbox-inline">

<input type="checkbox" id="inlineCheckbox2" value="option2"> 2

</label>

<label class="checkbox-inline">

<input type="checkbox" id="inlineCheckbox3" value="option3"> 3

</label>

同理Radio是一样的，只需要添加一下样式即可。

Select <select class="form-control">

<option>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

<option>5</option>

</select>

<select multiple class="form-control">

<option>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

<option>5</option>

</select>

静态控件

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

<form class="form-horizontal" role="form">

<div class="form-group">

<label class="col-sm-2 control-label">Email</label>

<div class="col-sm-10">

<p class="form-control-static">email@example.com</p>

</div>

</div>

<div class="form-group">

<label for="inputPassword" class="col-sm-2 control-label">Password</label>

<div class="col-sm-10">

<input type="password" class="form-control" id="inputPassword" placeholder="Password">

</div>

</div>

</form>

控件状态

控件状态

通过为控件和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 role="form">

<fieldset disabled>

<div class="form-group">

<label for="disabledTextInput">Disabled input</label>

<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">

</div>

<div class="form-group">

（编辑：佛山站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!