开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Bootstrap输入按钮组插件，隐藏第二个按钮后显示第一个按钮的圆角

Bootstrap 的输入按钮组插件（Button Group）允许你将多个按钮组合成一个单一的元素。默认情况下，按钮组中的按钮会共享边框和圆角，以创建一个统一的外观。如果你隐藏了第二个按钮并希望显示第一个按钮的圆角，可以通过自定义 CSS 来实现。

基础概念

Bootstrap Button Group: 这是一个用于将多个按钮组合在一起的组件，通常用于导航或表单操作。
CSS 圆角: 使用 border-radius 属性可以设置元素的圆角。

相关优势

统一外观: 按钮组提供了一种简单的方式来创建一组视觉上一致的按钮。
易于实现: 使用 Bootstrap 的类可以快速构建按钮组。
响应式设计: Bootstrap 的按钮组可以很好地适应不同的屏幕尺寸。

类型

基本按钮组: 使用 .btn-group 类。
垂直按钮组: 使用 .btn-group-vertical 类。
嵌套按钮组: 可以在按钮组内再嵌套一个按钮组。

应用场景

导航菜单: 如标签页或下拉菜单。
表单操作: 如提交、重置等按钮组合。
工具栏: 集成多个功能按钮。

遇到的问题及解决方法

如果你隐藏了第二个按钮并希望第一个按钮显示完整的圆角，可以通过以下步骤解决：

HTML 结构:
HTML 结构:
CSS 样式: 使用自定义 CSS 来调整第一个按钮的圆角，使其看起来像是独立的按钮。
CSS 样式: 使用自定义 CSS 来调整第一个按钮的圆角，使其看起来像是独立的按钮。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Button Group Example</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .btn-group > .btn:first-child:not(.d-none) {
      border-top-right-radius: .25rem;
      border-bottom-right-radius: .25rem;
    }
    .btn-group > .btn:last-child.d-none + .btn {
      border-top-left-radius: .25rem;
      border-bottom-left-radius: .25rem;
    }
  </style>
</head>
<body>
  <div class="container mt-5">
    <div class="btn-group">
      <button type="button" class="btn btn-primary">Button 1</button>
      <button type="button" class="btn btn-secondary d-none">Button 2</button>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

解释

HTML: 使用 .d-none 类隐藏第二个按钮。
CSS: 自定义样式确保第一个按钮在第二个按钮隐藏时显示完整的圆角。

通过这种方式，你可以灵活地控制按钮组的视觉效果，使其适应不同的设计需求。

相关搜索:隐藏右按钮时，中间引导按钮组中的圆角会丢失使用Bootstrap隐藏实际单选按钮的显示是否隐藏bootstrap 4中的范围输入按钮？隐藏第一个按钮onclick显示第二个，隐藏第二个onclick显示第一个按钮单选按钮显示/隐藏输入都是必需的该隐藏按钮将在输入值文本后立即显示，而不按任何按钮输入组上的下拉按钮未正确显示如何使用DataBinding显示和隐藏单击按钮后的视图选定后，隐藏单选按钮并在新div中显示选定的值如何将Bootstrap中的按钮组转换为表单的无线电输入？当我检查是否至少有一个输入完成时显示一个按钮，当输入==为空时隐藏相同的按钮如何对bootstrap4窗体输入组中的按钮使用float或类似的css命令？如何在按钮点击时显示进度条直到广告被加载，在广告被加载后再次隐藏进度条并显示没有按钮点击按钮的广告是否可以在html中取消隐藏选中但未选中第一个框的第二个输入框上的提交按钮使用单选按钮在不同的表单组中隐藏/显示多个文本框的最佳方式是什么？如何以编程方式在UINavigationController的左栏按钮项目中显示UISearchController，并在搜索后隐藏它？LinearLayout在中间显示第二个项目，而不是第一个项目的正下方，最后一个项目(按钮)在屏幕的按钮上即使表单为空，Onclick警报也能工作吗？单击提交按钮后，警告显示第一个，然后显示输入字段是必需的检查表单输入是否为空，如果不是，则在按下提交按钮时显示隐藏的div 除非单击选定选项卡，否则隐藏容器中的角度材料垫选项卡组不会显示溢出按钮

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

