twitter-bootstrap 相关问题

如何使用 JavaScript 关闭 Bootstrap Collapse？

我希望能够使用javasript关闭或打开折叠。有什么想法吗？ 可折叠 ... 我希望能够使用 javasript 关闭或打开折叠。有什么想法吗？ <button data-toggle="collapse" data-target="#demo">Collapsible</button> <div id="demo" class="collapse"> <!--Something else here--> </div> $("element-selector").collapse('hide') $("element-selector").collapse('toggle') $("element-selector").collapse('show') https://getbootstrap.com/docs/4.0/components/collapse/#methods <div id="searchBar" data-toggle="collapse" data-target="#filters"> Search </div> <div id="filters" class="collapse row"> Hello </div> document.getElementById("searchBar").classList.toggle("collapsed"); document.getElementById("filters").classList.remove("in"); 如果有人需要 Bootstrap 5 的答案，这是一些样板代码： import { Collapse } from 'bootstrap'; const target = document.getElementById('target'); //the element that referenced in data-bs-target const targetCollapseInstance = new Collapse(target, {toggle: false}); const closeButton = document.getElementById('closeButton'); closeButton.addEventListener('click', () => { targetCollapseInstance.hide(); })

禁用 Bootstrap 中的链接

第一个示例不起作用。我需要始终有一个列表来禁用链接？或者我的第一个演示有什么问题？ 链接已失效 第一个例子不起作用。我需要始终有一个列表来禁用链接？或者我的第一个演示有什么问题？ <a class="disabled" href="#">Disabled link</a> <ul class="nav nav-pills"> ... <li role="presentation" class="disabled"><a href="#">Disabled link</a></li> ... </ul> https://jsfiddle.net/7y0u2amy/ 我认为你需要 btn 课程。 会是这样的： <a class="btn disabled" href="#">Disabled link</a> Bootstrap 似乎不支持禁用链接。您可以自己添加一个类并向其添加一些样式，而不是尝试添加 Bootstrap 类，就像这样： a.disabled { /* Make the disabled links grayish*/ color: gray; /* And disable the pointer events */ pointer-events: none; } <!-- Make the disabled links unfocusable as well --> <a href="#" class="disabled" tabindex="-1">Link to disable</a><br/> <a href="#">Non-disabled Link</a> 我刚刚使用 CSS 创建了自己的版本。因为我需要禁用，然后当文档准备好时使用 jQuery 激活。这样，在文档准备好之前，用户无法单击按钮。所以我可以用 AJAX 代替。我想出的方法是向锚标记本身添加一个类，并在文档准备好时删除该类。可以根据您的需要重新调整它的用途。 CSS： a.disabled{ pointer-events: none; cursor: default; } HTML： <a class="btn btn-info disabled">Link Text</a> JS： $(function(){ $('a.disabled').on('click',function(event){ event.preventDefault(); }).removeClass('disabled'); }); 如果您想要禁用链接，则没有选项可以执行此操作。我想你可以在这里找到适合你这个问题的答案。 这里的一个选择是使用 <a href="/" onclick="return false;">123n</a> 禁用href标签 您不能仅将链接设置为“禁用”输入、文本字段等系统元素。 但是您可以使用 jQuery/JavaScript 禁用链接 $('.disabled').click(function(e){ e.preventDefault(); }); 只要将上面的代码包装在您想要禁用链接的任何事件中即可。 使用 class="pe-none"。 找到引导程序链接这里。 <a class="btn btn-outline-primary pe-none" target="_blank" href="#" role="button">Open</a> 我刚刚从我想要禁用的锚标记中删除了“href”属性 $('#idOfAnchorTag').removeAttr('href'); $('#idOfAnchorTag').attr('class', $('#idOfAnchorTag').attr('class')+ ' disabled'); 感谢@jacob-van-lingen的评论，您可以在您的全局样式中扩展.btn-link a.disabled{ @extend .btn-link } 我开发了以下解决方案，因为当我将 Bootstrap 5 提供的 btn disabled 等类样式应用于卡片内的 <a> 元素时，边距和填充将应用于该元素： .disabled { color: currentColor; cursor: not-allowed; opacity: 0.5; text-decoration: none; } <a href="#" class="disabled">Disabled Link</a> 我喜欢 Sercan 的答案，我在其中添加了一个小 jQuery，这样点击时链接也不会被跟随： $(document) .on("click", "a.disabled", function () { return false; }); 从上面的答案来看： .disabled { color: currentColor; cursor: not-allowed; opacity: 0.5; text-decoration: none; } 更改为然后就可以禁用它了。 html： 文字 js： $("#myId").prop("已禁用",true);

