09Bootstrap5按钮组

最新推荐文章于 2024-11-12 11:19:19 发布
最新推荐文章于 2024-11-12 11:19:19 发布
阅读量384 收藏 1
点赞数
分类专栏： Bootstrap5 文章标签： bootstrap 前端 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46452300/article/details/121846847
版权

09Bootstrap5按钮组

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <title>菜鸟教程Bootstrap5按钮组</title>
    <script src="../js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!--
Bootstrap 5 中允许我们将按钮放在同一行上。
可以在 <div> 元素上添加 .btn-group 类来创建按钮组。
-->
<div class="container mt-3">
    <h2>按钮组</h2>
    <p> .btn-group 类用于创建按钮组:</p>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">苹果</button>
        <button type="button" class="btn btn-primary">三星</button>
        <button type="button" class="btn btn-primary">华为</button>
    </div>
</div>
<!--
可以使用 .btn-group-lg|sm|xs 类来设置按钮组的大小。
-->
<div class="container mt-3">
    <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">苹果</button>
        <button type="button" class="btn btn-primary">三星</button>
        <button type="button" class="btn btn-primary">华为</button>
    </div>
    <h3>默认按钮:</h3>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">苹果</button>
        <button type="button" class="btn btn-primary">三星</button>
        <button type="button" class="btn btn-primary">华为</button>
    </div>
    <h3>小按钮:</h3>
    <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-primary">苹果</button>
        <button type="button" class="btn btn-primary">三星</button>
        <button type="button" class="btn btn-primary">华为</button>
    </div>
</div>
<!--
垂直按钮组
可以使用 .btn-group-vertical 类来创建垂直的按钮组：
-->
<div class="container mt-3">
    <h2>垂直按钮组</h2>
    <p>可以使用 .btn-group-vertical 类来创建垂直的按钮组：</p>
    <div class="btn-group-vertical">
        <button type="button" class="btn btn-primary">苹果</button>
        <button type="button" class="btn btn-primary">三星</button>
        <button type="button" class="btn btn-primary">华为</button>
    </div>
</div>
<!--
内嵌按钮组及下拉菜单
我们可以在按钮组内设置下拉菜单：
-->
<div class="container mt-3">
    <h2>内嵌按钮组</h2>
    <p>按钮组设置下拉菜单:</p>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">苹果</button>
        <button type="button" class="btn btn-primary">三星</button>
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">华为</button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">荣耀</a></li>
                <li><a class="dropdown-item" href="#">麒麟</a></li>
            </ul>
        </div>
    </div>
</div>
<!--
垂直按钮组及下拉菜单
-->
<div class="container mt-3">
    <h2>垂直按钮组及下拉菜单</h2>
    <div class="btn-group-vertical">
        <button type="button" class="btn btn-primary">苹果</button>
        <button type="button" class="btn btn-primary">三星</button>
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">华为</button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">荣耀</a></li>
                <li><a class="dropdown-item" href="#">麒麟</a></li>
            </ul>
        </div>
    </div>
</div>
<!--
多个按钮组
按钮组可以一个个并列显示在同一行上：
-->
<div class="container mt-3">
    <h2>多个按钮组并排</h2>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">苹果</button>
        <button type="button" class="btn btn-primary">三星</button>
        <button type="button" class="btn btn-primary">华为</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-danger">苹果</button>
        <button type="button" class="btn btn-danger">三星</button>
        <button type="button" class="btn btn-danger">华为</button>
    </div>
</div>
</body>
</html>

在这里插入图片描述

