Bootstrap3实用教程
3.5.3 可添加的元素
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Glyphicons字体图标

下拉菜单

按钮组

按钮下拉菜单

输入框组

控件的尺寸

创建输入框组

可添加的元素

在输入框组中,你可以在输入框前面或后面添加复选框、单选按钮、按钮、按钮下拉菜单、拼接式按钮下拉菜单、多个按钮等。

1、复选框和单选按钮

只需把复选框或单选按钮放到一个.input-group-addon<span> 中,就可以将复选框或单选按钮作为额外元素添加到输入框组中。如:

<div class="input-group">
  <span class="input-group-addon">
    <input type="checkbox">
  </span>
  <input type="text" class="form-control">
</div>
<div class="input-group">
  <span class="input-group-addon">
    <input type="radio">
  </span>
  <input type="text" class="form-control">
</div>

效果如图 3‑29所示:

复选框和单选按钮
图3-29 复选框和单选按钮

2、按钮

可以将按钮作为额外元素添加到输入框组中,但是由于不同浏览器的默认样式无法被统一,在为输入框组添加按钮时,需要额外添加一层嵌套,不是使用.input-group-addon,而是使用.input-group-btn来包裹按钮元素。按钮可以使用 <button><a>type="submit"<input>元素等创建。如:

<div class="input-group">
  <span class="input-group-btn">
    <button type="button" class="btn btn-default">Go!</button>
  </span>
  <input type="text" class="form-control" placeholder="Search for...">
</div>
<div class="input-group">
  <input type="text" class="form-control" placeholder="Search for...">
  <span class="input-group-btn">
    <input type="submit" class="btn btn-default" value="Search">
  </span>
</div>
<div class="input-group">
  <input type="text" class="form-control" placeholder="Search for...">
  <span class="input-group-btn">
    <a class="btn btn-default">Go!</a>
  </span>
</div>

效果如图 3‑30所示:

按钮
图3-30 按钮

3、按钮下拉菜单

将按钮式下拉菜单作为额外元素添加到输入框组中,也是使用.input-group-btn来包裹按钮元素,因为按钮式下拉菜单本质就是一个按钮。如:

<div class="input-group">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default 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 role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>
  <input type="text" class="form-control">
</div>
<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
    <ul class="dropdown-menu dropdown-menu-right">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>
</div>

效果如图 3‑31所示:

按钮下拉菜单
图3-31 按钮下拉菜单

4、拼接式按钮下拉菜单

将拼接式按钮下拉菜单作为额外元素添加到输入框组中,也是使用.input-group-btn来包裹按钮元素。如:

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

效果如图 3‑32所示:

拼接式按钮下拉菜单
图3-32 拼接式按钮下拉菜单

5、多个按钮

你也可以将多个按钮作为额外元素添加到输入框组中,只需在.input-group-btn元素中添加多个按钮即可。如:

<div class="input-group">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default" aria-label="Bold">
      <span class="glyphicon glyphicon-bold"></span>
    </button>
    <button type="button" class="btn btn-default" aria-label="Italic">
      <span class="glyphicon glyphicon-italic"></span>
    </button>
  </div>
  <input type="text" class="form-control">
</div>
<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default" aria-label="Help">
      <span class="glyphicon glyphicon-question-sign"></span>
    </button>
    <button type="button" class="btn btn-default">Action</button>
  </div>
</div>

效果如图 3‑33所示:

多个按钮
图3-33 多个按钮

关于作者

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

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验