jQuery Mobile(jqm)按钮的隐藏和显示,包括a标签,圆角和非圆角按钮

于是各种HTML5的框架都出来了。由于对于jquery的熟悉，jquery mobile 为多数人选择学习的对象。我也是众多追求者之一。最近一直在开发jQuery Mobile的相关应用。...2，隐藏按钮1，并且将按钮2改为圆角点击按钮3，显示按钮1，并且将按钮2改为非圆角如有不懂，请加qq群：135430763，共同学习...隐藏按钮4，并且将按钮5改为圆角点击按钮6，显示按钮4，并且将按钮5改为非圆角 <div data-role="controlgroup...('click',function(){ //隐藏按钮1 $('#btn1').parent("div").css('display','none'); //给按钮2添加样式，使按钮2...unbind().bind('click',function(){ //隐藏按钮1 $('#btn1').parent("div").css('display',''); //给按钮2

3.5K3 0

BootStrap应用开发学习入门

BootStrap 使用案例我的第一个BootStrap页面: Hello World!....sr-only #可以隐藏内联表单的标签 label标签 .control-label #控制label标签 label标签 .form-control #表单与其组件显示样式（常用输入框焦点...输入框组扩展自表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。....input-group-btn #按钮插件把按钮作为输入框组的前缀或者后缀元素 #输入组大小 input-group-lg #改变输入框组的大小。....btn-group-vertical #让一组按钮垂直堆叠显示，而不是水平堆叠显示。 #自适应大小的按钮组 .btn-group-justified #类来设置自适应大小的按钮组。

17.6K2 0

BootStrap应用开发学习入门

BootStrap 使用案例我的第一个BootStrap页面: Hello World!....sr-only #可以隐藏内联表单的标签 label标签 .control-label #控制label标签 label标签 .form-control #表单与其组件显示样式（常用输入框焦点...输入框组扩展自表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。....input-group-btn #按钮插件把按钮作为输入框组的前缀或者后缀元素 #输入组大小 input-group-lg #改变输入框组的大小。....btn-group-vertical #让一组按钮垂直堆叠显示，而不是水平堆叠显示。 #自适应大小的按钮组 .btn-group-justified #类来设置自适应大小的按钮组。

14.6K3 0

Bootstrap实用手册

内层：为或 data-toggle="dropdown" ：切换内容的显示和隐藏 (3)....Bootstrap 组件－按钮组.btn-group (1). 基本按钮 ? (2). 将一组 .btn-group 组合进一个 .btn-toolbar(按钮工具栏) ? (3)....JS 插件－警告框 alert.js (1). 父元素 class ="alert alert-danger alert-dismissible" (2). 关闭按钮，位于父元素的第一个子元素....JS 插件－按钮 botton.js (1). 设置按钮的操作文本，为按钮元素添加 data-loading-text="显示的文本" ? (2).....navbar-collapse 折叠按钮，当屏幕大于 768px 正常显示，屏幕尺寸小于 768px隐藏，通过按钮点击完成展开显示注意：响应式导航条的结构——只有从手机屏幕才能看出来 ?

6K2 0

BootStrap框架总结

BootStrap框架总结: 概述: Bootstrap是最受欢迎的HTML,CSS和JS框架,用于开发响应式布局,移动设备优先的WEB项目. 作用: 开发响应式的页面....入门: 下载BootStrap www.bootcss.com官网地址模板: 1.导入BootStrap的css. 2.导入jquery的js(1.8+) 3.导入BootStrap的js 4.设置视口...超小屏响应式工具: 显示: visible-xs 超小屏可见 visible-sm 小屏可见 visible-md 中等屏幕可见 visible-lg 大屏幕可见隐藏: hidden-xs...btn-default : 默认/标准按钮 btn-primary : 原始按钮样式(未必操作) btn-success : 表示成功的动作 btn-info : 该样式可用于要弹出信息的按钮..." 下拉选: 导航条: javaScript 插件: "jQuery 插件为Bootstrap 的组件赋予了"生命".可以简单的一次性引入所有插件,或者逐个引入到你的页面中."

3.3K2 0

Bootstrap快速入门

