Bootstrap 按钮组

最新推荐文章于 2019-09-30 10:10:16 发布
最新推荐文章于 2019-09-30 10:10:16 发布
阅读量151 收藏
点赞数
分类专栏： 前端 文章标签： Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27870421/article/details/97051814
版权
一、按钮组

1.1 基本按钮组

Bootstrap 4 中允许我们将按钮放在同一行上。
可以在 <div> 元素上添加 .btn-group类来创建按钮组。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>按钮组</h2>
  <p> .btn-group 类用于创建按钮组:</p>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>

</body>
</html>

在这里插入图片描述

1.2 设置按钮组大小

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>按钮组大小</h2>
  <p>我们可以使用 .btn-group-lg|sm|xs 类来设置按钮组的大小。</p>
  <h3>大按钮:</h3>
  <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
  <h3>默认按钮:</h3>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
  <h3>小按钮:</h3>
  <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>

</body>
</html>

在这里插入图片描述

1.3 垂直按钮组


<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>垂直按钮组</h2>
  <p>U可以使用 .btn-group-vertical 类来创建垂直的按钮组：</p>
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>

</body>
</html>

在这里插入图片描述
1.4 内嵌按钮组及下拉菜单

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>内嵌按钮组</h2>
  <p>按钮组设置下拉菜单:</p>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Sony
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Tablet</a>
        <a class="dropdown-item" href="#">Smartphone</a>
      </div>
    </div>
  </div>
</div>

</body>
</html>

在这里插入图片描述
1.5 拆分按钮下拉菜单

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>拆分按钮下拉菜单</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Sony</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

</body>
</html>

在这里插入图片描述

1.6 垂直按钮组及下拉菜单

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>垂直按钮组及下拉菜单</h2>
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        Sony
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Tablet</a>
        <a class="dropdown-item" href="#">Smartphone</a>
      </div>
    </div>
  </div>
</div>

</body>
</html>

在这里插入图片描述

书香水墨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Bootstrap组件-按钮，按钮组
qq_27009517的博客
06-14 205
按钮可以button，也可以是a display: inline-block的使用：a <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width...
Bootstrap（四）: 按钮及按钮组
榴莲丸子的博客
04-12 1209
       学完上一节Bootstrap（三）:  表单点击打开链接，本节继续学习网页布局中的另一个重要的元素：按钮。       为了便于对按钮的样式分析，首先给接下去所有的按钮放在一个well类的div中进行比较，这个well类也是在bootstrap中定义的，目的是使该容器内容凹陷显示或者是有插图的效果。直接的，我们就来看不同button类的代码和效果图，然后再进行分析。&lt;div c...
Bootstrap 基本样式-按钮
热门推荐
litengbin的博客
01-19 2万+
按钮样式 可以用于  按钮元素  超链元素  按钮类型的input元素   提交类型的input元素   重置类型的input元素 原始样式按钮 把button标签变成了平面的，一般不使用 原始样式按钮默认按钮 无色按钮 默认按钮提交按钮 用于提交数据 提交按钮成功按钮 一般用于
设置bootstrap按钮组默认选中状态
09-30 4609
使用bootstrap(V3.3.7)按钮组（btn-group）时，很多时候我们需要按钮组在显示的时候，预先设置一个按钮处于选中状态。 <div class="text-right" style="margin-bottom:0.5em;"> 排序：<span class="btn-group btn-group-sm" role="group" id="orderB...
bootstrap按钮组样式
丹丘的博客
12-20 1004
bootstrap按钮组：btn-group<div class="btn-group pull-right" style="margin-right: 10%;"> <a href="#" onclick="deleteApp()" iconCls="icon-remove" class="btn default"><i class="glyphicon glyphicon-remove">
Bootstrap .btn 各种按钮样式的使用
wuyujin1997的博客
05-18 1万+
Bootstrap CDN <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">...
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 教程第六课：各种按钮组合样式
Bingo
06-20 4128
Bootstrap给按钮提供了很丰富的样式，以及组合，根据不同的需求，可以灵活定制自己想要得到的样式。在第四课中，我们介绍了一组按钮添加.btn-group类，使一组按钮组合起来成为一个小的功能按钮集，这个非常实用，有兴趣的可以去看一看。（Bootstrap教程第四课：制作一组功能图标按钮） 这节在第四节的基础上，来介绍更多的按钮组合样式。 如果我们有几个按钮组合，我们可以使用.btn
Bootstrap创建按钮组
歪脖先生的博客
05-14 375
按钮组 在实际应用中，单个按钮有时候并不能满足我们的业务需求，常常需要将多个按钮组合在一起使用，形成一个页面组件，比如富文本编辑器中的一组小图标按钮等。 创建按钮组 要创建按钮组，只需把相关的链接或按钮放在一个类为 .btn-group 的容器中即可。按钮可以使用 <button> 元素，也可以使用 <a> 元素，显示效果是一样的。如： <divclass=...
bootstrap之button样式
xixi
10-29 6886
一、前言现在开始介绍bootstrap的button模块样式，包括buttons.less、button-groups.less。二、源码1、buttons.less1.1、buttons.less源码 // // Buttons(按钮) // -------------------------------------------------- // Base styles(基础样式) //
Bootstrap学习笔记（六） 按钮组
可爱的我可爱的code
08-19 180
通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为 &lt;div class="btn-group"&gt; &lt;button type="button" class="btn btn-default"&gt;Left&lt;/button&gt; &lt;button type="button" cl
Bootstrap 组件---按钮组
qazwsx_edc1的博客
07-20 236
&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—各式各样的按钮
生如夏花 炫至茶靡
12-13 2万+
Bootstrap为我们提供了各式各样漂亮的按钮，我们无需自己给按钮写样式，直接使用它给我们提供的类样式，使用在我们的按钮上，非常的简单方便。 活学活用，自己利用bootstrap的样式来做一个表格，里边放一些知识点： 类样式 描述 .btn 圆角灰色按钮，为了让按钮不那么尖锐，我们的按钮都应该使用这个样式来获得圆角，然后再覆盖上其他的特性
详解Bootstrap 定义按钮的样式（CSS）
weixin_30439067的博客
12-09 419
以下样式可用于<a>, <button>, 或 <input> 元素上： 更多关于Bootstrap 定义CSS样式的可查看：http://v2.bootcss.com/base-css.html 转载于:https://www.cnblogs.com/caojiayan/p/6148983.html...
Bootstrap 按钮组详解与应用
"Bootstrap按钮组是BootStrap前端开发中的一个重要元素，用于组织和美化页面上的按钮。按钮组允许将多个按钮排列在一起，提供了一种更有效地管理和展示操作的方式。Bootstrap提供了多种类来实现不同样式和功能的按钮...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

书香水墨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值