Bootstrap3实用教程
2.6.4 支持的控件
阅读(

Bootstrap基础

Bootstrap全局样式

概述

栅格系统

排版

源代码

表格

表单

横向表单

行内表单

基本表单

支持的控件

Bootstrap支持所有的标准表单控件,包括 input 控件、textarea 控件、checkbox 和 radio 控件、select 控件等。

1、input 控件

Bootstrap除了支持大部分表单控件、文本输入域控件,还支持所有 HTML5 类型的输入控件:textpassworddatetimedatetime-localdatemonthtimeweeknumberemailurlsearchtelcolor。如:

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

效果如图 2‑52所示:

input控件
图2-52 input控件

注意:在使用 input 控件时,只有设置了正确的type属性,才能被赋予正确的样式。因为 Bootstrap是根据input 控件的 type 属性来为它定义样式的,如 input[type="text"]。

2、textarea 控件

textarea 控件用于输入多行文本。可以根据需要改变 rows 属性,来控制预留的行数。当用户输入的行数超过 rows 属性设定的值后,textarea 控件会自动添加滚动条。如:

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

效果如图 2‑53所示:

textarea控件
图2-53 textarea控件

3、复选框和单选按钮

复选框和单选按钮用于让用户在一组预定选项中进行选择:多选框(checkbox)允许用户选择一个或多个选项,而单选框(radio)只允许选择一项。

为了获得正确的样式,要把每个复选框和单选按钮的 <input> 控件都包裹在一个 <label> 中,并为 <label> 应用 .checkbox 或 .radio 类,或者把 <label> 包裹在一个 .checkbox 或 .radio 的 <div> 容器中。

可以通过添加 disabled 属性,来禁用某个 checkbox 或 radio。对于被禁用的checkbox 和 radio,如果希望在鼠标悬停时获得 not-allowed 的鼠标样式,还需要为它的父元素 <label> 或 <div> 应用 .disabled 类。如:

<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="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </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>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

默认情况下,复选框和单选按钮垂直堆叠排列。效果如图 2‑54所示:

复选框和单选按钮垂直堆叠
图2-54 复选框和单选按钮垂直堆叠

如果希望复选框或单选按钮在一行内水平排列,只需为它们的父元素 <label> 或 <div> 应用 .checkbox-inline 或 .radio-inline 类即可。如:

<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>
<label class="radio-inline">
  <input type="radio" name="inlineRadio" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadio" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadio" id="inlineRadio3" value="option3"> 3
</label>

效果如图 2‑55所示:

复选框和单选按钮水平排列
图2-55 复选框和单选按钮水平排列

当然,<label>也可以没有文字,不过,目前只适用于非内联的 checkbox 和 radio。请记住,仍然需要为使用辅助技术(如,使用aria-label)的用户,提供某种形式的 label。如:

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

效果如图 2‑56所示:

复选框和单选按钮水平排列
图2-56 复选框和单选按钮水平排列

4、select 控件

select 控件用于创建下拉列表框。在 Safari 和 Chrome 中,无法通过border-radius为原生的select 控件添加圆角。在 Bootstrap 中,只需为 select 控件应用 .form-control 类,就可以为它添加圆角。如:

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

默认的 select 控件是单选的,只允许选择一项。可以为 select 控件显式定义 multiple 属性,让它支持多选,用户就可以按住 ctrl 或 shift 键来选择多个选项。如:

<select class="form-control" multiple>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

效果如图 2‑57所示:

可多选的select控件
图2-57 可多选的select控件

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验