bootstrap按钮组

最新推荐文章于 2022-03-29 20:25:31 发布
最新推荐文章于 2022-03-29 20:25:31 发布
阅读量811 收藏
点赞数 1
分类专栏： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wenzhilanyu2012/article/details/43414709
版权
1、基础实例

代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap按钮组</title>
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="js/jquery-1.11.2.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
  </head>
  <body>
  <div class="btn-group" role="group" aria-label="">
  <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>
  </body>
</html>
效果图

按钮工具栏
代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap按钮组</title>
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="js/jquery-1.11.2.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
  </head>
  <body>
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
  <button type="button" class="btn btn-default">按钮 1</button>
  <button type="button" class="btn btn-default">按钮 2</button>
  <button type="button" class="btn btn-default">按钮 3</button>
 </div>
  <div class="btn-group">
  <button type="button" class="btn btn-default">按钮 4</button>
  <button type="button" class="btn btn-default">按钮 5</button>
  <button type="button" class="btn btn-default">按钮 6</button>
  </div>
  <div class="btn-group">
  <button type="button" class="btn btn-default">按钮 7</button>
  <button type="button" class="btn btn-default">按钮 8</button>
  <button type="button" class="btn btn-default">按钮 9</button>
  </div>
</div>
  </body>
</html>
效果图



尺寸
代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap按钮组</title>
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="js/jquery-1.11.2.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
  </head>
  <body>
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-default">按钮 1</button>
  <button type="button" class="btn btn-default">按钮 2</button>
  <button type="button" class="btn btn-default">按钮 3</button>
 </div>
  <div class="btn-group btn-group-sm">
  <button type="button" class="btn btn-default">按钮 4</button>
  <button type="button" class="btn btn-default">按钮 5</button>
  <button type="button" class="btn btn-default">按钮 6</button>
  </div>
  <div class="btn-group btn-group-xs">
  <button type="button" class="btn btn-default">按钮 7</button>
  <button type="button" class="btn btn-default">按钮 8</button>
  <button type="button" class="btn btn-default">按钮 9</button>
  </div>
</div>
  </body>
</html>
效果图



嵌套
代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap按钮组</title>
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="js/jquery-1.11.2.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
  </head>
  <body>
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>
  </body>
</html>
效果图



垂直排列
代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap按钮组</title>
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="js/jquery-1.11.2.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
  </head>
  <body>
<div class="btn-group-vertical">
  <button type="button" class="btn btn-default">按钮 1</button>
  <button type="button" class="btn btn-default">按钮 2</button>

  <div class="btn-group-vertical">
    <button type="button" class="btn btn-default dropdown-toggle" 
      data-toggle="dropdown">
      下拉
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">下拉链接 1</a></li>
      <li><a href="#">下拉链接 2</a></li>
    </ul>
  </div>
</div>
  </body>
</html>
效果图



注：更多学习资源尽在java教程网，http://java.662p.com/thread-4517-1-1.html

