Bootstrap入门（十）组件4：按钮组与下拉菜单结合

时间：2016-09-11 01:37:57 阅读：250 评论：0 收藏：0 [点我收藏+]

标签：

先引入本地的CSS文件和JS文件（注：1.bootstrap是需要jQuery支持的。2.需要在<body>当中添加）

<link href="css/bootstrap.min.css" rel="stylesheet">

<script src="jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>

1.按钮组与下拉菜单

把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。只要改变一些基本的标记，就能把按钮变成下拉菜单的开关。

　　　　 <div class=‘btn-group‘>
            <button type="button" class="btn btn-default">1</button>
            <button type="button" class="btn btn-default">2</button>
            <button type="button" class="btn btn-default">3</button>
            <div class="btn-group">
                <button type=‘button‘ class="btn btn-default dropdown-toggle" data-toggle=‘dropdown‘>
                    下拉菜单
                    <span class=‘caret‘></span>
                </button>
                <ul class=‘dropdown-menu‘ role=‘menu‘>
                    <li><a href="#">dianwo1</a>
                    <li><a href="#">dianwo2</a>
                </ul>
            </div>
        </div>

效果：

2.颜色

修改button的class，可以改变按钮式下拉菜单的颜色，（详细可以看入门（六）按钮与图片）

比如我们添加 btn-info属性

　　　　　　 <div class=‘btn-group‘>
                <button type="button" class="btn btn-info dropdown-toggle" data-toggle=‘dropdown‘>
                    xiala1
                    <span class="caret"></span>
                </button>
                <ul class=‘dropdown-menu‘ role=‘menu‘>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                </ul>
            </div>

效果

3.分裂式下拉菜单

修改上一段代码，用一个新的button来代替span

　　　　　　  <div class=‘btn-group‘>
                <button type="button" class="btn btn-info dropdown-toggle">xiala2</button>
                <button type="button" class="btn btn-info dropdown-toggle" data-toggle=‘dropdown‘>
                    <span class="caret"></span>
                </button>
                <ul class=‘dropdown-menu‘ role=‘menu‘>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                </ul>
            </div>

效果，明显是分裂开来了

4.大小

跟前面的一样，响应式，自然也有不同的大小（btn-lg 、btn-sm 、btn-xs ）

（如果是运用在分裂式下拉菜单中，需要在两个button都添加属性，否则两个的大小会不一样大的）

　　　　　　　<div class=‘btn-group‘>
                <button type="button" class="btn btn-info dropdown-toggle btn-lg" data-toggle=‘dropdown‘>
                    xiala1
                    <span class="caret"></span>
                </button>
                <ul class=‘dropdown-menu‘ role=‘menu‘>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                </ul>
            </div>
 
            <div class=‘btn-group‘>
                <button type="button" class="btn btn-info dropdown-toggle" data-toggle=‘dropdown‘>
                    xiala1
                    <span class="caret"></span>
                </button>
                <ul class=‘dropdown-menu‘ role=‘menu‘>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                </ul>
            </div>
 
            <div class=‘btn-group‘>
                <button type="button" class="btn btn-info dropdown-toggle btn-sm" data-toggle=‘dropdown‘>
                    xiala1
                    <span class="caret"></span>
                </button>
                <ul class=‘dropdown-menu‘ role=‘menu‘>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                </ul>
            </div>
 
            <div class=‘btn-group‘>
                <button type="button" class="btn btn-info dropdown-toggle btn-xs" data-toggle=‘dropdown‘>
                    xiala1
                    <span class="caret"></span>
                </button>
                <ul class=‘dropdown-menu‘ role=‘menu‘>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                </ul>
            </div>

效果：

5.内容向上

有时候按钮式处于下方的，希望点击后内容是向上显示的

修改div的class，添加一个dropup属性

　　　　　　　<div class=‘btn-group dropup‘>
                <button type="button" class="btn btn-info dropdown-toggle" data-toggle=‘dropdown‘>
                    xiala1
                    <span class="caret"></span>
                </button>
                <ul class=‘dropdown-menu‘ role=‘menu‘>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                </ul>
            </div>

效果

Bootstrap入门（十）组件4：按钮组与下拉菜单结合

标签：

原文地址：http://www.cnblogs.com/hnnydxgjj/p/5860805.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行