Bootstrap 框架-按钮组组件

最新推荐文章于 2021-09-21 23:38:39 发布

VIP文章「已注销」

最新推荐文章于 2021-09-21 23:38:39 发布

阅读量1.7k

点赞数

分类专栏：前端开发入门文章标签： Bootstrap按钮组组件

本文链接：https://blog.csdn.net/MoDuRooKie/article/details/81587355

版权

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

按钮组也是一个独立的组件，所以可以找到对应的源码文件：

☑ LESS 版本：对应的源文件为 buttons.less

☑ Sass 版本：对应的源文件为 _buttons.scss

☑ CSS 版本：对应 bootstrap.css 文件第3131行～第3291行

使用方法

按钮组和下拉菜单组件一样，需要依赖于 button.js 插件才能正常运行。不过我们同样可以直接只调用 bootstrap.js 文件。因为这个文件已集成了 button.js 插件功能。

使用一个名为“btn-group”的容器，把多个按钮放到这个容器中。如下所示：

<body>

<div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-zoom-in"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-zoom-out"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-download"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-upload"></span></button>
</div>

  <script src="http://img.mukewang.com/down/53c6484f00013d9300000000.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>

按钮组

除了可以使用 <button> 元素之外，还可以使用其他标签元素，比如 <a> 标签。唯一要保证的是：不管使用什么标签，“.btn-group”容器里的标签元素需要带有类名“.btn”。

我们平常制作网页时每个按钮都是带有圆角，而在按钮组中的按钮，除了第一个和最后一个具有边上的圆角之外，其他的按钮没有圆角，它是怎么实现的呢？

默认所有按钮都有圆角
除第一个按钮和最后一个按钮（下拉按钮除外），其他的按钮都取消圆角效果
第一个按钮只留左上角和左下角是圆角
最后一个按钮只留右上角和右下角是圆角

按钮工具栏

将按钮组分组排列在一起，只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中，如下所示：

<div class="btn-toolbar&#

最低0.47元/天解锁文章

「已注销」

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap 框架-按钮组组件

&lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;按钮组也是一个独立的组件，所以可以找到对应的源码文件：☑ LESS 版本：对应的源文件为 buttons.less☑ Sass 版本：对应的源文件为 _buttons.scss☑ ...
复制链接

扫一扫