Bootstrap中按钮组，输入框组总结

最新推荐文章于 2022-03-29 20:29:14 发布
最新推荐文章于 2022-03-29 20:29:14 发布
阅读量539 收藏 1
点赞数 2
分类专栏： # JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YZSS17/article/details/113481069
版权

总览

在这里插入图片描述

按钮组

按钮组允许多个按钮被堆叠在同一行上。当把按钮对齐在一起时，非常有用。

下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class：

Class描述代码示例
.btn-group该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。<div class="btn-group"> <button type="button" class="btn btn-default">Button1</button> <button type="button" class="btn btn-default">Button2</button> </div>
.btn-toolbar该 class 有助于把几组
结合到一个
中，一般获得更复杂的组件。
<div class="btn-toolbar" role="toolbar"> <div class="btn-group">...</div> <div class="btn-group">...</div> </div>
.btn-group-lg, .btn-group-sm, .btn-group-xs这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。<div class="btn-group btn-group-lg">...</div> <div class="btn-group btn-group-sm">...</div> <div class="btn-group btn-group-xs">...</div>
.btn-group-vertical该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。<div class="btn-group-vertical"> ... </div>
<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <button type="button" class="btn btn-default">按钮 3</button>
</div>
  • 按钮工具栏
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <button type="button" class="btn btn-default">按钮 3</button>
 </div>
<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 4</button>
    <button type="button" class="btn btn-default">按钮 5</button>
    <button type="button" class="btn btn-default">按钮 6</button>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 7</button>
    <button type="button" class="btn btn-default">按钮 8</button>
    <button type="button" class="btn btn-default">按钮 9</button>
</div>
</div>
  • 按钮的大小
<div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <button type="button" class="btn btn-default">按钮 3</button>
</div>
    <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-default">按钮 4</button>
    <button type="button" class="btn btn-default">按钮 5</button>
    <button type="button" class="btn btn-default">按钮 6</button>
</div>
    <div class="btn-group btn-group-xs">
    <button type="button" class="btn btn-default">按钮 7</button>
    <button type="button" class="btn btn-default">按钮 8</button>
    <button type="button" class="btn btn-default">按钮 9</button>
</div>
  • 嵌套
    在一个按钮组内嵌套另一个按钮组，即，在一个 .btn-group 内嵌套另一个 .btn-group 。
<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        下拉
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">下拉链接 1</a></li>
        <li><a href="#">下拉链接 2</a></li>
    </ul>
    </div>
</div>
  • 垂直的按钮组
<div class="btn-group-vertical">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <div class="btn-group-vertical">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        下拉
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">下拉链接 1</a></li>
        <li><a href="#">下拉链接 2</a></li>
    </ul>
    </div>
</div>

输入框组

通过向输入域添加前缀和后缀的内容，可以向用户输入添加公共的元素。例如， 可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。

向 .form-control 添加前缀或后缀元素的步骤如下：

  1. 把前缀或后缀元素放在一个带有 class .input-group 的
    中。
  2. 在相同的
    内，在 class 为 .input-group-addon 的 内放置额外的内容。
  3. 把该 放置在 元素的前面或者后面。
  • 基本的输入框组
<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="twitterhandle">
        </div>
        <br>
        <div class="input-group">
            <input type="text" class="form-control">
            <span class="input-group-addon">.00</span>
        </div>
        <br>
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="text" class="form-control">
            <span class="input-group-addon">.00</span>
        </div>
    </form>
</div>
  • 输入框组的大小
    向 .input-group 添加相对表单大小的 class（比如 .input-group-lg、input-group-sm）来改变输入框组的大小。输入框中的内容会自动调整大小。
<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="input-group input-group-lg">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="Twitterhandle">
        </div>
        <br>
        <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="Twitterhandle">
        </div>
        <br>
        <div class="input-group input-group-sm">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="Twitterhandle">
        </div>
    </form>
</div>
  • 复选框和单选插件
    把复选框和单选插件作为输入框组的前缀或者后缀元素，如下面的实例所示：
<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input type="checkbox"></span>
                    <input type="text" class="form-control">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
            <br>
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input type="radio"></span>
                    <input type="text" class="form-control">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </form>
</div>
  • 按钮插件
    把按钮作为输入框组的前缀或者后缀元素，此时就不是添加 .input-group-addon class，使用 class .input-group-btn 来包裹按钮。这是必需的，因为默认的浏览器样式不会被重写。