学习后的最大感受就是：bootstrap让前端布局和渲染的工作，由填空题变成了选择题。即便没有很强的审美能力，也可以让网页简洁大方，颜值爆表。 ?...随着bootstrap的火爆，出现了很多优秀插件，比如Font Awesome字体。 Bootstrap官网地址，demo和文档非常丰富。其下载后的源码结构为： ?...比如下面连个选择器的优先，第一个比第二个高。...例如，设置按钮组，除第一个、最后一个按钮和带dropdown-toggle样式的元素外，其他btn样式都不设置圆角 .btn-group > .btn:not(:first-child):not(:last-child...；显示用户输入代码；元素新生多行代码块。

4.2K6 1

BootStrap基础知识

toast.hide() 隐藏一个元素的吐司。您的吐司元件将保留在 DOM 上，但不会再显示。...slide string 或 boolean false 当用户手动循环第一个元件之后，轮播将自动循环。如果为 “轮播”, 则在载入后自动播放。... collapse 类用于指定一个折叠元素，点击按钮后会在隐藏与显示之间切换。...控制内容的隐藏与显示，需要在或元素上添加 data-toggle="collapse" 属性。...输入框组(Input-group) 例：

3341 0

Jump Start Bootstrap 第4章

我们将会看到如何添加下拉菜单到导航栏、切换按钮的状态、当点击按钮时漂亮的警告信息会在显示一段时间后消失等等功能。...复选框包含CSS样式的单选、复选按钮用起来并不方便，Bootstrap提供了一个重新设计的方案：它将一组复选框或单选按钮组合成一组Bootstrap按钮，这些按钮被放在一起。...Bootstrap已经完全修改了复选框(checkbox)的显示。它们现在看起来是一组Bootstrap按钮。因为它们是复选框，所以我可以选中选项1和选项3。...所有复选框类型的输入元素都应该封装在标签元素中。这些标签必须有Bootstrap的按钮类。在这种情况下，我选择了灰色的按钮。...您可以通过混合Bootstrap的按钮类来创建按钮组中的多色按钮，比如btn-primary、 btn-info等。单选按钮您还可以创建一组单选按钮，其中只有一个按钮是可选的。

28.4K4 0

Bootstrap学习文档（二）

示例代码如下：你可以把 Bootstrap 的 css 的样式文件注释后刷新浏览器，看看两种情况下的标签的默认样式。...100%，并且还添加了一些其它的样式，如表单圆角效果和聚焦发光 form-group 给表单纵向之间添加了一些距离 form-inline 让表单在一行中显示，此时可以不要form-group，但还是建议加上..."> 按钮 Bootstrap 为我们提供了丰富的按钮样式按钮的背景色 btn-default 默认的按钮样式 btn-link 链接样式的按钮...，显示和隐藏相关的内容满足条件则显示 visible-- 第一个*的内容是 lg md sm xs，第一个 * 的内容是 block inline inline-block 。...打印的时候显示 visible-print-* * 的内容有 block inline inline-block 打印的时候隐藏（不显示） hidden-print 示例代码如下： <div class

2.3K5 0

AdminLTE Button小结

.btn-block 块状显示设置后，显示按钮时，占据全部空间；不设置时，按钮的大小由其内容决定，可与其他类叠加使用。 .btn-flat 显示按钮边角为直角，可与其他类叠加使用。...按钮组中各个按钮垂直显示，直角，内容为图标。...--.sr-only是除了屏幕阅读器外，其他设备上隐藏该元素，这个是用于屏幕阅读器的，帮助残障人士更好的访问网站。...，添加后，下拉按钮显示为圆角，与“提示用按钮”配合，样式更加协调 data-toggle=”dropdown” 必须设置，点击后，出下拉菜单的效果 class=”caret” 使下拉按钮中的span显示为...--注意与上例中“下拉按钮组”的区别，这里用一个button显示了文字及下拉图标，而“下拉按钮组”中使用了两个button--> <button type="button" class=

1.2K4 0

03_Bootstrap基础组件03

为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。...8.1 基础按钮 Bootstrap 中可作为按钮使用的标签或元素。...为 a、button 或 input 元素添加按钮类 .btn 即可使用 Bootstrap 提供的样式。...，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。....img-rounded /*圆角*/ .img-circle /* 圆 */ .img-thumbnail /*双线*/ 10 响应式工具通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容

350 0

bootstrap-suggest插件

： 1.5.3 Controller层：配置参数如下: 使用bootstrap-suggest时的bug解决方案: 一、bootstrap-suggest 这是一个基于 bootstrap 按钮式下拉菜单组件的搜索建议插件...2、onSetSelectValue：当从下拉菜单选取值时触发，并传回设置的数据到第二个参数 3、onUnsetSelectValue：当设置了 idField，且自由输入内容时触发（与背景警告色显示同步...） 4、onShowDropdown：下拉菜单显示时触发 5、onHideDropdown：下拉菜单隐藏式触发 1.5 完整代码实现： 1、引入 jQuery、bootstrap.min.css、bootstrap.min.js...2、引入插件js: bootstrap-suggest.min.js 1.5.1 前端关键代码：油井编号(插件测试...', // ajax 搜索时显示的提示内容，当搜索时间较长时给出正在搜索的提示 hideOnSelect: false, // 鼠标从列表单击选择了值时，是否隐藏选择列表

11K4 0

Bootstrap基础学习笔记

、lg:屏幕>=960px、xl:屏幕>=1200px .offset-{1到11} 在所有屏幕下的列偏移 .offset-{sm|md|lg|xl}-{1到11} 在指定屏幕下的列偏移【显示隐藏】....d-none 在较小屏幕下隐藏 .d-{sm | md | lg | xl}-none 在指定屏幕大小下隐藏 .d-block 在较小屏幕下显示 .d-{sm | md | lg | xl}-block...| dark | light } 按钮边框样式按钮大小 .btn-block 块级按钮 .btn-lg 大号按钮 .btn-sm 小号按钮按钮组 .btn-group 水平按钮组 .btn-group-vertical...垂直按钮组按钮组大小 .btn-group-lg 大号按钮组 .btn-group-sm 小号按钮组菜单触发样式 .dropdown-toggle 下拉基类，定义一个触发下拉的元素。...padding-left与padding-right同时设置 .py-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-top与padding-bottom同时设置【折叠】可以很容易的实现内容的显示与隐藏

4.9K3 1

Bootstrap学习笔记上（带源码）

☑ 自定义JQuery插件，完整的类库，基于Less等。 bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。...：<code> 　　②、使用来显示多行块代码　　③、使用来显示用户输入代码：比如ctrl+x第一个按钮和最后一个按钮（下拉按钮除外），其他的按钮都取消圆角效果 3、第一个按钮只留左上角和左下角是圆角 4、最后一个按钮只留右上角和右下角是圆角对应的源码如下： .btn-group...（按钮工具栏）类名btn-toolbar .btn-group-lg:大按钮组 .btn-group-sm:小按钮组 .btn-group-xs:超小按钮组按钮下拉菜单从外观上看和下拉菜单效果基本上是一样的；简单点说就是点击一个按钮，会显示隐藏的下拉菜单 <button class="btn btn-default

3.8K2 0

Web前端之移动端课程开发之06.bootstrap

）框架 Bootstrap的特性响应式设计 (css媒体查询一套样式实现各个终端尺寸适配) pc 平板手机端栅格布局完整的类库 jQuery插件不同的使用场景移动设备优先...前端开发过程中遇到的问题重复复杂无意义的命令结构冗余胡乱嵌套页面错乱 Bootstrap全局样式的特点代码整洁风格统一美观易用通过class设置样式排版标题 h1...的图片 --形状圆角 .img-rounded 圆形 .img-circle 带有边框的圆角图形 .img-thumbnail 文本颜色 .text-primary .text-success ....} bootstrap内部实现了 css媒体查询（Media Query）来实现响应式布局（随着屏幕的尺寸变化而变化 rem 响应式布局的方式）一套栅格布局（ 12份划分） bootstrap...的字体图标基本使用下拉菜单控件组 .input-group 表示控件组 .input-group-addon 添加控件组的图标分页 .pagination ,pagination-lg/sm

