Bootstrap学习笔记 11 - Button Groups

最新推荐文章于 2022-05-28 23:50:02 发布
最新推荐文章于 2022-05-28 23:50:02 发布
阅读量539 收藏
点赞数 1
分类专栏： Bootstrap 文章标签： bootstrap 按钮组 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011304970/article/details/78661505
版权
  • 按钮组用<div>包含，样式为 btn-group

示例： 


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/>
        <script src="./node_modules/jquery/dist/jquery.min.js"></script>
        <script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <title>Button Groups</title>
        <script>

            function showHTMLContent(showElement, codeElement) {
                $(showElement).html($('<div/>').text($(codeElement).html()).html());
            }

            $(function() {
                showHTMLContent('#showBasicStyle', '#basicStyle');
                showHTMLContent('#showJustifiedStyle', '#justifiedStyle');
                showHTMLContent('#showDropdownStyle', '#dropdownStyle');
                showHTMLContent('#showSplitDropdownStyle', '#splitDropdownStyle');
                $(":radio").click(function() {
                    $("#btnGroup").attr("class", $(this).val());
                    showHTMLContent('#showBasicStyle', '#basicStyle');
                });
            });
        </script>
    </head>
    <body>
        <div class="container">

            <h1> 基本样式 </h1>
            <h2> 选择样式 </h2>
            <form>
                <input type="radio" name="style" value="btn-group" checked>btn-group<br>
                <input type="radio" name="style" value="btn-group btn-group-lg">btn-group btn-group-lg<br>
                <input type="radio" name="style" value="btn-group btn-group-sm">btn-group btn-group-sm<br>
                <input type="radio" name="style" value="btn-group-vertical">btn-group-vertical<br>
            </form>
            <h2> 代码 </h2>
            <pre id="showBasicStyle"></pre>
            <h2> 样式 </h2>
            <div id="basicStyle">
                <div class="btn-group" id="btnGroup">
                    <button type="button" class="btn btn-primary">C++</button>
                    <button type="button" class="btn btn-primary">Java</button>
                    <button type="button" class="btn btn-primary">Python</button>
                </div>
            </div>
            <br><br>
            <h1> Justified 样式 </h1>
            <h2> 代码 </h2>
            <pre id="showJustifiedStyle"></pre>
            <h2> 样式 </h2>
            <div id="justifiedStyle">
                <div class="btn-group btn-group-justified">
                    <a href="#" class="btn btn-primary">C++</a>
                    <a href="#" class="btn btn-primary">Java</a>
                    <a href="#" class="btn btn-primary">Python</a>
                </div>
            </div>
            <br><br>
            <h1> 下拉菜单 </h1>
            <h2> 代码 </h2>
            <pre id="showDropdownStyle"></pre>
            <h2> 样式 </h2>
            <div id="dropdownStyle">
                <div class="btn-group">
                    <button type="button" class="btn btn-primary">C++</button>
                    <button type="button" class="btn btn-primary">Java</button>
                    <div class="btn-group">
                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                        Python <span class="caret"></span></button>
                        <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Python2</a></li>
                        <li><a href="#">Python3</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <br><br>
            <h1> Split下拉菜单 </h1>
            <h2> 代码 </h2>
            <pre id="showSplitDropdownStyle"></pre>
            <h2> 样式 </h2>
            <div id="splitDropdownStyle">
                <div class="btn-group">
                    <button type="button" class="btn btn-primary">C++</button>
                    <button type="button" class="btn btn-primary">Java</button>
                    <button type="button" class="btn btn-primary">Python</button>
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Python2</a></li>
                        <li><a href="#">Python3</a></li>
                    </ul>
                </div>
            </div>
            <br><br><br><br>
        </div>
    </body>
</html>

查看运行结果

