Bootstrap页面布局14 - BS按钮群组

首先看看这个代码：

<div class='btn-group'><button type='button' class='btn'>计算机</button><button type='button' class='btn'>网络</button><button type='button' class='btn'>桌面项目</button>
</div>

将功能相近的按钮分成一组，bootstrap 为我们设定了该组的样式

如图：

还可以进行更加复杂的分组

<div class='btn-toolbar'><div class='btn-group'><button type='button' class='btn'>计算机</button><button type='button' class='btn'>网络</button><button type='button' class='btn'>桌面项目</button></div><div class='btn-group'><button type='button' class='btn'>按钮一</button><button type='button' class='btn'>按钮二</button><button type='button' class='btn'>按钮三</button></div>
</div>

如图：

使用这种方法可以为网站创建复杂的工具栏

转载于:https://www.cnblogs.com/Zell-Dinch/p/3887735.html

Bootstrap页面布局14 - BS按钮群组相关推荐

Bootstrap页面布局13 - BS按钮
bootstrap中的按钮类一般可以作为按钮的标签有:<a></a> <button></button> <input type='butt ...
Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单
代码: <div class='container-fluid'><h2 class='page-header'>导航</h2><!-- .navrbar n ...
Bootstrap页面布局17 - BS选项卡
代码结构: <div class='container-fluid'><h2 class='page-header'>Bootstrap 选项卡</h2><! ...
Bootstrap页面布局10 - BS表格
①了解需要怎样的表格标签结构 ②bootstrap为我们提供了一些类来变换表格样式 1.table中添加 <table class='table'></table> 如图: 2 ...
Omad群组部署、依赖部署一键解决
本文来自网易云社区作者:李培斌前言基于omad部署平台实现一键部署的实践已有很多成功的经验,杭研QA的技术先锋们也在ks圈里有很多不同的文章去阐述关于这类需求的实现和思路,当然包括我们金融事业部 ...
【历史上的今天】12 月 14 日：计算复杂性理论先驱出生；雅虎群组被关闭；W3C 召开第一次会议
整理 | 王启隆透过「历史上的今天」,从过去看未来,从现在亦可以改变未来. 今天是 2021 年 12 月 14 日,在 1906 年的今天,马克斯·普朗克在柏林的物理学会上发表了题为<论正常 ...
爬虫训练场项目前端之 Bootstrap 信息提示框，按钮与按钮组，徽章，进度条
爬虫训练场项目前端之 Bootstrap 信息提示框,按钮与按钮组,徽章,进度条 Bootstrap5 信息提示框 Bootstrap 5 按钮和按钮组 Bootstrap 5 徽章进度条 Boot ...
bootstrap图片怎么横向布局_AMOS画图小技巧1：页面布局由竖向调整为横向A4尺寸...
打开AMOS后,如果你对它默认的页面布局感到不爽的话,怎么办呢?当然是去调整一下它的页面布局嘛,这样有助于后面在更大的空间内画出模型图. 看,上面呢就是AMOS默认的页面,它是竖向的,类似于一张竖版的 ...
第十三届蓝桥杯（web组），第五题【页面布局】制作网站首页
页面布局主要使用的是flex布局,justify-content和align-item可以让内容居中,这两个属性使用较多. html里面也添加了相应了类名(注意看哈),这个页面布局有点小瑕疵, 浏览内 ...

Bootstrap页面布局14 - BS按钮群组

Bootstrap页面布局14 - BS按钮群组相关推荐

最新文章

热门文章