Bootstrap组件_按钮组

最新推荐文章于 2023-12-07 14:42:12 发布
最新推荐文章于 2023-12-07 14:42:12 发布
阅读量211 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Leon_Jinhai_Sun/article/details/88356214
版权 
按钮组

通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>按钮组</title>  
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link 
  rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" 
  >
  <script src="jquery-1.12.1.js"></script>
  <script src="bootstrap.min.js"></script>
</head>
<body>

  <div class="container">
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default">left</button>
      <button type="button" class="btn btn-default">middle</button>
      <button type="button" class="btn btn-default">right</button>
    </div>
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-arrow-left"></span>
      </button>
      <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-arrow-up"></span>
      </button>
      <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-arrow-right"></span>
      </button>
      <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-arrow-down"></span>
      </button>
    </div>
  </div>
  
</body>
</html>
按钮工具栏

把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>按钮组</title>  
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link 
  rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" 
  >
  <script src="jquery-1.12.1.js"></script>
  <script src="bootstrap.min.js"></script>
</head>
<body>

  <div class="container">
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default">left</button>
      <button type="button" class="btn btn-default">middle</button>
      <button type="button" class="btn btn-default">right</button>
    </div>
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-arrow-left"></span>
      </button>
      <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-arrow-up"></span>
      </button>
      <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-arrow-right"></span>
      </button>
      <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-arrow-down"></span>
      </button>
    </div>
  </div>
  
</body>
</html>
尺寸

只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了
多个按钮组时也适用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>按钮组</title>  
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link 
  rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" 
  >
  <script src="jquery-1.12.1.js"></script>
  <script src="bootstrap.min.js"></script>
</head>
<body>

  <div class="container">
    <div class="btn-toolbar" role="toolbar">
      <div class="btn-group btn-group-lg" role="group">
        <button type="button" class="btn btn-default">left</button>
        <button type="button" class="btn btn-default">middle</button>
        <button type="button" class="btn btn-default">right</button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">left</button>
        <button type="button" class="btn btn-default">middle</button>
        <button type="button" class="btn btn-default">right</button>
      </div>
      <div class="btn-group btn-group-sm" role="group">
        <button type="button" class="btn btn-default">left</button>
        <button type="button" class="btn btn-default">middle</button>
        <button type="button" class="btn btn-default">right</button>
      </div>
      <div class="btn-group btn-group-xs" role="group">
        <button type="button" class="btn btn-default">left</button>
        <button type="button" class="btn btn-default">middle</button>
        <button type="button" class="btn btn-default">right</button>
      </div>
    </div>
  </div>
  
</body>
</html>
嵌套

想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>按钮组</title>  
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link 
  rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" 
  >
  <script src="jquery-1.12.1.js"></script>
  <script src="bootstrap.min.js"></script>
</head>
<body>

  <div class="container">
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default dropdown-toggle" 
      data-toggle="dropdown" aria-expended="false" >
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
      </ul>
    </div>
  </div>
  
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>按钮组</title>  
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link 
  rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" 
  >
  <script src="jquery-1.12.1.js"></script>
  <script src="bootstrap.min.js"></script>
</head>
<body>

  <div class="container">
    <div class="btn-group btn-group-justified" role="group">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">left</button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">middle</button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">right</button>
      </div>
    </div>
  </div>
  
</body>
</html>

 