Cynhard85
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html按钮使能,element-ui button和button-group组件源码学习
weixin_42118011的博客
06-23 1194
继续看其他组件，接下来看下比较常用的button组件。一、button组件html结构整个button组件是基于原生的button元素实现的。我们来看下这个元素的属性值。class=”el-button”，el-button的样式。@click=”handleClick”，按钮的click事件。:disabled=”buttonDisabled || loading”，当按钮的使能或者loadin...
bootstrap button group
weixin_30858241的博客
05-14 144
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewpot" content="width=device-width,initial-scale=1.0"> <title>learn bootstrap</...
Bootstrap系列之按钮组（Button group）
老__L的博客
05-28 3234
按钮组（Button group）
Unity自定义ButtonGroup类
曲径通幽的博客
11-09 2146
本文只作为参考，个人水平有限，望见谅！ 最近接触HTC Vive的项目中，使用的UI交互要不就是World下的UGUI，要不就是使用立体的Sprite来实现。而最经常出现的就是多个选择按钮，高亮选择，点击执行操作。所以在这里总结出两种情况下的ButtonGroup类，提供给有需要的人。PC是可以使用的，在Vive中需要导入Vive Input Utility这个插件，由于时间关系我还没试过。Bu
html如何将多个复选框组织成一组_[Selenium]18.如何处理一组元素
weixin_39862697的博客
11-23 451
场景button group就是元素组，将一组按钮排列在一起。处理这种对象的思路一般是使用find_elements_by_XXXX方法, 然后使用index或属性去定位更具体的元素代码下面的代码演示了如何找到一组复选框, 实现全选或者是选择哪一个复选框。button_group.html<html> <head> <meta http-equiv="con...
bootstrap学习笔记-html5
12-22
这个“bootstrap学习笔记-html5”压缩包文件显然包含了有关如何使用Bootstrap和HTML5进行网页设计的资料，非常适合初学者入门。接下来，我们将深入探讨这两个重要主题。 HTML5（超文本标记语言第五版）是网页开发的...
Bootstrap-3-Tutorial-16---Button-Groups:以下视频教程的代码
07-14
这个“Bootstrap-3-Tutorial-16---Button-Groups”教程可能详细讲解了如何创建和使用这些按钮组。 在Bootstrap 3中，按钮组是通过`.btn-group`类来实现的。你可以将`.btn`类的按钮放在一个带有`.btn-group`类的`...
Bootstrap-3-Tutorial-21---Justifying-Button-Groups:以下视频教程的代码
07-13
在Bootstrap 3中，按钮组（Button Groups）是一个强大的组件，它允许我们将多个按钮组织在一起，形成一个单元，使得布局和交互更加一致和美观。在本教程中，我们将深入探讨如何在Bootstrap 3中对齐按钮组。 ...
bootstrap-table-zh-CN.js
08-27
bootstrap-table-zh-CN.js,有需要就下载吧
HTML中的button标签的使用，和介绍
datouniao1的博客
08-08 1万+
关于button按钮的介绍 知道：button是定义一个按钮，但是在表单中也有一个可以定义按，我们知道当<input type="button">的时候也是在网页上创建了一个按钮, 现在要说的是这个button这个标签和input里面的标签有怎样的区别。当然这个标签为我们提供了更为强大的功能，我们可以设置button，设置button上 面的文字，甚至可以加载图像等等多媒体
amazeui学习笔记--css（常用组件3）--按钮组Button-group
weixin_33811539的博客
05-08 816
amazeui学习笔记--css（常用组件3）--按钮组Button-group 一、总结 1、按钮组用法：把一系列要使用的 .am-btn 按钮放入 .am-btn-group 。 2、按钮工具栏：将 .am-btn-group 放进 .am-btn-toolbar，实现工具栏效果。 3、按钮组大小：给 .am-btn-group 增加 class .am-btn-group-lg 或 ...
按钮组（Button group）
u011897415的专栏
08-31 1万+
要想让单选按钮表现出某种“排它”行为，你必须把它们加入到一个“按钮组” （ButtonGroup）中。不过，正如下面的例子所演示的，任何AbstractButton对象都可以 加入到按钮组中。 为了避免重复编写大量的代码，下面这个例子使用了反射功能来产生几组不同类型的按钮。 注意 makeBPanel( )方法，它用来创建一个按钮组和一个 JPanel，此方法的第二个参数 是一个
html单选按钮+分组,单选按钮的分组
weixin_42545159的博客
06-21 2140
对单选按钮进行分组:每组的第一个单选按钮设置属性：Group，Tabstop，Auto;其余按钮设置属性Tabstop，Auto。如：Radio1、Radio2、Radio3为一组，Radio4、Radio5为一组设定Radio1属性：Group，Tabstop，Auto设定Radio2属性：Tabstop，Auto设定Radio3属性：Tabstop，Auto设定Radio4属性：Group，T...
html中按钮方法,html中<button>标签的使用详解
weixin_42153691的博客
07-04 1万+
关于button按钮的介绍 知道：button是定义一个按钮，但是在表单中也有一个可以定义按钮，我们知道当的时候也是在网页上创建了一个按钮,现在要说的是个button这个标签和input里面的标签有怎样的区别。当然这个标签为我们提供了更为强大的功能，我们可以设置button，设置button上面的文字，甚至可以加载图像等等多媒体在HTML5中button标签有增加了一些属性，比如说autofocu...
html中button的属性相关
old_man31的博客
01-13 3791
http://yige.org/tags/tag_button.php
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">...
Bootstrap4：导航栏右侧对齐
热门推荐
Cynhard的专栏
12-12 2万+
Bootstrap 版本： bootstrap-4.0.0-beta.2通过Bootstrap4 的 Flex 布局可以很容易地将导航栏右侧对齐，只需要在包含导航栏的 <div> 加上 .justify-content-end 样式即可。示例： <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class=
Bootstrap学习笔记 18 - Collapse
Cynhard的专栏
12-01 705
Collapse实现Collapse 在某个元素（比如<div>）加上 .collapse 类，该元素用来显示折叠的内容 为了控制折叠内容的显示与隐藏，需要增加另外一个元素（ <a> 或者 <button>），并且加上 data-toggle="collapse" 类 为了将折叠元素与控制折叠的元素关联起来，需要在折叠元素上加上 id=xxx 并且在控制折叠的元素上加上 data-target=#x
bootstrap学习笔记
最新发布
05-28
Bootstrap 是一个流行的前端框架，它可以帮助开发者快速构建各种响应式网站和应用程序。以下是一些 Bootstrap 学习笔记： 1. 开始使用 Bootstrap 要开始使用 Bootstrap，你需要在你的 HTML 文件中引入 Bootstrap 的 CSS 和 JavaScript 文件。你可以在 Bootstrap 的官方网站上下载这些文件，或者通过 CDN 引入。 2. 使用 Bootstrap 的网格系统 Bootstrap 的网格系统是它最重要的功能之一。它可以帮助你创建响应式布局，使你的网站在不同的设备上都能够良好地显示。使用 Bootstrap 的网格系统，你可以将页面分为不同的列和行，并在这些列和行中放置内容。 3. Bootstrap 的组件 Bootstrap 提供了许多组件，包括导航栏、表单、按钮、模态框、轮播图等等。这些组件可以帮助你快速构建功能丰富的页面。 4. 自定义 Bootstrap 样式 如果你想要使用自定义的样式，可以使用 Bootstrap 的 SASS 或 LESS 变量。这些变量可以帮助你更改 Bootstrap 的颜色、字体、间距等等。 5. 使用 Bootstrap 的插件 Bootstrap 还提供了许多插件，包括日期选择器、滚动条、下拉菜单等等。这些插件可以让你的网站更加交互性。 以上是关于 Bootstrap 的一些学习笔记，希望能对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值