Bootstrap2用户指南
4.2 按钮组
阅读(

Bootstrap基础

Bootstrap框架

Bootstrap基本样式

Bootstrap组件

下拉菜单

按钮组

按钮组,顾名思义,就是把多个相关的按钮(如,文本对齐的按钮)放在一起,形成一个页面组件。

要创建按钮组,只需把相关的链接或按钮放在一个类为 .btn-group 的容器中即可。容器中的按钮,可以使用 <button> 标签,也可以使用 <a> 标签,显示效果是一样的。如:

<div class="btn-group">
  <button class="btn">Left</button>
  <button class="btn">Middle</button>
  <button class="btn">Right</button>
</div>

效果如图 4‑9所示:

Bootstrap按钮组
图4-9 Bootstrap按钮组

如果想在一行内放置多个按钮组,只需把这些按钮组统统放到一个类为 .btn-toolbar 的容器中即可。常常用它来创建按钮工具栏。如:

<div class="btn-toolbar">
  <div class="btn-group">
    <button class="btn">1</button>
    <button class="btn">2</button>
    <button class="btn">3</button>
    <button class="btn">4</button>
  </div>
  <div class="btn-group">
    <button class="btn">5</button>
    <button class="btn">6</button>
    <button class="btn">7</button>
  </div>
  <div class="btn-group">
    <button class="btn">8</button>
  </div>
</div>

效果如图 4‑10所示:

Bootstrap按钮工具栏
图4-10 Bootstrap按钮工具栏

要想把按钮垂直堆叠起来,只需在 .btn-group 类后面追加一个 .btn-group-vertical 类即可。如:

<div class="btn-group btn-group-vertical">
  <button type="button" class="btn"><i class="icon-align-left"></i></button>
  <button type="button" class="btn"><i class="icon-align-center"></i></button>
  <button type="button" class="btn"><i class="icon-align-right"></i></button>
  <button type="button" class="btn"><i class="icon-align-justify"></i></button>
</div>

效果如图 4‑11所示:

Bootstrap垂直按钮组
图4-11 Bootstrap垂直按钮组

关于作者

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

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验