<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                    </span>
                    <input type="text" class="form-control">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
            <br>
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                    </span>
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </form>
</div>
  • 带有下拉菜单的按钮
    在输入框组中添加带有下拉菜单的按钮，只需要简单地在一个 .input-group-btn class 中包裹按钮和下拉菜单即可。
<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default 
                        dropdown-toggle" data-toggle="dropdown">下拉菜单
                            <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 class="divider"></li>
                            <li>
                                <a href="#">分离的链接</a>
                            </li>
                        </ul>
                    </div><!-- /btn-group -->
                    <input type="text" class="form-control">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
            <br>
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default 
                        dropdown-toggle" data-toggle="dropdown">下拉菜单
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu pull-right">
                            <li>
                                <a href="#">功能</a>
                            </li>
                            <li>
                                <a href="#">另一个功能</a>
                            </li>
                            <li>
                                <a href="#">其他</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">分离的链接</a>
                            </li>
                        </ul>
                    </div><!-- /btn-group -->
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </form>
</div>
  • 分割的下拉菜单按钮
    在输入框组中添加带有下拉菜单的分割按钮，使用与下拉菜单按钮大致相同的样式，但是对下拉菜单添加了主要的功能。
<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default" tabindex="-1">下拉菜单</button>
                        <button type="button" class="btn btn-default 
                        dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                            <span class="caret"></span>
                            <span class="sr-only">切换下拉菜单</span>
                        </button>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#">功能</a>
                            </li>
                            <li>
                                <a href="#">另一个功能</a>
                            </li>
                            <li>
                                <a href="#">其他</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">分离的链接</a>
                            </li>
                        </ul>
                    </div><!-- /btn-group -->
                    <input type="text" class="form-control">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
            <br>
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default" tabindex="-1">下拉菜单</button>
                        <button type="button" class="btn btn-default 
                        dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                            <span class="caret"></span>
                            <span class="sr-only">切换下拉菜单</span>
                        </button>
                        <ul class="dropdown-menu pull-right">
                            <li>
                                <a href="#">功能</a>
                            </li>
                            <li>
                                <a href="#">另一个功能</a>
                            </li>
                            <li>
                                <a href="#">其他</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">分离的链接</a>
                            </li>
                        </ul>
                    </div><!-- /btn-group -->
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </form>
</div>
叶子桑桑
关注
专栏目录
bootstrap 中 input输入框与其他样式的组合
春夏秋冬
11-25 2万+
比如这样的，将bootstrap的定义的图标放入input 用户名 密　码
Bootstrap 输入框组
weixin_33704234的博客
01-27 122
2019独角兽企业重金招聘Python工程师标准>>> ...
bootstrap 导航栏、输入框按钮组、栅格系统
weixin_30540691的博客
06-21 457
栅格系统 文档地址：http://v3.bootcss.com/css/#grid 栅格系统的强大之处在于灵活的处理不同分辨率下的页面布局，对于我这种理科思维并且是前端弱鸡的人来说，优点在于可预见、可控，同时最大限度的减少了页面布局过程中的代码量，实乃神器。 举例说明： <div class="container-fluid"> <div class="row"...
bootstrap带有下拉按钮的输入框_bootstrap可编辑下拉框jquery.editable-select实例详解...
weixin_30784365的博客
01-12 1125
本文主要介绍了bootstrap可编辑下拉框jquery.editable-select的相关资料，需要的朋友可以参考下，希望能帮助到大家。然后直接请看代码：引用：HTML部分：用量JS部分：ajaxDirect(contextPath + "/admin/getDataDictAll/024",{},function(data){var htm = "";for ( var int = 0; i...
bootstrap输入框组（13）
qq_43687284的博客
12-28 402
向 .form-control 添加前缀或后缀元素的步骤如下： 把前缀或后缀元素放在一个带有 class .input-group 的 &amp;lt;div&amp;gt; 中。 接着，在相同的 &amp;lt;div&amp;gt; 内，在 class 为 .input-group-addon 的 &amp;lt;span&amp;gt; 内放置额外的内容。 把该 &amp;lt;span&amp;gt; 放置在 &amp
bootstrap 通过加减按钮实现输入框组功能
01-19
当我点击 + 按钮时，会添加一行输入框组；当点击 – 按钮时，会删除这一行输入框组 html代码如下： 中心机IP: <button class=btn btn-info type=button data-toggle=tooltip title=新增 id=addCenterIpGrpBtn...
bootstrap下拉列表与输入框组结合的样式调整
09-01
在Bootstrap中，输入框组（Input Groups）和下拉列表（Dropdowns）是两个常用的功能，它们可以组合使用，以创建更复杂的用户界面。下面我们将深入探讨如何在Bootstrap中调整下拉列表与输入框组结合的样式。 首先，...
bootstrap输入框组使用方法
08-31
在本文中，我们将深入探讨Bootstrap框架中的输入框组（Input Groups）的使用方法。Bootstrap是一个流行的前端开发框架，它提供了一套美观、响应式的UI组件，使得构建网站变得更加容易。输入框组是其中的一个关键组件...
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
10-22
总结来说，本文介绍的是如何利用Bootstrap的输入框组组件(input-group)结合jQuery来实现动态添加和删除功能。通过编写自定义的jQuery插件，我们可以轻松地为网页表单增加交互性，提高用户体验。在实际项目中，这种...
html输入框组摁钮组,Bootstrap CSS组件之输入框组
weixin_30889555的博客
06-04 474
本文实例为大家分享了Bootstrap输入框组的具体代码，供大家参考，具体内容如下了解table-cell的表格width设置为1%的原因。通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。input-group(input-group-xs,input-group-sm,i...
Bootstrap3 多选和单选框(checkbox)
08-31
多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。接下来通过本文给大家介绍Bootstrap3 多选和单选框，一起看看吧
Bootstrap——按钮式下拉菜单、输入框组
Shiliang1995
06-15 1586
<!-- 图标 --> <!-- aria-label属性表示该标签的意图 --> <!-- 如果图标纯粹当装饰作用时，可以给这些图标设置aria-hidden=“true”属性 -->
bootstrap带有下拉按钮的输入框_bootstrap输入框组件使用方法详解
weixin_36079387的博客
12-29 960
本文实例为大家分享了bootstrap输入框组的具体使用方法，供大家参考，具体内容如下1、基本用法我们有时需要在输入框一侧或两侧添加额外的元素这个时候只需要把所有元素都包裹在一个.input-group的div里面就可以但是每个输入框组只能有一个input@.00$.002、尺寸给最外层的.input-group添加.input-group-lg.input-group-sm.input-grou...
Bootstrap学习笔记（七） 输入框组
可爱的我可爱的code
08-19 658
通过在文本输入框 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 或 .input-group-btn 类，可以给 .form-control 的前面或后面添加额外的元素 &lt;div class="input-group"&gt; &lt;span class="input-group-add...
Bootstrap组件学习笔记（二）——按钮组和输入框组
Andy_lau
08-23 2353
目录     1.按钮组     2.输入框组 1.按钮组      1.1 总结  1.2 示例代码 1html>2html>3head lang="en">4    meta charset="UTF-8">5    title>组件title>6    7    link href="css/bootstr
Bootstrap-table给单元格添加功能按钮和事件
weixin_42575028的博客
02-15 4849
Bootstrap-table给单元格添加功能按钮和事件 给表格添加按钮及事件，给按钮添加事件需要在columns中添加两个参数，events和formatter 如图红色边框所示
bootstrap输入框组件
m0_51281306的博客
03-29 883
<div class="container"> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Username"> </div> <div ...
Bootstrap框架之按钮
weixin_42146366的博客
07-20 671
一、简介 通过按钮（Button）插件，可以添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组。 二、按钮 可作为按钮使用的标签或元素 为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。 <a class="btn btn-default" href="...
bootstrap如何把表单select input button弄在一行
热门推荐
竹音林的专栏
11-08 2万+
bootstrap很多折叠样式css都已经写好，可以直接用，很方便。但是，如果遇到一些bootstrap文档里面没有的例子，估计很多初学者都懵了，然后会折腾很久也未见得有效。今天主要讲如何把select input button弄在一行，因为直接用bootstrap的form-control样式会出现换行！只需要解决为何换行即可；form-control有个属性：width:100%，这个是产生换
Bootstrap3.2 Input-group 教程：按钮与输入框组结合
"Input-group输入组是Bootstrap框架中的一个重要组件，用于组合输入元素和相关的操作按钮，提供了一种更美观和一致的用户界面。这个组件在前端开发中常用于创建表单，使用户能够更方便地进行数据输入和交互。本文将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值