821 0

jupyter扩展插件Nbextensions使用

练习——将一组细胞定义为“解决方案”。然后，可以通过单击一个单元小部件来隐藏/显示这些解决方案单元。...通过选中两个cell 然后按工具栏上的博士帽按钮使其成为一个solution，在第一个cell上会出现加号的小图标，通过点击Exercise2的标签来控制solution的显示与隐藏。 ?...Usage Exercise 这里我们实验的是Exercise插件，我们先选中第一个cell1使用Shit+J按钮选中下两个cells.使用Alt+s这是三个cell合并到一起。...当这个扩展被加载时，对话框中的每一个快捷方式都会显示一个小的下拉菜单，其中有删除或编辑快捷方式的条目. ? 单击edit item将打开第二个模式对话框，其中有一个文本输入。...当输入有焦点时，你可以按下键来形成你的组合。重置按钮(左边的卷发箭头)允许您清除您可能输入的任何键。 ? 如果你想禁用现有的快捷方式，你可以点击下拉菜单上的“禁用”按钮。

2.9K4 0

简易登录页面实现

该函数的作用是切换显示不同的登录选项内容，并给当前选中的按钮添加active类，同时移除其他按钮的active类。...这些按钮有一个共同的.tablinks类，其中一个按钮默认具有active类。通过点击这些按钮，可以切换显示不同的登录选项。...这些表单在初始状态下都是隐藏的，通过JavaScript函数openTab()来控制显示和隐藏。...每个登录选项的表单都包含一个输入用户名的文本框和一个输入密码的密码框，以及一个"Login"按钮。文本框和密码框都有一个required属性，表示必填项。...该函数被每个登录选项的按钮的onclick事件调用。函数的作用是切换显示不同的登录选项内容，并给当前选中的按钮添加active类，同时移除其他按钮的active类。

