`
9秒学院
  • 浏览: 37413 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

bootstrap按钮组(一)

阅读更多
按钮(按钮组)

单个按钮在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;
}
分享到:
评论

相关推荐

    15.Bootstrap按钮组.rar

    总的来说,这个压缩包提供了一个学习和应用Bootstrap按钮组的完整资源,包括视频教程、示例图片和可能的讲解材料。对于想要提升网页设计技能,尤其是使用Bootstrap框架的C#开发者来说,这是一个非常有价值的资料包。

    Bootstrap按钮组件详解

    Bootstrap还考虑了按钮组中的分隔问题,比如当两个按钮组并排放置时,它们之间会有一个像素的负边距,这样可以避免样式上的重叠。这种细节处理使得组件在布局上看起来更加紧凑和专业。 ```css .btn-group.btn + ....

    Bootstrap按钮组简单实现代码

    Bootstrap按钮组是Bootstrap框架中的一种常用UI组件,用于实现按钮的组合展示和交互功能。下面我们将详细介绍Bootstrap按钮组的简单实现代码。 Bootstrap按钮组的基本概念 Bootstrap按钮组是指将多个按钮组合到...

    11.Bootstrap按钮.rar

    本资源"11.Bootstrap按钮.rar"包含了一份关于如何在Bootstrap中使用按钮的详细教程。 在Bootstrap中,按钮是一个关键组件,提供了多种样式和大小,以适应不同的设计需求。以下是关于Bootstrap按钮的一些关键知识点...

    unigui Bootstrap按钮

    5. **按钮组**: 如果你需要将多个按钮放在一起,Bootstrap的`btn-group`类可以帮助你实现。在Unigui中,创建一个包含多个按钮的组,可以写成:`&lt;div class="btn-group"&gt;&lt;button class="btn btn-primary"&gt;按钮1...

    超绚丽的 Bootstrap 水晶样式按钮集合

    除了单个按钮,Bootstrap 还允许创建按钮组(Button Group)和下拉菜单(Dropdown),这些组合形式同样可以应用水晶样式,增加页面的交互性和多样性。 8. **应用场景**: 水晶样式按钮适用于各种类型的网站和应用...

    Bootstrap源码解读按钮(5)

    本篇文章主要探讨的是Bootstrap按钮组(Button Groups)的源码解读。 按钮组是Bootstrap提供的一种组织多个按钮的方式,它们看起来像是被放置在一个统一的单元内。按钮组允许用户在一个紧凑的空间内选择一个或多个...

    JS组件Bootstrap按钮组与下拉按钮详解

    本篇文章将详细介绍JS组件中的Bootstrap按钮组和下拉按钮的使用方法。 **一、按钮组(Button Groups)** 1. **单个按钮组**:当你需要将一组相关的按钮放在一起时,可以使用`.btn-group`类来包裹这些`.btn`类的...

    16.Bootstrap按钮下拉菜单.rar

    这包括一个视频教程(16.Bootstrap按钮下拉菜单.mp4)和可能是一个演示文稿(新建 PPT 演示文稿.ppt),旨在帮助学习者深入理解这一功能。 Bootstrap的按钮下拉菜单是设计交互式用户界面的重要组成部分,它允许在...

    Bootstrap按钮组实例详解

    Bootstrap 按钮组是一种常用的前端UI组件,旨在帮助开发者快速构建漂亮的Web页面。单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标...

    bootstrap下拉列表与输入框组结合的样式调整

    例如,一个简单的输入框组,包括一个前缀和一个提交按钮,可以这样编写: ```html &lt;span class="input-group-addon"&gt;@ &lt;button class="btn btn-default"&gt; 提交2 ``` 若要在输入框组中加入下拉列表,...

    Bootstrap 第17章 按钮和折叠插件

    ### 一、Bootstrap按钮 Bootstrap的按钮设计优雅,提供多种预定义的样式,包括`primary`、`secondary`、`success`、`danger`、`warning`、`info`和`light`等。这些样式不仅改变了颜色,还调整了边框和文字颜色,...

    基于Bootstrap的jQuery开关按钮组合

    Bootstrap是一款由Twitter推出的开源前端开发包,功能非常强大。今天我们要分享的这款jQuery开关按钮组合就是基于Bootstrap框架的,看了按钮的主题样式,也都是Bootstrap的样式风格,比较清新和简单。这款jQuery开关...

    Bootstrap 第7章 图标菜单和按钮组件

    按钮组允许你将多个按钮排列在一起,形成一个单元,它们可以水平或垂直布局,甚至支持下拉菜单。这在有限的空间内展示多个操作选项时非常有用。按钮工具栏则允许你组合多个按钮组,创建自定义的工具栏布局。 此外,...

    Bootstrap 第3章 表格和按钮

    Bootstrap按钮提供了多种样式和大小,以适应各种设计需求。按钮基于HTML的`&lt;button&gt;`或`&lt;a&gt;`元素,并使用特定的类来定义其样式。 #### 2.1 基础按钮 创建一个基础按钮,使用`.btn`类和相应的颜色类,如`.btn-...

    Bootstrap4 按钮组

    Bootstrap4 按钮组 Bootstrap 4 中允许我们将按钮放在同一行上。 可以在 元素上添加 .btn-group 类来创建按钮组。 实例 Apple Samsung Sony 提示: 我们可以使用 .btn-group-lg|sm 类来设置按钮组的大小。 ...

    bootstrap文件及bootstrap图标大全

    在这个文件中,开发者可以看到如何在实际项目中应用Bootstrap的类和方法,例如如何添加导航栏(Navbar)、按钮组(Button Group)、表单(Forms)、网格系统(Grid System)等,并且可以浏览和测试所有可用的...

    Bootstrap 按钮组

    Bootstrap 按钮组 按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时,这就显得非常有用。您可以通过 结果如下所示: 按钮工具栏 下面的实例演示了上面表格中讨论到的 class .btn-toolbar 的使用:...

Global site tag (gtag.js) - Google Analytics