Bootstrap 教程第六课:各种按钮组合样式
发布日期:2021-11-30 16:49:56 浏览次数:12 分类:技术文章

本文共 1402 字,大约阅读时间需要 4 分钟。

Bootstrap给按钮提供了很丰富的样式,以及组合,根据不同的需求,可以灵活定制自己想要得到的样式。在第四课中,我们介绍了一组按钮添加.btn-group类,使一组按钮组合起来成为一个小的功能按钮集,这个非常实用,有兴趣的可以去看一看。()
这节在第四节的基础上,来介绍更多的按钮组合样式。
如果我们有几个按钮组合,我们可以使用.btn-toolbar类将这些.btn-group包裹起来,这就组成了几组功能按钮的集合,代码示例如下:
样式效果:
如果要控制一组按钮图标的大小,可以在.btn-group的类上继续添加上 .btn-group-lg 等,就可以实现:
.btn-group-lg 大
.btn-group-sm 小
.btn-group-xs 更小
代码示例如下:

效果截图:
可以将一下下拉菜单组.btn-group放到另一个.btn-group中,实现按钮组合功能,代码示例如下:

样式效果:
如果要实现垂直组合的按钮菜单功能,只需要将最外层的.btn-group改成.btn-group-vertical即可,代码示例如:

....

效果如下:

转载地址:https://leeguoren.blog.csdn.net/article/details/51722004 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:jQuery 如何动态添加、删除 class 样式方法介绍
下一篇:Bootstrap 教程第五课:制作下拉菜单

发表评论

最新留言

能坚持,总会有不一样的收获!
[***.219.124.196]2024年03月07日 04时09分09秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

二重积分转换成极坐标_二重积分转换极坐标r的范围如何确定? 2019-04-21
python中倒背如流_八字基础知识--倒背如流篇 2019-04-21
以太坊地址和公钥_以太坊地址是什么 2019-04-21
linux查看wifi信号命令_linux – 获取WIFI信号强度 – 寻求最佳方式(IOCTL,iwlist(iw)等)... 2019-04-21
npm 不重启 全局安装后_解决修复npm安装全局模块权限的问题 2019-04-21
vs格式化json 不生效_vs code 格式化 json 配置 2019-04-21
go 字符串反序列化成对象数组_Fastjson 1.2.24反序列化漏洞深度分析 2019-04-21
onmessage websocket 收不到信息_WebSocket断开重连解决方案,心跳重连实践 2019-04-21
hibernate mysql 缓存_hibernate和mysql的缓存问题,没辙了! 2019-04-21
abp框架 mysql_ABP框架使用Mysql数据库 2019-04-21
mysql树形递归删除_使用递归删除树形结构的所有子节点(java和mysql实现) 2019-04-21
linux mysql 不能连接远程_linux mysql 远程连接 2019-04-21
mysql $lt_mongodb中比较级查询条件:($lt $lte $gt $gte)(大于、小于)、查找条件... 2019-04-21
install python_Install python on AIX 7 2019-04-21
mysql 的版本 命名规则_MySQL版本和命名规则 2019-04-21
php curl 输出到文件,PHP 利用CURL(HTTP)实现服务器上传文件至另一服务器 2019-04-21
PHP字符串运算结果,PHP运算符(二)"字符串运算符"实例详解 2019-04-21
PHP实现 bcrypt,如何使php中的bcrypt和Java中的jbcrypt兼容 2019-04-21
php8安全,PHP八大安全函数解析 2019-04-21
php基础语法了解和熟悉的表现,PHP第二课 了解PHP的基本语法以及目录结构 2019-04-21