Bootstrap2用户指南
3.4.4 表单的扩展控件
阅读(

Bootstrap基础

Bootstrap框架

Bootstrap基本样式

排版

源代码

表格

表单

表单的基本控件

表单的可选布局

表单的默认布局

表单的扩展控件

除了基本的控件,作为对 HTML 表单控件的补充,Bootstrap 还为表单额外提供了一些非常实用的扩展控件。

输入框的前置和后置组件,是非常实用的控制控件。利用输入框的前置和后置组件,可以在输入框的前面或后面添加用户输入中的公共内容。如,可以为输入框前置人民币符号、电子邮件的 @ 符号、或其他公共的内容。

要在输入框的前面或后面添加内容,首先创建一个 .input-prepend 或 .input-append 的 <div>,然后在这个 <div> 中,把要前置或后置的内容放到一个 .add-on 的 <span> 中,再把这个 <span> 放到相应的 <input> 元素前面或后面。如:

<div class="input-prepend">
  <span class="add-on">@</span>
  <input class="span2" type="text" placeholder="Username">
</div>

<div class="input-append">
  <input class="span2" type="text">
  <span class="add-on">.00</span>
</div>

效果如图 3‑38所示:

Bootstrap表单控件前置和后置内容
图3-38 Bootstrap表单控件前置和后置内容

当然,你也可以在输入框的前面和后面同时添加内容。此时,就需要在父 <div> 中同时添加 .input-prepend 和 .input-append 类。如:

<div class="input-prepend input-append">
  <span class="add-on">$</span>
  <input class="span2" type="text">
  <span class="add-on">.00</span>
</div>

效果如图 3‑39所示:

Bootstrap表单控件同时前置和后置内容
图3-39 Bootstrap表单控件同时前置和后置内容

此外,还可以使用带 .btn 类的 <button> 代替 <span>,在输入框的前面或后面添加一个或多个按钮。如:

<div class="input-append">
  <input class="span2" type="text">
  <button class="btn" type="button">Search</button>
  <button class="btn" type="button">Options</button>
</div>

效果如图 3‑40所示:

Bootstrap表单控件后置多个按钮
图3-40 Bootstrap表单控件后置多个按钮

如果给搜索表单后置这么一个按钮,按钮也会像文本框一样带有圆弧。如:

<form class="form-search">
  <div class="input-append">
    <input type="text" class="span2 search-query">
    <button type="submit" class="btn">Search</button>
  </div>
  <div class="input-prepend">
    <button type="submit" class="btn">Search</button>
    <input type="text" class="span2 search-query">
  </div>
</form>

效果如图 3‑41所示:

Bootstrap为搜索表单添加按钮
图3-41 Bootstrap为搜索表单添加按钮

还可以把按钮放在 .btn-group 的 <div> 中,来在按钮上创建下拉菜单。如:

<form>
  <div class="input-append">
    <input class="span2" id="appendedDropdownButton" type="text">
    <div class="btn-group">
      <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
</form>

效果如图 3‑42所示:

Bootstrap表单在按钮上创建下拉菜单
图3-42 Bootstrap表单在按钮上创建下拉菜单

关于作者

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

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验