Bootstrap CSS——按钮组以及带下拉菜单的按钮组

最新推荐文章于 2022-11-03 10:48:53 发布
最新推荐文章于 2022-11-03 10:48:53 发布
阅读量613 收藏
点赞数
分类专栏： Bootstrap 文章标签： bootstrap css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011350527/article/details/48918227
版权

http://v3.bootcss.com/components/#btn-groups
mark

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>ButtonGroup</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <!--若要垂直排布，则添加-vertical，代码如下-->
        <!--<div class="btn-group-vertical">-->
        <div class="btn-group">
            <button type="button" class="btn btn-default">Left</button>
            <button type="button" class="btn btn-default">Center</button>
            <button type="button" class="btn btn-default">Right</button>
        </div>
    </div>

    <div class="btn-toolbar">
        <div class="btn-group">
            <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-arrow-left"></span></button>
            <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-arrow-left"></span></button>
            <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-arrow-left"></span></button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-arrow-right"></span></button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-arrow-up"></span></button>
        </div>
    </div>


    <div class="container">
        <!--按钮组的大小-->
        <div class="btn-group btn-group-lg">
            <button type="button" class="btn btn-default">Left</button>
            <button type="button" class="btn btn-default">Center</button>
            <button type="button" class="btn btn-default">Right</button>
        </div>

        <div class="btn-group">
            <button type="button" class="btn btn-default">Left</button>
            <button type="button" class="btn btn-default">Center</button>
            <button type="button" class="btn btn-default">Right</button>
        </div>

        <div class="btn-group btn-group-md">
            <button type="button" class="btn btn-default">Left</button>
            <button type="button" class="btn btn-default">Center</button>
            <button type="button" class="btn btn-default">Right</button>
        </div>

        <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">Left</button>
            <button type="button" class="btn btn-default">Center</button>
            <button type="button" class="btn btn-default">Right</button>
        </div>

        <div class="btn-group btn-group-xs">
            <button type="button" class="btn btn-default">Left</button>
            <button type="button" class="btn btn-default">Center</button>
            <button type="button" class="btn btn-default">Right</button>
        </div>
    </div>

    <!--带下拉菜单的按钮组-->
    <div class="btn-group">
        <button type="button" class="btn btn-default">1</button>
        <button type="button" class="btn btn-default">2</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="#">点我</a> </li>
                <li><a href="#">点我</a> </li>
            </ul>


        </div>
    </div>

    <!--创建填充整个宽度的按钮组-->
    <div class="btn-group btn-group-justified">
        <div class="btn-group">
            <button type="button" class="btn btn-default">Left</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default">Middle</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default">Right</button>
        </div>
    </div>

    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>