如何根据模态选择更新输入

我目前正在使用 Laravel 框架。我发送了一位用户有关事件的所有记录，但如果该用户有多个事件记录，那么他需要选择他想要的事件

如何自定义猫头鹰轮播滑块

我已将猫头鹰旋转木马 2（最新更新）添加到我的主题中。 我已成功添加轮播。 但是，我无法控制自定义它。 我尝试过编辑 owl-carousel.js ...

如何在按钮单击后重置 Bootstrap-select 的值

我正在使用 Bootstrap-select 插件（https://silviomoreto.github.io/bootstrap-select/）作为我的下拉选择框。单击按钮后，我希望刷新该框并重置“选定”选项。

如何在提交时重新加载页面

我有一个包含表单的 Bootstrap Modal。该模式还包含一个提交和取消按钮。取消按钮工作正常，并且正在成功关闭模态框。现在根据我的要求...

将 gwt-bootstrap 模式与 gwt-platform 一起使用的正确方法是什么？

我正在使用 GWT-Platform 和 GWT-Bootstrap 框架使用 Google Web Toolkit 构建一个 Web 应用程序。大多数情况下，在我尝试实现弹出窗口之前，它几乎是完美的。这些框架的不足...

如何在 .NET 8 Blazor 中打开 Bootstrap Intellisense

我可能弄错了，但看起来 .NET 8 Blazor 不支持开箱即用的 Bootstrap IntelliSense。真是超级烦人。有人知道有什么技巧可以打开它吗？ 感谢您！ 我检查了依赖性...

引导侧导航栏不会在链接单击时折叠

我正在尝试为朋友建立一个网站。我不太擅长编码，因为我已经很长时间没有搞乱它了。我正在为这个项目使用引导程序。我想不通...

Bootstrap 模式中的表单

