bootstrap-按钮组

最新推荐文章于 2023-10-13 16:21:50 发布
最新推荐文章于 2023-10-13 16:21:50 发布
阅读量451 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Aloe_904/article/details/78511793
版权 
<!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.js"></script>
    <script src="../JS/bootstrap.js"></script>

</head>
<body style="height: 2000px;">
    <div class="container"><!-- 容器 -->

        <br><br>
        <input type="button" value="按钮1" class="btn btn-primary">
        <input type="button" value="按钮2" class="btn btn-primary">
        <input type="button" value="按钮3" class="btn btn-primary">

        <br><br>
        <div class="btn-group">
            <input type="button" value="按钮1" class="btn btn-primary">
            <input type="button" value="按钮2" class="btn btn-primary">
            <input type="button" value="按钮3" class="btn btn-primary">
        </div>

        <br><br>
        <div class="btn-group btn-group-justified">
            <a href="#" class="btn btn-primary">按钮</a>
            <a href="#" class="btn btn-primary">按钮</a>
            <a href="#" class="btn btn-primary">按钮</a>
        </div>

        <br><br>
        <div class="btn-group btn-group-justified">
            <input type="button" value="按钮1" class="btn btn-primary">
            <input type="button" value="按钮2" class="btn btn-primary">
            <input type="button" value="按钮3" class="btn btn-primary">
        </div>

        <br><br>
        <div class="btn-group btn-group-justified">
            <div class="btn-group">
                <input type="button" value="按钮1" class="btn btn-primary">
            </div>
            <div class="btn-group">
                <input type="button" value="按钮1" class="btn btn-primary">
            </div>
            <div class="btn-group">
                <input type="button" value="按钮1" class="btn btn-primary">
            </div>
        </div>

        <br><br>
        <div class="btn-group btn-group-vertical">
            <input type="button" value="按钮1" class="btn btn-primary">
            <input type="button" value="按钮2" class="btn btn-primary">
            <input type="button" value="按钮3" class="btn btn-primary">
        </div>

        <br><br>
        <div class="btn-group btn-group-vertical btn-group-lg ">
            <input type="button" value="按钮1" class="btn btn-primary">
            <input type="button" value="按钮2" class="btn btn-primary">
            <input type="button" value="按钮3" class="btn btn-primary">
        </div>


        <!-- 下拉列表 -->
        <br><br>
        <a href="#" class="btn btn-primary">按钮<span class="caret"></span> </a>
        <button class="btn btn-primary">按钮<span class="caret"></span></button>
        <input type="button" value="按钮1" class="btn btn-primary"><span class="caret"></span>

        <br><br>
        <div class="btn-group"><!-- a 和 button 可以做成相同的按钮 -->
            <a href="#" class="btn btn-primary">按钮a</a>
            <a href="#" class="btn btn-primary"><span class="caret"></span></a>
            <br><br>
            <button class="btn btn-primary">按钮button</button>
            <button class="btn btn-primary"><span class="caret"></span></button>
        </div>

        <br><br>
        <div class="btn-group dropup">
            <a href="#" class="btn btn-primary">按钮a</a>
            <a href="#" class="btn btn-primary"><span class="caret"></span></a>
            <br><br>
            <button class="btn btn-primary">按钮button</button>
            <button class="btn btn-primary"><span class="caret"></span></button>
        </div>

        <br><br>
        <div class="github-style">
            <div class="btn-group btn-group-lg">
                <button class="btn btn-default active"><div class="glyphicon glyphicon-euro" ></div>Watch<span class="caret"></span></button>
                <button class="btn btn-default">3,064</button>
            </div>
            <div class="btn-group btn-group-lg">
                <button class="btn btn-default "><div class="glyphicon glyphicon-euro" ></div>Star<span class="caret"></span></button>
                <button class="btn btn-default">36,064</button>
            </div>
            <div class="btn-group btn-group-lg">
                <button class="btn btn-default active"><div class="glyphicon glyphicon-euro" ></div>fork<span class="caret"></span></button>
                <button class="btn btn-default">3,064</button>
            </div>
        </div>
    </div>
</body>
</html>
<!-- 
按钮组
btn-group(默认) :按钮按原来的大小连接在一起

btn-group-justified（按钮比例):按钮连接在一起，自适应容器的大小，按均分配大小，但只有对a标签可以自动做到，对于input 和 button 标签必须要在它们的每个外面加上父级且class="btn-group"，如上面所示

btn-vertical （按钮方向）:将横向的样式改为纵向的样式

btn-group-[lg sm xs]:按钮大小

class="btn-group"
class="btn-group btn-group-justified"
class="btn-group-vertical" 一般不再加btn-group否则四个角的样式不同


箭头：
向下：class="caret":<span class="caret"></span>
当按钮和图标组合使用时 ，应该尽量使用a 和 button ，因为input中的内容是通过value添加的，而不是inhtml ,所以添加的图标会出现在按钮的外部

向上：没有单独的class设置向上的箭头,但在父级的class中设置dropup  同时向下dropdown