Leon_Jinhai_Sun
关注
Bootstrap 组件：按钮组件的使用
WangMin@汪末末
09-04 557
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 通过按钮组容器（.btn-group）把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。 注意： 按钮组中的工具提示和弹出框需要特别的设置。当为.btn-group中的元素应用工具提示或弹出框时，必须指定container: 'body'选项，这样可以避免不必要的副作用（例如工具提示或弹出框触发时，会让页面元素变宽和/或失去圆角）。 确保设置正确的role属性
bootstrap按钮组件
m0_51281306的博客
03-29 334
<div class="container"> <div class="btn-group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <bu...
Bootstrap按钮组件
datouniao1的博客
11-25 423
在Bootstrap中我们有的时候需要的是将多个按钮放在一起，这个时候就需要使用按钮组件，那么怎样来添加按钮组件。 基本按钮组: 设置class=“btn-group”,     按钮1     按钮1     按钮1 按钮工具栏:这个是将按钮组放在一起，设置class=“btn-toolbar”           >按钮1      按钮5      按钮6
详解Bootstrap按钮组件
weixin_30367543的博客
04-22 148
按钮组也是一个独立的组件，所以可以找到相应的源码文件： Less：buttons.less Sass:_buttons.scss Css:Bootstrap.css 3131行~3291行 按钮组和下拉菜单组件一样，需要依赖于button.js插件才能正常运作。 结构方面：使用一个类名为btn-group的容器，把多个按钮放在这个容器中。 <div class="btn...
Bootstrap的按钮和按钮组设计
昊虹AI笔记
10-11 1928
Bootstrap的按钮和按钮组设计
Bootstrap4_Theme_Library_v1_axure9 Axure 元件库.zip
07-23
通过熟悉和利用这些预设的Bootstrap组件，设计师可以更专注于功能和交互设计，而不需要花费大量时间在样式细节上。同时，了解如何正确安装和使用第三方元件库也是提升Axure RP使用体验的关键技能。
bootstrap4_for_axure8_9
06-04
在Axure中，Bootstrap 4组件库允许设计师直接拖放预设的UI元素，如按钮、表单、导航栏、网格系统等，大大简化了设计过程。Bootstrap 4相较于前一版本（Bootstrap 3）有一些显著的变化和改进： 1. **Flexbox支持**：...
bootstrap-login-forms.rar_bootstrap login_bootstrap 界面_动态图片_网站登陆
09-21
4. **表单（Form）**：Bootstrap提供了.form-group类来处理表单元素的样式，如输入框、按钮等。使用.form-control类可以让输入框看起来更加一致和专业。 5. **输入字段（Input Fields）**：为用户名和密码创建.form...
bootstrap4_apidemo_DEMO_bootstrap_
10-03
首先，Bootstrap 4的核心组件包括网格系统、排版、表单、按钮、导航、模态、提示、工具提示、下拉菜单等。这些组件都设计得易于使用和定制，使得开发者能够快速构建出美观且功能齐全的网页。 1. **网格系统**：...
bootstrap中文手册_bootstrap教程_bootstrap_
09-30
Bootstrap的按钮组件提供了各种样式和大小的按钮，可以通过简单的类名添加到HTML元素上，同时支持按钮组和下拉菜单，为用户提供更多的操作选项。 导航是网页中引导用户浏览的重要部分，Bootstrap提供了多种导航方案...
Bootstrap 组件---按钮组
qazwsx_edc1的博客
07-20 249
&lt;!--在&lt;div&gt;元素上添加.btn-group类来创建按钮组。     &lt;div class="btn-group"&gt;       &lt;a class="btn btn-success"&gt;按钮1&lt;/a&gt;       &lt;a class="btn btn-danger"&gt;按钮2&lt;
Bootstrap组件之按钮组
bboyjoe的博客
07-29 3507
.btn-group——设置div为按钮组； .btn-group-toolbar——设置div为按钮工具栏（须包裹按钮组）； .btn-group-lg、.btn-group-sm、.btn-group-xs——改变按钮组的尺寸； .btn-group-vertivcal——设置按钮组垂直堆叠排列； .btn-group-justified——设置div包裹的按钮组充满父元素；
Bootstrap学习-详解Bootstrap按钮组件（二）
atbird0321的专栏
06-27 235
按钮下拉菜单 按钮下拉菜单仅从外观上看和下拉菜单效果基本上是一样的。它们唯一的不同是外部容器div.dropdown换成了div.btn-group <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> ...
【BootStrap入门级教程】组件1
世人万千丶的博客
10-25 440
本文章介绍了折叠、手风琴、警告框、徽章、面包屑、卡片、轮播图、关闭按钮、下拉列表、列表组和分页组件的常用类和使用示例
Bootstrap常见组件的类名-CSS
qq_59185329的博客
08-24 364
Bootstrap常见组件的类名-CSS
Bootstrap 组件-导航栏
litengbin的博客
01-20 337
1 : 标签页     2 : 胶囊式标签页     3 : 垂直胶囊式标签页     4 : 禁用的链接     标签页 Java IOS Android 胶囊式标签页 Java IOS Android 垂直胶囊式标签页 Java IOS Android 禁用的链接
Bootstrap 按钮组
读万卷书，行万里路
05-03 659
按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时，这就显得非常有用。您可以通过&nbsp;Bootstrap 按钮（Button） 插添加可选的 JavaScript 单选框和复选框样式行为。 下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class： Class 说明 .btn-group 该 class 用于形成基本的按钮组。...
Bootstrap-按钮（参考H+提供的，按钮样式和代码）
最新发布
qq_54015925的博客
12-07 4307
btn btn-primary样式：蓝色（我感觉是绿色，但是查了一些资料都说是蓝色），提供额外的视觉感，可在一系列按钮中指出主要操作。btn btn-link样式：浅蓝色，简化一个按钮，是他看起来像一个连接同时保持按钮的行为。btn btn-success样式：浅蓝色（个人觉得：浅蓝色），可作为默认样式的代替样式。btn btn-block样式：使按钮设置为块样式，+lg样式可填充满整个父容器。btn btn-info样式：绿色（个人觉得：天蓝色），标识成功或积极的动作。以第一种为例，其余的修改对应的。
Bootstrap系列之按钮（Buttons）
热门推荐
老__L的博客
05-28 1万+
按钮（Buttons）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值