Tarkzeng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BootStrap--CSS组件--按钮下拉菜单
王欢的博客
12-16 786
1 按钮下拉菜单结合使用.btn-group(btn-group-lg/btn-group-sm/btn-group-xs) .dropup .btn .dropdown-menu 按钮下拉菜单是在普通的下拉菜单的基础上封装了.btn样式得效果，就类似于单击一个button按钮，然后显示隐藏的下拉菜单。组合式下拉菜单 分离式下拉菜单 向上弹起的下拉菜单//源码，css实现方式主要是设置.dro
Bootstrap CSS组件之按钮下拉菜单
08-31
主要为大家详细介绍了Bootstrap CSS组件之按钮下拉菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
CSS3 下拉菜单按钮
小明的专栏
12-11 855
直接看图片展示： 代码展示： CSS3 Dropdown Menu Home My Projects N.Design Studio Portfolio WordPress Themes Wallpapers Illustrator Tutorials Web Designe
CSS下拉菜单
liugaoyuans的博客
12-14 1375
只用css和html完成两种下拉菜单，这三张图片是成品图 <body> <div class="navbar"> <ul> <li><a href="#">homepage</a> <ul> <li><a href="#">homepage1</a>
用css定义组件-下拉框
liuian1946的博客
01-13 995
下拉框 （简单的说明一下：在父级进行相对定于，用伪元素添加小图标，同时让下拉框默认的样式隐藏  问题：伪元素的小图标不能进行处罚select事件，有知道的小伙伴可以告知） .select-grp{ position: relative;vertical-align: middle; display: inline-block; } .select-grp:before{content
拥Bootstrap入怀——导航栏篇
11-22
要添加下拉菜单，我们可以使用`.dropdown`类和`.dropdown-menu`类，以及`data-toggle="dropdown"`属性。例如，导航栏中的“山水”选项可下拉，包含“九寨沟”、“丽江”和“水帘洞”等子项： ```html 山水 ...
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
06-04
Bootstrap包括网格系统、导航条、模态框、下拉菜单等组件，以及可自定义的主题。在webdemo-master中，Bootstrap的引入可能让页面设计更具一致性，同时确保在不同设备上都能良好显示。 综合来看，...
Bootstrap组件(一)之菜单
11-22
在本文中，我们将深入探讨Bootstrap中的一个关键组件——菜单，特别是 Glyphicons 字体图标和下拉上弹菜单。 **Glyphicons 字体图标** Glyphicons 是 Bootstrap 提供的一套矢量图形图标，它通过CSS伪元素来实现。...
前端基础之《Bootstrap（5）—CSS组件_字体图标、按钮组和下拉菜单》
最新发布
csj50的专栏
11-03 888
6、两端对齐的按钮组（.btn-group-justified）4、按钮组垂直排列（.btn-group-vertical）5、按钮组嵌套（.dropdown-toggle）1、把多个按钮连在一起（.btn-group）2、按钮工具条（.btn-toolbar）1、bootstrap提供的文字图片。选项（.dropdown-menu）巨大的（.btn-group-lg）微小的（.btn-group-xs）1、下拉菜单（.dropdown）小的（.btn-group-sm）7、按钮组带下拉菜单。
Bootstrap 按钮下拉菜单
I hava a dream
02-07 1869
把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。 单按钮下拉菜单 只要改变一些基本的标记，就能把按钮变成下拉菜单的开关。 代码如下 bootstrap按钮组 <button type="button" class="b
通过css实现按钮的下拉
less_cold的博客
10-10 2351
就是当鼠标移到这个按钮上时，可以显示出这个按钮下一级的一堆按钮 类似于这种样式，只通过css和html来实现 nav ul { list-style: none; padding-left: 0; margin-top: 0; margin-bottom: 0; } h1 { width: 500px; margin: 100px auto 20px; co
css个性下拉框和按钮
michaelia530的专栏
08-17 7020
最近在做一个教育平台网站。其中有几个问题是之前没有遇到过的。 首先，input 的背景图片问题，解决这类问题的方法是： .loginbtn {  width:29px;  height:24px;  border:0px;/* 边框设置为0 */  backgrou
css怎么设置select下拉选项按钮,如何仅使用CSS设置 <select> 下拉列表的样式？
weixin_29156679的博客
08-03 4072
这是三个解决方案：解决方案＃1-外观：无-使用Internet Explorer 10-11解决方法要隐藏在appearance: none选择元素上设置的默认箭头，然后使用以下命令添加您自己的自定义箭头background-imageselect {-webkit-appearance: none;-moz-appearance: none;appearance: none; /* ...
给按钮添加下拉菜单
十步一杀
07-01 1177
//给专家介绍添加下拉按钮 Button btn = new Button(); btn.Size = new Size(18, 33); btn.Location = new Point(this.button3.Width - btn.Width, this.button3.Height - btn.Height);
第4节 布尔按钮做条件结构的条件变量，以实现事件的控制
qq_42210908的博客
08-05 1341
布尔按钮做条件结构的条件变量，以实现事件的控制 目标：利用布尔控件实现多事件的控制。 例子如下：在前面板放置3个布尔控件，分别设为按钮1 、按钮2、退出，同时放置两个显示控件，分别对于按钮1和按钮2事件，当按下按钮1或按钮2时，显示控件1和显示按钮2分别显示相应的值。 1.前面板 2.程序实现 本事件采用事件驱动的队列消息处理器，采用移位寄存器+数组函数的机制保存和传递自定义枚举类型的消息指令。程序采用while循环+事件结构+条件结构的处理方式。 共定义了5条消息指令：初始化、用户等待事件
React Native仿美团下拉菜单
热门推荐
xiangzhihong8的专栏
08-07 1万+
在很多产品中都会涉及到下拉菜单选择功能，用的最好的当属美团了，其效果如下： 要实现上面的效果，在原生中比较好做，直接使用PopWindow组件即可。如果使用React Native开发上面的效果，需要注意几个问题： 1、 在下拉的时候有动画过度效果； 2、下拉菜单出现后点击菜单项，菜单项可选择，并触发对应的事件； 3、下拉菜单中的项目可以配置；要实现弹框效果，我们马上回想到使用Model组件
纯CSS实现下拉菜单导航
changerous的博客
06-14 7800
用纯CSS实现下拉菜单导航条，当鼠标hover到按钮上时，下方出现4个下拉菜单导航条。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值