-->
只看五分钟佩奇的小姑姑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap系列之按钮组（Button group）
老__L的博客
05-28 3109
按钮组（Button group）
bootstrap4 单选框 默认_bootstrap框架下 单选按钮组的选中以及取值问题
weixin_39734987的博客
01-14 977
1、业务功能：四个按钮只能选中一个，且默认选择水准4先看代码。水准4(波/测)水准3(波/测)水准2(波/测)水准1(波/测)这是查看了bootstrap的资料做的四个按钮的按钮组。业务需求：默认选中水准4，查找bootstrap资料并没有找到合适的解决办法，后来在一篇博客中找到一个方法(实在抱歉，忘记博客的地址了= = )在代码中加了active，代码如下：水准4(波/测)这样就实现了单选及默认...
bootstrap 多选按钮和单选按钮的使用
weixin_45932157的博客
01-12 1239
【代码】bootstrap 多选按钮和单选按钮的使用。
Bootstrap 5-表单-单选按钮/复选框
最新发布
m0_73839298的博客
10-13 803
作用:用于定义存放表单中的复选框/单选按钮的容器。作用:用于定义复选框/单选按钮添加标签。作用:用于定义复选框/单选按钮的控件。
『前端日志』基于Bootstrap框架实现单选按钮组
mad_house的博客
12-24 1556
目标：生成连在一起的三个按钮，点击任意一个按钮，该按钮会显示按下的样式，而另外两个按钮是未按下的样式。同时，为三个按钮分别添加触发函数。 问题：其实是参考的别人的代码，只是不太好找，所以记录一下。 代码： <!--以input和label实现的单选按钮组--> <div style="float : right" class="btn-gr...
bootstrap-4.3.1
06-30
下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。 Bootstrap自带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了“生命”。其中包括： 模式...
Bootstrap按钮组简单实现代码
08-31
主要为大家详细介绍了Bootstrap按钮组的简单实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap按钮组实例详解
08-30
单个按钮在Web页面中的运用有时候并不能满足我们的业务需求，常常会看到将多个按钮组合在一起使用，比如富文本编辑器里的一组小图标按钮等。本文将详细介绍Bootstrap按钮组，感兴趣的朋友一起看看吧
Bootstrap4 按钮组
01-19
Bootstrap4 按钮组 Bootstrap 4 中允许我们将按钮放在同一行上。 可以在 元素上添加 .btn-group 类来创建按钮组。 实例 Apple Samsung Sony 提示: 我们可以使用 .btn-group-lg|sm 类来设置按钮组的大小。 ...
Bootstrap CSS组件之按钮组(btn-group)
08-31
主要为大家详细介绍了Bootstrap CSS组件之按钮组(btn-group)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
BootStrap 表单控件之单选按钮水平排列
12-03
1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>表单控件——单选按钮水平排列</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" re
事件 (附加内容)
21号先锋者
02-01 206
@{ 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 503
1.按钮组：.btn-group ---通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为（简单理解：让按钮在同一行显示），可以解决-合并重叠部分变厚的边框 ，即让第一个元素的所有兄弟元素向左移一个边 <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">Left</button
bootstrap 输入框组 通过加减按钮来增加删除内嵌输入框组
云中不知人的专栏
11-15 1万+
实现效果图如下： 当我点击 + 按钮时，会添加一行输入框组；当点击 - 按钮时，会删除这一行输入框组 html代码如下： salt配置: + 按钮 点击触发事件函数： function addSaltIpGrp(obj){ html = ''+ 'IP:'+ ''+ 'API端口:'+ ''+
div内嵌套输入框,按钮,
Vivianluolita的专栏
02-23 3607
html 税前收入： css .input-box{ border:solid 0.1rem #CCCCCC;border-radius:0.3rem ;} .input-num{padding: 0.5rem 0.3rem;border-radius: 0.3rem;border: none;}
Bootstrap系列之按钮（Buttons）
热门推荐
老__L的博客
05-28 1万+
按钮（Buttons）
Bootstrap
JINGMaNong的博客
07-23 1389
1.Bootstrap 4 页面 1.移动设备优先 在网页的 head 之中添加 viewport meta 标签， H2.容器类 .container 类用于固定宽度并支持响应式布局的容器。 .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。 Bootstrap4 网格系统. Bootstrap 4 网格系统有以下 5 个类: 1、.col- 针对所有设备 2、.col-sm- 平板 - 屏幕宽度等于或大于 576px 3、.col-md- 桌面显示器 -
bootstrap按钮组
I hava a dream
02-02 810
1、基础实例 代码如下 bootstrap按钮组 Left Middle Right 效果图 按钮工具栏 代码如下 bootstrap按钮组 按钮 1 按钮
设置bootstrap按钮组选中状态
06-08
要设置Bootstrap按钮组中的选中状态，可以使用active类。在按钮上添加active类将使其显示为选中状态。 例如，如果您有一个按钮组如下所示： ```html <div class="btn-group" role="group" aria-label="Basic ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值