Bootstrap--按钮组

最新推荐文章于 2023-09-18 19:08:14 发布

xiaochouyu0703

最新推荐文章于 2023-09-18 19:08:14 发布

阅读量69

点赞数

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/xiaochouyu0703/article/details/84700278

版权

Bootstrap 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

[url]http://v2.bootcss.com/components.html#buttonGroups[/url]


 <div class="bs-docs-example">
        <div class="btn-toolbar" style="margin: 0;">
<!--单一按钮组:将带有.btn类的一系列按钮包裹在.btn-group中-->
             <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">放入<div class="btn-toolbar">中即可获得多维按钮组；垂直按钮组:.btn-group-vertical让一组按钮呈现出垂直方向堆叠的样式-->
             <div class="btn-group btn-group-vertical">
                <button class="btn"><i class="icon-align-left"></i></button>
                <button class="btn"><i class="icon-align-center"></i></button>
                <button class="btn"><i class="icon-align-right"></i></button>
             </div>
<!--按钮放入.btn-group中，并为其添加适当的菜单标签，即可让此按钮触发下拉菜单-->             
             <div class="btn-group">
                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">8<span class="caret"></span></button>
                	<ul class="dropdown-menu">
                  	<li><a href="#">9</a></li>
                  	<li><a href="#">10</a></li>
                  	<li><a href="#">11</a></li>
                  	<li class="divider"></li>
                  	<li><a href="#">12</a></li>
                </ul>
             </div>
<!--分列式按钮：左侧是一个标准形式的按钮，右侧是一个可触发下拉菜单的链接。-->
             <div class="btn-group">
                <button class="btn btn-danger">8</button>
                <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">9</a></li>
                  <li><a href="#">10</a></li>
                  <li><a href="#">11</a></li>
                  <li class="divider"></li>
                  <li><a href="#">12</a></li>
                </ul>
              </div><!-- /btn-group -->
<!--按钮式下拉菜单-->
<!--给.dropdown-menu的直接父节点添加一个类就可以让下拉菜单由下到上显示。.caret将会自动翻转，菜单的位置也会变为由下到上而不是由上到下了-->
			<div class="btn-group dropup">
                <button class="btn">18Dropup</button>
                <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                  	<li><a href="#">19</a></li>
                  	<li><a href="#">20</a></li>
                  	<li><a href="#">21</a></li>
                  	<li class="divider"></li>
                  	<li><a href="#">22</a></li>
                </ul>
            </div><!-- /btn-group -->
        </div>
    </div>

[img]http://dl2.iteye.com/upload/attachment/0105/8369/2efa1772-128c-3098-ba56-3930627d7d5e.jpg[/img][img]http://dl2.iteye.com/upload/attachment/0105/8392/a3a6baad-7c06-3106-beaf-bb788c8380f9.jpg[/img][img]http://dl2.iteye.com/upload/attachment/0105/8394/16eaa993-79be-3781-84b0-b0e44a09b59f.jpg[/img]