xxiaowen
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap的按钮和按钮组设计
昊虹AI笔记
10-11 1747
Bootstrap的按钮和按钮组设计
事件 (附加内容)
21号先锋者
02-01 207
@{ Layout = null; } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt;&lt;!--设置字符集utf-8编码--&gt; &lt;meta name="viewport" content="width=device-wi
Bootstrap 按钮组
fiona_0427的博客
05-21 514
1.按钮组：.btn-group ---通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为（简单理解：让按钮在同一行显示），可以解决-合并重叠部分变厚的边框 ，即让第一个元素的所有兄弟元素向左移一个边 <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">Left</button
零基础Bootstrap入门教程(11)--按钮与按钮组
程序员大阳
02-21 1978
本文目录1. 概述2. 按钮的使用2.1 设置Bootstrap按钮2.2 调整按钮大小2.3 调整按钮颜色样式3. 按钮组的使用3.1 使用按钮组3.2 调整按钮组的大小3.3 调整按钮组方向4. 小结 1. 概述 按钮可以说是使用频率最高的交互组件之一了，Bootstrap框架对按钮也非常重视，提供了多种样式强化类。同时还提供了按钮组，可以组合使用按钮，更加方便。 2. 按钮的使用 2.1 设置Bootstrap按钮 在Bootstrap框架下，只需要为按钮添加.btn类，然后添加.btn-defaul
3.2Bootstrap学习组件篇之按钮组
为者常成，行者常至
05-04 8504
按钮组 用按钮组把一组按钮放在同一行里。通过使用我们的按钮插件，可以设置为单选框或多选框样式及行为。
Bootstrap按钮组简单实现代码
08-31
Bootstrap按钮组简单实现代码 Bootstrap按钮组是Bootstrap框架中的一种常用UI组件，用于实现按钮的组合展示和交互功能。下面我们将详细介绍Bootstrap按钮组的简单实现代码。 Bootstrap按钮组的基本概念 Bootstrap...
Bootstrap按钮组实例详解
08-30
Bootstrap 按钮组实例详解 Bootstrap 按钮组是一种常用的前端UI组件，旨在帮助开发者快速构建漂亮的Web页面。单个按钮在Web页面中的运用有时候并不能满足我们的业务需求，常常会看到将多个按钮组合在一起使用，比如...
JS组件Bootstrap按钮组与下拉按钮详解
10-22
本篇文章将详细介绍JS组件中的Bootstrap按钮组和下拉按钮的使用方法。 **一、按钮组（Button Groups）** 1. **单个按钮组**：当你需要将一组相关的按钮放在一起时，可以使用`.btn-group`类来包裹这些`.btn`类的...
Bootstrap组件之按钮组
bboyjoe的博客
07-29 3489
.btn-group——设置div为按钮组； .btn-group-toolbar——设置div为按钮工具栏（须包裹按钮组）； .btn-group-lg、.btn-group-sm、.btn-group-xs——改变按钮组的尺寸； .btn-group-vertivcal——设置按钮组垂直堆叠排列； .btn-group-justified——设置div包裹的按钮组充满父元素；
BootStrap按钮组
qq_35377740的博客
12-06 260
按钮组 使用.btn-group是按钮放在一行里，成为一组。基本结构&lt;div class="btn-group"&gt;&lt;button&gt;&lt;/button&gt;&lt;button&gt;&lt;/button&gt;&lt;/div&gt;。 按钮工具栏 btn-toolbar，把btn-gorup 分成一块一块的。 按钮组大小 .btn-group
bootstrap怎样让按钮或者组件左右对齐
热门推荐
gaoganghua的博客
07-09 2万+
1.登录页的form表单可以是使用margin:0 auto的方式，居中对齐2.div可以使用pull-right, text-center, pull-left3.按钮或者p标签可以使用text-right, text-center, text-left
Bootstrap组件学习笔记（二）——按钮组和输入框组
Andy_lau
08-23 2318
目录     1.按钮组     2.输入框组 1.按钮组      1.1 总结  1.2 示例代码 1html>2html>3head lang="en">4    meta charset="UTF-8">5    title>组件title>6    7    link href="css/bootstr
Bootstrap创建按钮组
歪脖先生的博客
05-14 371
按钮组 在实际应用中，单个按钮有时候并不能满足我们的业务需求，常常需要将多个按钮组合在一起使用，形成一个页面组件，比如富文本编辑器中的一组小图标按钮等。 创建按钮组 要创建按钮组，只需把相关的链接或按钮放在一个类为 .btn-group 的容器中即可。按钮可以使用 <button> 元素，也可以使用 <a> 元素，显示效果是一样的。如： <divclass=...
bootstrap按钮组件
m0_51281306的博客
03-29 322
<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 4】按钮组
扬大酸奶的博客
01-04 519
Table of Contents   创建按钮组（.btn-group）  设置按钮组大小（.btn-group-lg/.btn-group-sm） 设置按钮组垂直（.btn-group-vertical） 内嵌按钮组及下拉菜单 拆分按钮下拉菜单 ​  Table of Contents 创建按钮组（.btn-group）  设置按钮组大小（.btn-group-lg/.bt...
bootstrap——组件（二、按钮组）
zaichuanguanshui的专栏
01-18 377
1、按钮组.btn-group 把一些按钮放在一个btn-group里面<div class="btn-group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <butt
bootstrap-按钮组
小姑姑的博客
11-12 458
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>按钮组</title> <link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css"> <script src="../JS/jquery-3.2.1.min

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值