我有一个进行产品注册的模式。我想在模式内提交表单而不离开模式。 我有一个用于注册产品的modal。我想在模式内提交表单而不离开模式。 <!-- Button to trigger modal --> <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> <!-- Modal --> <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body"> <form method="post"> <button type="submit">Submit</button> </form> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Save changes</button> </div> </div> 就我而言，我只将提交按钮放在页脚正文中 并删除数据关闭 IE： <div class="modal-content"> <form id="role-form" method="get"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">تعديل صلاحيات المدير - {{$user->username}}</h4> </div> <div class="modal-body"> <div class="form-group col-md-12"> <select id="role" name="role" class="form-control"> <option selected disabled>الصلاحية</option> <option value='1'>مدير</option> <option value='2'>مشرف</option> </select> </div> <div class="clearfix"></div> </div> <div class="modal-footer"> <button type="submit" class="btn btn-success" >حفظ</button> <button type="button" class="btn btn-default" data-dismiss="modal">إلغاء</button> </div> </form> </div> 首先，在您的 <form> 标签上设置一个 id： <form id="myForm" method="post"> ... </form> 如果您使用 jQuery（强烈推荐），您可以这样做： $(function(){ $('#myForm').on('submit', function(e){ e.preventDefault(); $.post('http://www.somewhere.com/path/to/post', $('#myForm').serialize(), function(data, status, xhr){ // do something here with response; }); }); }); 你也可以这样做： 向表单添加 Id <form method="post" id="myForm"> <button type="submit">Submit</button> </form> 在按钮中添加表单引用 <button type="submit" form="myForm" class="btn btn-primary">Save changes</button>

修改Bootstrap 5模型内容，关闭并重新打开

我有一个使用 Bootstrap 5 框架的模式。 我将其中包含的表单发布到 JQuery ajax 调用，然后根据 JQuery AJax 调用的结果修改模式内容，然后...

col 类的引导问题

我正在尝试编写一个网站，但我对 col 类有问题，无论我使用什么，它都会占用我所有的屏幕宽度 col-md-4 或 col-md-6 或 col-md-3 我不知道如果问题出在我的屏幕分辨率上...

Bootstrap：在列之间添加间距

我是引导程序的新手，正在尝试弄清楚如何在容器流体中的第二行流体中的盒子之间放置间距。我正在尝试使用 class="col-lg-4 col-md-6 item col-xs-12" 所以我...

如何启动 Django 登录表单

我正在用 Django 编写一个图书馆管理系统以满足我自己的个人需求。我有后端经验，但缺乏前端专业知识。该项目利用了 Boostrap 4 和 Django 的脆...

Twitter bootstrap typeahead - 获取值和 id

我正在尝试从此数据集中获取值和 id。 获取一件事很容易，但我不知道如何获取第二信息？ 重要的是要知道，在我的网站中可以是动态的

我可以将 Bootstrap 的 Accordion 或 Alert 样式应用到 HTML 详细信息和摘要元素吗？

我的项目使用 Bootstrap，大多数时候没有任何 Javascript，因为我只需要样式。现在我有一个项目需要像他们的手风琴这样的东西，需要 Javascript 才能工作。

引导页脚未粘在页面底部

我目前正在处理一些设计和前端问题，我并不是真正的定位和其他类似元素的前端专家。所以现在我已经在我的中构建了一些设计 我目前正在处理一些设计和前端问题，我并不是真正的定位和其他类似元素的前端专家。所以现在我已经在我的<div class="container"></div>中构建了一些设计，基本上，我的页脚靠近我的最后一个元素，现在在中间。我尝试使用 <br> 但这不是我想要的...我怎样才能将它设置在页面底部？谢谢！ 我的代码： <footer class="page-footer font-small bg-dark pt-5"> <!-- Footer Elements --> <div class="container"> <!-- Social buttons --> <ul class="list-unstyled list-inline text-center"> <li class="list-inline-item"> <a class="btn-floating btn-fb mx-1" href="https://www.facebook.com/UAB-Interkodas-1882309422025359/"> <img alt="fb" width="30" src="{% static '/main/svgs/facebook.svg' %}"> </a> </li> <li class="list-inline-item"> <a class="btn-floating btn-tw mx-1"> <img alt="linkedin" width="30" src="{% static '/main/svgs/linkedin.svg' %}"> </a> </li> <li class="list-inline-item"> <a class="btn-floating btn-gplus mx-1"> <img alt="google_plus" width="30" src="{% static '/main/svgs/google-plus.svg' %}"> </a> </li> <li class="list-inline-item"> <a class="btn-floating btn-li mx-1"> <img alt="google_maps" width="30" src="{% static '/main/svgs/google-maps.svg' %}"> </a> </li> </ul> <!-- Social buttons --> </div> <!-- Footer Elements --> <!-- Copyright --> <div class="footer-copyright text-center text-light py-3">© 2020 Copyright: All rights reserved. </div> <!-- Copyright --> </footer> <!-- Footer --> 这是照片： 不要在页脚中使用 fixed-bottom 类，而是尝试这个。 您可能需要稍微调整一下值，而不是使用 160px。 html { position: relative; min-height: 100%; padding-bottom:160px; } body { margin-bottom: 160px; } footer { position: absolute; bottom: 0; width: 100%; height: 160px; } 尝试添加 fixed-bottom 类： <footer class="page-footer fixed-bottom font-small bg-dark pt-5"> 注意：无论您有多少内容，这都会使页脚粘在浏览器窗口的底部。 因此，当用户上下滚动时，他们将始终在屏幕上看到页脚。 您还需要更改 <html> 和 <body> <!doctype html> <html lang="en" class="h-100"> <head> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> </head> <body class="d-flex flex-column h-100"> <footer class="footer mt-auto py-3 bg-primary"> </footer> </body> </html> 这是一篇旧帖子。也许会对某人有所帮助。 body { display: flex; flex-flow: column; min-height: 100vh; margin: 0; padding: 0; } main { flex: 1; } .footer { width: 100%; }

使 Flexbox 表格布局与内容对齐

我正在尝试使用 Flexbox 创建一个简单的表格布局（以便表格能够正确响应）。我这样做（你需要反应和引导）： 导出函数 UITest(){ 常量数据...

打开 Bootstrap 模式弹出窗口时启用背景

我在我的项目中使用了 Bootstrap 的模式弹出窗口，并且想要以下内容： 当打开模式弹出窗口并单击背景弹出窗口时不应关闭。 当打开模态弹出背景时不应该...

如何在 Blazor 项目中设置深色主题

如何在 Blazor 项目中将深色主题设置为默认主题。当您进入应用程序时，不要切换事物，已经有深色主题。 我浏览了一些文件，例如来自 wwwroot 和 boo 的 app.css...