按钮(按钮组)
单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等。那么在这一节中,我们主要向大家介绍Bootstrap框架为大家提供的按钮组组件。
源码查询:
按钮组也是一个独立的组件,所以可以找到对应的源码文件:
☑ LESS版本:对应的源文件为buttons.less
☑ Sass版本:对应的源文件为_buttons.scss
☑ CSS版本:对应bootstrap.css文件第3131行~第3291行
使用方法:
按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运行。不过我们同样可以直接只调用bootstrap.js文件。因为这个文件已集成了button.js插件功能。
对于结构方面,非常的简单。使用一个名为“btn-group”的容器,把多个按钮放到这个容器中。如下所示:
<div class="btn-group">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-step-backward"></span>
</button>
…
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-step-forward"></span>
</button>
</div>
除了可以使用<button>元素之外,还可以使用其他标签元素,比如<a>标签。唯一要保证的是:不管使用什么标签,“.btn-group”容器里的标签元素需要带有类名“.btn”。
按钮组实现源码如下:
/*查看bootstrap.css文件第3131行~第3161行*/
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
position: relative;
float: left;
}
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover,
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus,
.btn-group > .btn:active,
.btn-group-vertical > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn.active {
z-index: 2;
}
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus {
outline: none;
}
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
margin-left: -1px;
}
从效果图上我们可以看出,按钮组四个角都是圆角(支持CSS3的浏览器),但有的小伙伴会问,我们平常制作网页时每个按钮都是带有圆角,而在按钮组中的按钮,除了第一个和最后一个具有边上的圆角之外,其他的按钮没有圆角,它是怎么实现的呢?其实实现方法非常简单:
1、默认所有按钮都有圆角
2、除第一个按钮和最后一个按钮(下拉按钮除外),其他的按钮都取消圆角效果
3、第一个按钮只留左上角和左下角是圆角
4、最后一个按钮只留右上角和右下角是圆角
对应的源码如下:
/*查看bootstrap.css文件第3174行~第3203行*/
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
.btn-group > .btn:first-child {
margin-left: 0;
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child> .btn:last-child,
.btn-group > .btn-group:first-child> .dropdown-toggle {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group > .btn-group:last-child> .btn:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
按钮(按钮工具栏)
在富文本编辑器中,将按钮组分组排列在一起,比如说复制、剪切和粘贴一组;左对齐、中间对齐、右对齐和两端对齐一组,如下图所示:
那么Bootstrap框架按钮工具栏也提供了这样的制作方法,你只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中,如下所示:
<div class="btn-toolbar">
<div class="btn-group">
…
</div>
<div class="btn-group">
…
</div>
<div class="btn-group">
…
</div>
<div class="btn-group">
…
</div>
</div>
实现原理主要是让容器的多个分组“btn-group”元素进行浮动,并且组与组之前保持5px的左外距。代码如下:
/*源码请查阅bootstrap.css文件第3162行~第3173行*/
.btn-toolbar {
margin-left: -5px;
}
.btn-toolbar .btn-group,
.btn-toolbar .input-group {
float: left;
}
.btn-toolbar > .btn,
.btn-toolbar > .btn-group,
.btn-toolbar > .input-group {
margin-left: 5px;
}
注意在”btn-toolbar”上清除浮动。
/*源码请查阅bootstrap.css文件第5062行*/
.btn-toolbar:before,
.btn-toolbar:after{
display: table;
content: " ";
}
.btn-toolbar:after{
clear: both;
}
按钮组大小设置
在介绍按钮一节中,我们知道按钮是通过btn-lg、btn-sm和btn-xs三个类名来调整padding、font-size、line-height和border-radius属性值来改变按钮大小。那么按钮组的大小,我们也可以通过类似的方法:
☑ .btn-group-lg:大按钮组
☑ .btn-group-sm:小按钮组
☑ .btn-group-xs:超小按钮组
只需要在“.btn-group”类名上追加对应的类名,就可以得到不同大小的按钮组。如下所示:
<div class="btn-toolbar">
<div class="btn-group btn-group-lg">
…
</div>
<div class="btn-group">
…
</div>
<div class="btn-group btn-group-sm">
…
</div>
<div class="btn-group btn-group-xs">
…
</div>
</div>
实现样式代码如下:
/*源码请查阅bootstrap.css文件第2320行~第2340行*/
.btn-lg,
.btn-group-lg> .btn{
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
.btn-sm,
.btn-group-sm> .btn {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.btn-xs,
.btn-group-xs> .btn{
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
分享到:
相关推荐
总的来说,这个压缩包提供了一个学习和应用Bootstrap按钮组的完整资源,包括视频教程、示例图片和可能的讲解材料。对于想要提升网页设计技能,尤其是使用Bootstrap框架的C#开发者来说,这是一个非常有价值的资料包。
Bootstrap还考虑了按钮组中的分隔问题,比如当两个按钮组并排放置时,它们之间会有一个像素的负边距,这样可以避免样式上的重叠。这种细节处理使得组件在布局上看起来更加紧凑和专业。 ```css .btn-group.btn + ....
Bootstrap按钮组是Bootstrap框架中的一种常用UI组件,用于实现按钮的组合展示和交互功能。下面我们将详细介绍Bootstrap按钮组的简单实现代码。 Bootstrap按钮组的基本概念 Bootstrap按钮组是指将多个按钮组合到...
本资源"11.Bootstrap按钮.rar"包含了一份关于如何在Bootstrap中使用按钮的详细教程。 在Bootstrap中,按钮是一个关键组件,提供了多种样式和大小,以适应不同的设计需求。以下是关于Bootstrap按钮的一些关键知识点...
5. **按钮组**: 如果你需要将多个按钮放在一起,Bootstrap的`btn-group`类可以帮助你实现。在Unigui中,创建一个包含多个按钮的组,可以写成:`<div class="btn-group"><button class="btn btn-primary">按钮1...
除了单个按钮,Bootstrap 还允许创建按钮组(Button Group)和下拉菜单(Dropdown),这些组合形式同样可以应用水晶样式,增加页面的交互性和多样性。 8. **应用场景**: 水晶样式按钮适用于各种类型的网站和应用...
本篇文章主要探讨的是Bootstrap按钮组(Button Groups)的源码解读。 按钮组是Bootstrap提供的一种组织多个按钮的方式,它们看起来像是被放置在一个统一的单元内。按钮组允许用户在一个紧凑的空间内选择一个或多个...
本篇文章将详细介绍JS组件中的Bootstrap按钮组和下拉按钮的使用方法。 **一、按钮组(Button Groups)** 1. **单个按钮组**:当你需要将一组相关的按钮放在一起时,可以使用`.btn-group`类来包裹这些`.btn`类的...
这包括一个视频教程(16.Bootstrap按钮下拉菜单.mp4)和可能是一个演示文稿(新建 PPT 演示文稿.ppt),旨在帮助学习者深入理解这一功能。 Bootstrap的按钮下拉菜单是设计交互式用户界面的重要组成部分,它允许在...
Bootstrap 按钮组是一种常用的前端UI组件,旨在帮助开发者快速构建漂亮的Web页面。单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标...
例如,一个简单的输入框组,包括一个前缀和一个提交按钮,可以这样编写: ```html <span class="input-group-addon">@ <button class="btn btn-default"> 提交2 ``` 若要在输入框组中加入下拉列表,...
### 一、Bootstrap按钮 Bootstrap的按钮设计优雅,提供多种预定义的样式,包括`primary`、`secondary`、`success`、`danger`、`warning`、`info`和`light`等。这些样式不仅改变了颜色,还调整了边框和文字颜色,...
Bootstrap是一款由Twitter推出的开源前端开发包,功能非常强大。今天我们要分享的这款jQuery开关按钮组合就是基于Bootstrap框架的,看了按钮的主题样式,也都是Bootstrap的样式风格,比较清新和简单。这款jQuery开关...
按钮组允许你将多个按钮排列在一起,形成一个单元,它们可以水平或垂直布局,甚至支持下拉菜单。这在有限的空间内展示多个操作选项时非常有用。按钮工具栏则允许你组合多个按钮组,创建自定义的工具栏布局。 此外,...
Bootstrap按钮提供了多种样式和大小,以适应各种设计需求。按钮基于HTML的`<button>`或`<a>`元素,并使用特定的类来定义其样式。 #### 2.1 基础按钮 创建一个基础按钮,使用`.btn`类和相应的颜色类,如`.btn-...
Bootstrap4 按钮组 Bootstrap 4 中允许我们将按钮放在同一行上。 可以在 元素上添加 .btn-group 类来创建按钮组。 实例 Apple Samsung Sony 提示: 我们可以使用 .btn-group-lg|sm 类来设置按钮组的大小。 ...
在这个文件中,开发者可以看到如何在实际项目中应用Bootstrap的类和方法,例如如何添加导航栏(Navbar)、按钮组(Button Group)、表单(Forms)、网格系统(Grid System)等,并且可以浏览和测试所有可用的...
Bootstrap 按钮组 按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时,这就显得非常有用。您可以通过 结果如下所示: 按钮工具栏 下面的实例演示了上面表格中讨论到的 class .btn-toolbar 的使用:...