2453 0

Bootstrap响应式前端框架笔记八——按钮组

Bootstrap响应式前端框架笔记八——按钮组在Bootstrap定义的Css样式中，开发者可以将一组btn控件包裹在btn-group类中使其组合成按钮组控件，组合后的控件左右两侧的按钮将被圆角处理...，示例代码如下：正常的按钮组左按钮...按钮组也可以进行嵌套，使用按钮组嵌套的方式也可以实现下拉菜单效果，示例如下：左按钮...默认的按钮组是水平排列的，为其设置btn-group-vertical类可以将其设置为竖直排列的，示例如下：竖直排列的按钮组显示效果，在如下地址中，需要的可以自行对照学习。 http://zyhshao.github.io/bootStrapDemo/buttonGroup.html。

1.6K2 0

Jump Start Bootstrap 第3章

让我们开始创建第一个导航组件： Navs Navs是一组排成一行用来导航的链接；我们把这组链接呈现成标签或者按钮，在Bootstrap中,它们被称为pills。...尝试将浏览器窗口缩小的一个较小的尺寸，你将看见这个导航条显示了隐藏按钮，如图所示。 ?...您还可以尝试调整浏览器的大小，并使用隐藏的按钮来显示屏幕较小的菜单。您应该有类似图的内容。 ? 惊讶吗？您不需要编写一行CSS或JavaScript代码，已经创建了一个可响应的导航栏。...这里有一些按钮可以用的帮助类： btn-block：按钮跨域整行所有的网格 active：按钮显示成被点击的状态 disabled：按钮不可用，并显示成褪色状态；你要小心使用这个类，因为它将防止在输入和按钮元素上单击动作...水平表单在之前的表单中，我们在顶部和输入字段中显示了一个标签。假设我们要将标签显示在输入字段的一侧。

13.9K2 0

BootStrap应用开发学习入门1

需要对按钮做什么 # 第二个是 data-target，指示要切换到哪一个元素 # 第三个是带有 class .icon-bar 的创建所谓的汉堡按钮 .collapse #div...站点引用 Bootstrap 插件的方式有两种：单独引用：使用 Bootstrap 的个别的 *.js 文件。一些插件和 CSS 组件依赖于其他插件。...如果提供的是一个数字，那么延迟将会应用于显示和隐藏。...如果提供的是一个数字，那么延迟将会应用于显示和隐藏。... 选项 3 //按钮插件学习定时完成后显示下载完成

44.8K2 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