Bootstrap-v3-组件-按钮组

2021-09-27 15:35:29 阅读：176 来源： 互联网

标签：选项排列 group Bootstrap v3 按钮 btn 下拉菜单

按钮组

1、基本实例

把多个按钮放在一个容器中，添加类.btn-group即可。

   <!-- 按钮组 -->
   <div class="btn-group" role="group">
     <button class="btn btn-default">按钮1</button>
     <button class="btn btn-default">按钮2</button>
     <button class="btn btn-default">按钮3</button>
   </div>

2、按钮工具栏

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

   <!-- 按钮工具栏 -->
   <div class="btn-toolbar">
    <div class="btn-group">
      <button class="btn btn-default">1</button>
      <button class="btn btn-default">2</button>
      <button class="btn btn-default">3</button>
    </div>
    <div class="btn-group">
      <button class="btn btn-default">4</button>
      <button class="btn btn-default">5</button>
      <button class="btn btn-default">6</button>
    </div>
   </div>

3、按钮组的尺寸

只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。

    <!-- 按钮组的尺寸 -->
    <!-- 默认尺寸 -->
   <div class="btn-group">
     <button class="btn btn-default">按钮1</button>
     <button class="btn btn-default">按钮2</button>
     <button class="btn btn-default">按钮3</button>
   </div>
   <!-- 大尺寸 -->
   <div class="btn-group btn-group-lg">
     <button class="btn btn-default">按钮1</button>
     <button class="btn btn-default">按钮2</button>
     <button class="btn btn-default">按钮3</button>
   </div>
    <!-- 小尺寸 -->
   <div class="btn-group btn-group-sm">
     <button class="btn btn-default">按钮1</button>
     <button class="btn btn-default">按钮2</button>
     <button class="btn btn-default">按钮3</button>
   </div>
   <!-- 超小尺寸 -->
   <div class="btn-group btn-group-xs">
     <button class="btn btn-default">按钮1</button>
     <button class="btn btn-default">按钮2</button>
     <button class="btn btn-default">按钮3</button>
   </div>

4、按钮组的嵌套

想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中。注意：按钮的嵌套中不能省略button的dropdown-toggle类。

   <!-- 按钮组的嵌套 -->
   <div class="btn-group">
     <button class="btn btn-warning">按钮1</button>
     <button class="btn btn-warning">按钮2</button>
     <div class="btn-group dropdown">
       <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
       下拉选择<span class="caret"></span>
      </button>
       <ul class="dropdown-menu">
         <li><a href="#">选项1</a></li>
         <li><a href="#">选项2</a></li>
         <li><a href="#">选项3</a></li>
       </ul>
     </div>
   </div>

5、按钮组的垂直排列

让一组按钮垂直堆叠排列显示而不是水平排列。分列式按钮下拉菜单不支持这种方式。<div class="btn-group-vertical">

   <!-- 按钮组的垂直排列 -->
   <div class="btn-group-vertical">
     <button class="btn btn-warning">按钮1</button>
     <button class="btn btn-warning">按钮2</button>
     <div class="btn-group dropdown">
       <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
       下拉选择<span class="caret"></span>
      </button>
       <ul class="dropdown-menu">
         <li><a href="#">选项1</a></li>
         <li><a href="#">选项2</a></li>
         <li><a href="#">选项3</a></li>
       </ul>
     </div>
   </div>

6、按钮组的两端对齐排列

让一组按钮拉长为相同的尺寸，填满父元素的宽度。对于按钮组中的按钮式下拉菜单也同样适用。<div class="btn-group btn-group-justified">

   <!-- 按钮组的两端对齐排列 Button按钮必须包裹在btn-group的组件中-->
   <div class="btn-group btn-group-justified">
    <div class="btn-group">
     <button class="btn btn-default">按钮1</button>
    </div>
    <div class="btn-group">
     <button class="btn btn-default">按钮2</button>
    </div>
     <div class="btn-group dropdown">
       <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
       下拉选择<span class="caret"></span>
      </button>
       <ul class="dropdown-menu">
         <li><a href="#">选项1</a></li>
         <li><a href="#">选项2</a></li>
         <li><a href="#">选项3</a></li>
       </ul>
     </div>
   </div>

标签：选项,排列,group,Bootstrap,v3,按钮,btn,下拉菜单
来源： https://www.cnblogs.com/AnnLing/p/15343191.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9