Bootstrap2用户指南
3.4.3 表单的基本控件
阅读(

Bootstrap基础

Bootstrap框架

Bootstrap基本样式

排版

源代码

表格

表单

表单的可选布局

表单的默认布局

表单的基本控件

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

1、input 控件

Bootstrap 支持 HTML5 规范定义的所有输入类型,包括 text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。如:

<input type="text" placeholder="Text input">

效果如图 3‑33所示:

Bootstrap表单input控件
图3-33 Bootstrap表单input控件

需要注意的是,任何时候使用 input 控件,都需要指定它的 type 属性,因为Bootstrap在为这些元素定义样式时,都使用了 type 属性,如 input[type="text"]。

2、textarea 控件

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

<textarea rows="3"></textarea>

效果如图 3‑34所示:

Bootstrap表单textarea控件
图3-34 Bootstrap表单textarea控件

3、复选框和单选按钮

复选框和单选按钮用于让用户在一组预定选项中进行选择。如果想让用户选择任意多项,使用 <checkbox>,如果想让用户只选择一项,使用 <radio>。

在使用的时候,每个 <input> 都要包裹在 <label> 中,并为 <label> 应用 .checkbox 或 .radio 类。如:

<label class="checkbox">
  <input type="checkbox" value="">
  Option one is this and that—be sure to include why it's great
</label>
<label class="radio">
  <input type="radio" name="optionsRadios" value="option1" checked>
  Option one is this and that—be sure to include why it's great
</label>

<label class="radio">
  <input type="radio" name="optionsRadios" value="option2">
  Option two can be something else and selecting it will deselect option one
</label>

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

Bootstrap表单复选框和单选按钮垂直堆叠
图3-35 Bootstrap表单复选框和单选按钮垂直堆叠

如果想让多个复选框或单选按钮在一行内水平排列,那么就给它们添加 .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>

效果如图 3‑36所示:

Bootstrap表单复选框和单选按钮水平排列
图3-36 Bootstrap表单复选框和单选按钮水平排列

4、select 控件

select 控件用于创建下拉列表框,默认只允许选择一项。如:

<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

如果为 select 控件显式定义 multiple 属性,控件便支持多选,用户就可以按住 ctrl 或 shift 键来来选择多个选项。如:

<select multiple>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

效果如图 3‑37所示:

Bootstrap表单select控件
图3-37 Bootstrap表单select控件

关于作者

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

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验