zoukankan      html  css  js  c++  java
  • 按钮组 button group

    一、基本实例

    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-default">Left</button>
      <button type="button" class="btn btn-default">Middle</button>
      <button type="button" class="btn btn-default">Right</button>
    </div>
     

    ​二、按钮工具栏

    把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件。
     
    <div class="btn-toolbar" role="toolbar" aria-label="...">
      <div class="btn-group" role="group" aria-label="...">...</div>
      <div class="btn-group" role="group" aria-label="...">...</div>
      <div class="btn-group" role="group" aria-label="...">...</div>
    </div>

     

    三、尺寸

    只要给 .btn-group 加上 .btn-group-* 类,就省去为按钮组中的每个按钮都赋予尺寸类了,如果包含了多个按钮组时也适用。
    <div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
    <div class="btn-group" role="group" aria-label="...">...</div>
    <div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
    <div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

    四、嵌套

    把下拉菜单混合到一系列按钮中,只须把 .btn-group 放入另一个 .btn-group 中。

    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-default">1</button>
      <button type="button" class="btn btn-default">2</button>
    
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
      </div>
    </div>

    ​五、垂直排列

    让一组按钮垂直堆叠排列显示而不是水平排列。分列式按钮下拉菜单不支持这种方式。

    <div class="btn-group-vertical" role="group" aria-label="...">
      ...
    </div>

    ​​​​六、两端对齐排列的按钮组

    <div class="btn-group btn-group-justified" role="group" aria-label="...">
      ...
    </div>

    关于 <button> 元素

    为了将 <button> 元素用于两端对齐的按钮组中,必须将每个按钮包裹进一个按钮组中you must wrap each button in a button group。大部分的浏览器不能将我们的 CSS 应用到对齐的 <button> 元素上,但是,由于我们支持按钮式下拉菜单,我们可以解决这个问题。

    <div class="btn-group btn-group-justified" role="group" aria-label="...">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">Left</button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">Middle</button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">Right</button>
      </div>
    </div>
  • 相关阅读:
    Sublime Text 3专题
    00.PHP学习建议
    php面试题及答案收藏(转)
    (转)如何快速掌握一门技术
    最全的MySQL基础【燕十八传世】
    UEditor编辑器并不难
    学习一门语言难在什么地方?
    PHP中关于位运算符 与 或 异或 取反
    WebP是什么图片格式?你了解PNG、JPG、WebP和GIF的区别吗?
    Mysql 外键设置
  • 原文地址:https://www.cnblogs.com/maotan/p/5217093.html
Copyright © 2011-2022 走看看