在Bootstrap中将按钮放入正在折叠的卡中
在Bootstrap中，将按钮放入正在折叠的卡中可以通过以下步骤完成：
- 首先，使用Bootstrap提供的折叠组件，创建一个可折叠的卡片。可以使用
<div>元素来创建一个卡片容器，并添加card类。
<div class="card">
...
</div>- 在卡片容器中，添加一个卡片头部。可以使用
<div>元素和card-header类来创建一个卡片头部。
<div class="card">
<div class="card-header">
...
</div>
...
</div>- 在卡片头部中，添加一个触发折叠的按钮。可以使用
<button>元素和btn类来创建一个按钮。
<div class="card">
<div class="card-header">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseExample">
折叠按钮
</button>
</h2>
</div>
...
</div>- 在卡片容器中，添加一个可折叠的内容区域。可以使用
<div>元素和collapse类来创建一个可折叠的区域。将其与按钮的data-target属性值对应起来，以实现按钮与内容的关联。
<div class="card">
<div class="card-header">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseExample">
折叠按钮
</button>
</h2>
</div>
<div id="collapseExample" class="collapse">
<div class="card-body">
折叠内容
</div>
</div>
</div>通过以上步骤，就可以将按钮放入正在折叠的卡中。用户点击折叠按钮时，相关内容将展开或收起。
在腾讯云的云计算服务中，可以使用腾讯云的云服务器（CVM）来搭建和部署支持Bootstrap的网站。同时，腾讯云还提供了云数据库MySQL版（TencentDB for MySQL）用于存储网站的数据。如果需要使用云原生技术，可以使用腾讯云的容器服务（Tencent Kubernetes Engine）来部署和管理容器化的应用程序。另外，腾讯云还提供了丰富的网络安全产品和解决方案，例如DDoS防护、Web应用防火墙（WAF）等，来保护网站的安全。
更多关于腾讯云产品的介绍和详细信息，可以访问腾讯云官方网站：腾讯云-产品与服务。
相关·内容
我正在尝试将一个按钮放在折叠中(手风琴的一部分)，当单击时将转到新页面。但现在，当我尝试单击该按钮时，它只是关闭了折叠。 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" /ajax.go
浏览 37提问于2020-05-02得票数 0
2回答
我正在使用bootstrap创建一个可以在单击时扩展的卡。对于这一点，我使用的是折叠。但是当我使用折叠时，按钮保持不动，而我希望它移动到卡片的底部。底部的图片也应该很清楚地说明我正在尝试做什么。单击折叠时如何向下移动按钮？我必须使用Javascript吗？感谢你阅读这篇文章 <link href="https://stackpath.bootstrapcdn.com/
浏览 10提问于2020-01-24得票数 0
回答已采纳
我在我的角度9应用程序中使用ngb-bootstrap折叠控制。我已将ngb-bootstrap折叠控件放置在引导卡中，如您所见，将生成多个卡，并且我已经将卡头上的折叠按钮与该特定卡的卡体链接起来，因此当单击按钮时，该卡只会折叠，而不是整个卡集。但我面临的问题是，当我点击按钮时，整个卡集就会被折叠
<div class="anim
浏览 4提问于2020-03-17得票数 0
回答已采纳
3回答
尝试开始学习Bootstrap。我创建了一些代码来创建响应式菜单，如下所示 <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="CSS/bootstrap.css">
<meta name=
浏览 4提问于2013-12-12得票数 3
回答已采纳
2回答
我正在围绕twitter上的bootstrap构建一个网站；我在分区框上使用bootstrap折叠。默认情况下，此框不会折叠，但如果用户按下按钮并折叠此框，即使在页面刷新之后，我也希望此信息存储在客户端的某种缓存中。
假设用户折叠它们，明天返回；然后它们仍然会折叠，直到用户再次按下按钮。不过，这里有一份来自jsfiddle上的bootst
浏览 1提问于2012-08-06得票数 2
我正在使用Twitter Bootstrap附带的树折叠来构建我的菜单。我遇到的问题是，我希望默认情况下所有菜单列表都是折叠的，除了我们当前所在的那个。下面是该菜单的一个示例：
例如，如果用户当前在Bootstrap --> Buttons -> Colors页面上，则除Bootstrap --> Buttons -> Colors之外的所有顶级菜单都应折叠，按钮下的窗体也应折叠。
浏览 5提问于2013-08-12得票数 1
我正在使用knockout和Sammy为我的路由和导航构建SPA。我在使用MVVM模型时尽量保持清晰，因为我希望所有操作都绑定到我的VM中。我正在尝试弄清楚如何在该模式中使用Bootstrap响应导航栏。我知道如何让Bootstrap nav使用切换按钮和导航栏-折叠，但我觉得为了对称，我应该在我的VM中这样做。唯一的问题是，我不确定如何根据bootstrap使用的媒体查询进行数据绑定，以切换导航栏切换按钮<
浏览 0提问于2014-09-29得票数 0
正如标题中所述，当我单击导航栏按钮时，导航栏不会折叠，但会保持打开状态。 之前我遇到了数据切换的问题，你必须在bootstrap 5中进行数据切换，我解决了这个问题。当我在devTools中检查<div class ="collapse navbar-collapse" id="navbar">时，它在单击时更改为<div class ="navbar-collapse当我单击按钮折叠
浏览 62提问于2021-03-16得票数 1
回答已采纳
+Siliguri|Mukta" rel="stylesheet"> <link rel="stylesheet" href="https://
浏览 10提问于2019-05-12得票数 0
回答已采纳
我在Rails 3.1.2项目中使用Twitter 2.0.1，该项目是用引导-sass实现的。我正在同时加载bootstrap.css和bootstrap-responsive.css文件，以及bootstrap-collapse.js Javascript。它工作得很好:如果页面比大约940 to窄，那么导航条就会折叠并显示一个“按钮”，我可以点击这个按钮来展开。不过，我的肚脐看起来很好，大约550 to宽，也就是说，除非屏幕非常窄，否则它不需要<
浏览 16提问于2012-02-23得票数 94
回答已采纳
1回答
显示适配卡的上部
、、
在我的表单末尾(我将使用自适应卡，而不是单词自适应卡)，有一个提交按钮，当所有字段填写完毕时，用户都可以点击。虽然一切都按照我想要的方式工作，但从某种意义上说，用户在显示表单后看到的是表单的底部，这对用户来说并不是真正的用户友好。用户必须滚动一点才能看到表单的第一部分。这在bot框架中是可能的吗？ 例如，如果机器人发送连续的消息，框架是否允许首先显示第一个消息，然后显示最后一部分。谢谢! PS。如何使第一个框架在第二个图像中的末尾部分之前显示第一个图像。
浏览 12提问于2020-01-29得票数 0
1回答
我正在使用Angular 1.2和bootstrap 3.x，并且我正在尝试使用angular-bootstrap插件来折叠DIV。我有一个带有搜索栏的表单，它使用我的自定义$resource服务从控制器中的服务器检索特定数据： $scope.results= Search.query(query);在使用下面这段代码检索结果后，我想对结果进行解压：
<div co
浏览 0提问于2014-07-02得票数 1
我正在尝试构建一个UI，它将一个HTML单选按钮列表与Bootstrap的collapse组件提供的折叠功能结合起来。这样做的目的是选择任何单选按钮也会在其正下方展开一个折叠面板。不幸的是，尽管折叠功能起作用了，但单选按钮没有被选中(除了最初的选择之外，它随后永远不会改变)。
请原谅我的示例中的无效HTML。我知道input元素没有href属性，但我不认为这是问题的原因。我已经看到了类似问题的，但我更倾向于避免编辑Bootst
浏览 0提问于2013-08-08得票数 3
回答已采纳
我正在使用Bootstrap-vue，并且有一个简单的折叠组件，这样我就可以切换内容的可见性。我正在寻找一种方法，在切换按钮中包含一个指示折叠状态的箭头图标:如果内容打开，箭头指向下方，如果关闭，箭头指向侧面。
我已经看过了这里的解决方案。然而，虽然这适用于Bootstrap 4，但我无法使其与Bootstrap-vue一起使用，因为标记元素是不同的。那么，根据下面的标记，我如何实现折叠状态箭头？
浏览 3提问于2019-02-07得票数 13
回答已采纳
5回答
我有一个按钮，打开一个面板，我想能够关闭它，就像我会用警报。引导文档中的默认面板示例 <div class="panel-heading">Panel heading without title</div> Panel content</div>
浏览 4提问于2014-08-18得票数 13
回答已采纳
我想知道如何将bootstrap 4集成到我的vue.js 2.6中。我知道有很多教程，但它们要么都是2020年底的obsolete，要么就是require使用bootstrap-vue，它把一大堆垃圾标签带到了我讨厌的表格中。因此，如果您能提供一个与vanilla bootstrap 4集成的完整示例，我将不胜感激。
浏览 23提问于2020-11-27得票数 0
回答已采纳
1回答
我在一个别人创建的bootstrap/wordpress站点上工作。我正在做的更改是在一个客户预订页面，其中有一个手风琴表单放入用户详细信息后，他们已经选择了产品信息。我所做的更改意味着现在有两个按钮email和call。当用户单击其中任何一个时，验证脚本将在产品信息上运行，然后将打开联系人详细信息折叠窗口。如果选择了email按钮，然后选择了call按钮，则表单需要保持打开状态，只有关闭才是相同的(活动)按钮</e
浏览 0提问于2015-10-18得票数 0
我正在尝试样式折叠，切换它点击，并期望有一个切换类时，崩溃是显示的。但是bootstrap4中的实际逻辑，例如：
首先单击，折叠将显示，按钮类名不会更改。再次单击，一个新的类名col
浏览 0提问于2018-05-22得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
