Bootstrap的按钮组

最新推荐文章于 2023-10-11 10:21:17 发布
最新推荐文章于 2023-10-11 10:21:17 发布
阅读量216 收藏
点赞数
分类专栏： Bootstrap 文章标签： Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengqiuming/article/details/86618247
版权

一 按钮——按钮组

1 代码

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>按钮组</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>

<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-fast-backward"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward "></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-forward"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-forward"></span></button>
</div>
</body>
</html>

2 效果

二 按钮——按钮工具栏

1 代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>按钮工具栏</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="btn-toolbar">
  <div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-left"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-right"></span></button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-height"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-width"></span></button>
  </div>
</div>
<br />
<br />
<div class="btn-toolbar">
  <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-left"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-right"></span></button>
  </div>
  <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button>
  </div>
  <div class="btn-group btn-group-xs">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-height"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-width"></span></button>
  </div>
</div>

  <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

2 效果

三 按钮——嵌套分组

1 代码

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>嵌套分组</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="btn-group">
    <button class="btn btn-default" type="button">首页</button>
    <button class="btn btn-default" type="button">产品展示</button>
    <button class="btn btn-default" type="button">案例分析</button>
    <button class="btn btn-default" type="button">联系我们</button>
    <div class="btn-group">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span
                class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="##">公司简介</a></li>
            <li><a href="##">企业文化</a></li>
            <li><a href="##">组织结构</a></li>
            <li><a href="##">客服服务</a></li>
        </ul>
    </div>
</div>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

2 效果

四 按钮——垂直分组

1 代码

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="btn-group-vertical">
    <button class="btn btn-default" type="button">首页</button>
    <button class="btn btn-default" type="button">产品展示</button>
    <button class="btn btn-default" type="button">案例分析</button>
    <button class="btn btn-default" type="button">联系我们</button>
    <div class="btn-group">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span
                class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="##">公司简介</a></li>
            <li><a href="##">企业文化</a></li>
            <li><a href="##">组织结构</a></li>
            <li><a href="##">客服服务</a></li>
        </ul>
    </div>
</div>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

2 效果

五 按钮——等分分组

1 代码

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>等分按钮</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="btn-wrap">
    <div class="btn-group btn-group-justified">
        <a class="btn btn-default" href="#">首页</a>
        <a class="btn btn-default" href="#">产品展示</a>
        <a class="btn btn-default" href="#">案例分析</a>
        <a class="btn btn-default" href="#">联系我们</a>
    </div>
</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>
</html>

2 效果

chengqiuming
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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
Bootstrap按钮组 按钮工具栏 嵌套
weixin_30493401的博客
05-28 115
@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>View1</title> <link href=...
Bootstrap的按钮和按钮组设计
最新发布
昊虹AI笔记
10-11 1747
Bootstrap的按钮和按钮组设计
使用Bootstrap制作嵌套按钮组
m0_64962002的博客
05-18 87
了解嵌套按钮组的制作
Bootstrap按钮组简单实现代码
08-31
Bootstrap按钮组简单实现代码 Bootstrap按钮组是Bootstrap框架中的一种常用UI组件，用于实现按钮的组合展示和交互功能。下面我们将详细介绍Bootstrap按钮组的简单实现代码。 Bootstrap按钮组的基本概念 Bootstrap...
Bootstrap 按钮组
12-13
Bootstrap 按钮组 按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时，这就显得非常有用。您可以通过 结果如下所示： 按钮工具栏 下面的实例演示了上面表格中讨论到的 class .btn-toolbar 的使用：...
Bootstrap按钮组实例详解
08-30
Bootstrap 按钮组实例详解 Bootstrap 按钮组是一种常用的前端UI组件，旨在帮助开发者快速构建漂亮的Web页面。单个按钮在Web页面中的运用有时候并不能满足我们的业务需求，常常会看到将多个按钮组合在一起使用，比如...
JS组件Bootstrap按钮组与下拉按钮详解
10-22
本篇文章将详细介绍JS组件中的Bootstrap按钮组和下拉按钮的使用方法。 **一、按钮组（Button Groups）** 1. **单个按钮组**：当你需要将一组相关的按钮放在一起时，可以使用`.btn-group`类来包裹这些`.btn`类的...
bootstrap前端框架按钮点击事件的触发
yunxiang1224的博客
05-09 8646
花了几天时间用bootstrap写好的页面，没去管它去写后端代码了，结果在触发按钮的点击事件时，我的点击事件压根就没有加上去，网上百度了很多，终于明白没加上去是因为这些按钮是动态加载的，可以用jquery的on方法来解决为将来的元素添加事件。 如： $(document).ready(function() { $("#父级元素id").on("click", '#子元素id', function...
Bootstrap按钮组嵌套
歪脖先生的博客
05-14 716
按钮组嵌套 按钮组允许嵌套，即可以在一个.btn-group中嵌套另一个.btn-group。比如，当你想给按钮组中的某一个按钮添加下拉菜单时，就会用到这种嵌套结构。如： <divclass="btn-group"role="group"aria-label="..."> <buttontype="button"class="btn btn-default"&...
Bootstrap系列之按钮组（Button group）
老__L的博客
05-28 3218
按钮组（Button group）
深入理解BootStrap Item9 -- 按钮组工具栏
小平果的欢乐谷
11-14 2971
1、按钮（按钮组）单个按钮在Web页面中的运用有时候并不能满足我们的业务需求，常常会看到将多个按钮组合在一起使用，比如富文本编辑器里的一组小图标按钮等。那么在这一节中，我们主要向大家介绍Bootstrap框架为大家提供的按钮组组件。源码查询：按钮组也是一个独立的组件，所以可以找到对应的源码文件：☑ LESS版本：对应的源文件为buttons.less☑ Sass版本：对应的源文件为_button
Bootstrap(四) 菜单、按钮及导航
ssisse的博客
04-27 2157
本文转自：http://www.imooc.com/learn/141 下拉菜单（基本用法） 小伙伴们注意，在Bootstrap框架中的下拉菜单组件是一个独立的组件，根据不同的版本，它对应的文件：   ☑  LESS版本：对应的源码文件为 dropdowns.less   ☑  Sass版本：对应的源码文件为 _dropdowns.scss   ☑
bootstrap 按钮组的嵌套
adiking520110的博客
11-24 402
您可以在一个按钮组内嵌套另一个按钮组，即，在一个.btn-group内嵌套另一个.btn-group。当您想让下拉菜单与一系列按钮组合使用时，就会用到这个。 实例： <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charse...
『前端日志』基于Bootstrap框架实现单选按钮组
mad_house的博客
12-24 1585
目标：生成连在一起的三个按钮，点击任意一个按钮，该按钮会显示按下的样式，而另外两个按钮是未按下的样式。同时，为三个按钮分别添加触发函数。 问题：其实是参考的别人的代码，只是不太好找，所以记录一下。 代码： <!--以input和label实现的单选按钮组--> <div style="float : right" class="btn-gr...
BootStrap中的粗体斜体以及强调
热门推荐
实践求真知
01-20 1万+
一 粗体 1 代码 &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;粗体&lt;/title&gt; &lt;link rel="stylesheet" href="https://cdn.bootcss.com/boo
Bootstrap的的输入框下拉选择框和文本域
实践求真知
01-20 6886
一 输入框 1 代码 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;表单控件——输入框input&lt;/title&gt; &lt;link rel="stylesheet

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值