夏至xz
关注
专栏目录
使用bootstrap按钮组并设置其按钮组中按钮的尺寸和距离
乔治大哥的博客
03-05 3002
先说要求的样式： 像悬浮窗一样固定在网页上： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../static/css/bootst...
bootstrap五等分代码CSS和圆形按钮css
04-27
bootstrap五等分代码CSS和圆形按钮css，讲文档添加到bootstrap.css的最后直接写class即可。非常好用
Bootstrap 按钮
书香水墨
07-23 747
一、Bootstrap 按钮 1.1 按钮 <button type="button" class="btn">基本按钮</button> <button type="button" class="btn btn-primary">主要按钮</button> <button type="button" class="btn btn-second...
Bootstrap5 按钮组
qq_44174346的博客
07-28 170
btn-group
Bootstrap4 按钮
weixin_45116096的博客
07-09 202
Bootstrap 4 可以很容易实现信息提示框。 提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例</
bootstrap中圆形按钮的设计
Miss_grapefruit的博客
06-20 3799
html的代码&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;link rel="stylesheet" href="dist/css/bootstrap.min.css&quot
Bootstrap按钮组简单实现代码
08-31
Bootstrap按钮组简单实现代码 Bootstrap按钮组是Bootstrap框架中的一种常用UI组件，用于实现按钮的组合展示和交互功能。下面我们将详细介绍Bootstrap按钮组的简单实现代码。 Bootstrap按钮组的基本概念 Bootstrap...
Bootstrap4 按钮组
01-19
Bootstrap4 按钮组 Bootstrap 4 中允许我们将按钮放在同一行上。 可以在 元素上添加 .btn-group 类来创建按钮组。 实例 Apple Samsung Sony 提示: 我们可以使用 .btn-group-lg|sm 类来设置按钮组的大小。 ...
JS组件Bootstrap按钮组与下拉按钮详解
10-22
本篇文章将详细介绍JS组件中的Bootstrap按钮组和下拉按钮的使用方法。 **一、按钮组（Button Groups）** 1. **单个按钮组**：当你需要将一组相关的按钮放在一起时，可以使用`.btn-group`类来包裹这些`.btn`类的...
Bootstrap按钮组实例详解
08-30
Bootstrap 按钮组实例详解 Bootstrap 按钮组是一种常用的前端UI组件，旨在帮助开发者快速构建漂亮的Web页面。单个按钮在Web页面中的运用有时候并不能满足我们的业务需求，常常会看到将多个按钮组合在一起使用，比如...
【Bootstrap】前端美化—Bootstrap实现按钮组分散对齐
微雨停了的博客
04-24 1745
一、美化代码与图示 1.1 美化前 1.2 美化后 1.3 代码 <div class="row justify-content-between"> <div class="btn-group btn-group-justified"> <input type="radio" class="btn-check" name="scan_type" value="full_scan" id="option1" autocomplete="off" checke
jquery+bootstrap做一个开关（互斥选择）
weixin_30535167的博客
06-15 266
知识点：js中的return 不能使js程序停止或者跳出执行，会继续往下执行。要想让js程序停止或者跳出 可以用 return false 就可以了。 代码： <!---------------------------------------------html----------------------------------------------------------------...
【bootstrap5自动补全(bootstrap5autocomplete)功能介绍】
weixin_43727933的博客
09-10 1610
与百度一下功能相同基于bootstrap5.13的字段补齐功能，支持远程查询与本地查询
Bootstrap 发布十周年，Bootstrap 5都有什么新功能？
前端全栈开发者
08-25 3979
近日，知名前端工具包 Bootstrap 官博宣布十周年，其创始人 Mark Otto 回顾了这十年里取得的一些成就与里程碑数据： 文档浏览量超过 25 亿次，每天超过 685,000 次； 自 2015 年以来，npm 下载量为3.94 亿，仅 2020 年就有超过 1.31 亿次下载。在过去的六年中，每天有 180,000 次。 5000 万次 RubyGems 下载 5700 万次 NuGet 下载 750 万次 Packagist 安装 被超过 22% 的网站使用 被 GitHub 上的 270
Bootstrap系列之间隔（Spacing）
老__L的博客
06-04 2180
间隔（Spacing）
Bootstrap 3 圆形按钮 circle button
Just Code
11-19 3708
  HTML: &lt;button type="button" class="btn btn-default btn-circle"&gt;&lt;i class="glyphicon glyphicon-ok"&gt;&lt;/i&gt;&lt;/button&gt; &lt;button type="button" class="bt
前端 Flex 布局语法详解
ning的博客
11-10 1084
Flex是Flexible Box的缩写，意为“弹性布局”。它允许容器内的项目（子元素）自动调整大小，以适应不同屏幕尺寸和布局需求。如果需要行内Flex布局，可以使用Flex布局提供了一种强大而灵活的方式来创建响应式布局。通过理解并应用上述属性，你可以轻松地创建出复杂且适应不同屏幕尺寸的布局。随着现代浏览器对Flex布局的广泛支持，它已经成为前端开发中不可或缺的一部分。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章CSDN - Flex布局详解菜鸟教程 - Flex 布局语法教程。
蓝凌OA-EKP hrStaffWebService 任意文件读取漏洞
iSee857的博客
11-12 392
它集成了流程管理、知识管理、会议管理、公文管理、合同管理、费用管控等多个模块，旨在帮助企业解决基础OA应用、系统集成、开发平台和创新业务定制等长期扩展需求，推动企业实现管理在线化、知识赋能化、运营数字化和人机智能化‌。漏洞，未经身份验证攻击者可通过该漏洞读取系统重要文件（如数据库配置文件、系统配置文件）、数据库配置文件等等，导致网站处于极度不安全状态。在处理客户端输入的参数时，进行严格的验证和过滤，防止未授权的文件访问。返回数据经过base64编码 解码后可得读取数据。
Vue中的常用指令
最新发布
m0_62388400的博客
11-12 738
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
Bootstrap按钮组详解与实例
"Bootstrap按钮组是一种常见的Web设计组件，它允许我们将多个按钮组合在一起，以实现更复杂的交互和布局效果。这种技术常用于富文本编辑器或其他需要一系列操作按钮的场景。本文将深入探讨Bootstrap按钮组的使用方法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

夏至xz

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

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

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

打赏作者

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

抵扣说明：

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

余额充值