Bootstrap是一个前端框架，旨在启动Web应用程序和站点的开发。有关Bootstrap版本的问题，请使用“twitter-bootstrap-2”，“twitter-bootstrap-3”和“bootstrap-4”标签中的特定版本标签。
我试图在页面上初始化多个工具提示，包括 Blazer 组件中的工具提示，但没有任何效果，也没有错误。 这对我不起作用： var tooltipTriggerList = [].slice.
我想在一些ajax东西运行时在我的屏幕上放置一个覆盖层。 构建我自己的覆盖 div 并不是什么大问题，但是，由于我已经在使用 Bootstrap，我想我也可以使用它的 .m...
Asp.net、Bootstrap 工具提示和 Blazor 组件
我试图在页面上初始化多个工具提示，包括 Blazer 组件中的工具提示，但没有任何效果，也没有错误。 这对我不起作用： var tooltipTriggerList = [].slice.
为什么这个 Bootstrap 手风琴示例无法在我的页面上运行？
我是 Twitter Bootstrap 的新手，在尝试实现手风琴时遇到一些问题，如官方文档示例所示：http://getbootstrap.com/javascript/#collapse-example-
当我在此 Twitter BootStrap 页面中展开手风琴内容时，为什么页脚会出现在手风琴内容上？
我是 Twitter Bootstrap 的新手，遇到以下问题。 您可以在此 JSFiddle 中看到问题：https://jsfiddle.net/AndreaNobili/uso4f4xk/ 正如你所看到的，我有一个手风琴和一个
我有日期时间选择器，问题是页面中没有图标出现。但是，如果我从本地 bootstrap.css 禁用行（注释掉），然后添加来自 http://cdnjs.cloudflare.com/aja 的超链接 bootstrap.css...
因此在这个网站上工作时遇到了移动视图页面右侧空白的问题。我已经看过一切，但似乎仍然无法摆脱它。 我删除了每个部分...
Twitter Bootstrap 5 选项卡：转到页面重新加载或超链接上的特定选项卡
如何像以前的引导方法一样直接链接到引导程序 5 选项卡？： Twitter Bootstrap 选项卡：转到页面重新加载或超链接上的特定选项卡 我尝试过以下应用程序...
当我尝试对我的文件进行 git 提交时，我在终端上收到此错误，我不知道如何解决此问题
PS D:\Bootstrap
如何触发bootstrap toast？其他则为按钮 type="button"，或 fetch()
是否有一个简单的其他解决方案来触发我的 boostrap toast ？ 也许像： 按钮 onclick =“以简单的方式触发我的引导程序吐司” 无需获取或按钮 type="bu...
我尝试过查看以前的解决方案，但没有一个有效。 我试图在单击输入字段后在左侧显示一个弹出窗口。 HTML： 我尝试过查看以前的解决方案，但没有一个有效。 我试图在单击输入字段后在左侧显示一个弹出窗口。 HTML： <input id="name" type="text" placeholder="Type your full name" rel="popover"> JS： <script type="text/javascript"> $('#name').popover({'title': 'Name tooltip'}); </script> 如果您在初始化弹出窗口时使用placement:left，它应该可以工作。您的弹出窗口根本不起作用，还是只是不在左侧？ 还有，不要忘记文件。准备好.. $(document).ready(function() { $('#name').popover({title:'Name tooltip',placement:'left'}); }); qTip 很好！版本 2 已发布：http://craigsworks.com/projects/qtip2/ 试试这个 <script type="text/javascript"> $("#name").popover({title: "Name tooltip"}); </script> 我的愚蠢错误。我没有从正确的目录加载 JavaScript 文件。
如何从 boostrap 容器流体类及其行中删除所有边距？ .container-fluid { 填充：0;} 这基本上满足了我的要求，但它为正文增加了 20px 溢出。那么我应该...
无法使用 Yii bootstrap 小部件 TbGridView 添加删除确认 ajax 弹出窗口
我正在尝试使用ajax添加删除确认弹出窗口，标准的Yii GridView弹出窗口； 我使用 Yii Bootstrap 链接 尝试了很多方法，似乎都不起作用； 我还需要写代码吗...
我的页面上有一个下拉菜单，manager.php，在这里。 抱歉格式化 - bootstrap.： <p>我的页面上有一个下拉菜单，<pre><code>manager.php</code></pre>，在这里。 抱歉格式化 - bootstrap.:</p> <pre><code> <!-- Bootstrap --> <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="../../css/bootstrapstyle.css"> <!-- Bootstrap Dropdown Enhancements--> <script type="text/javascript" src="../../js/dropdowns-enhancement.js"></script> <link rel="stylesheet" href="../../css/dropdowns-enhancement.css"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn dropdown-toggle btn-primary" data-toggle="dropdown" aria-expanded="false">Search By <span class="caret"></span></button> <ul id="searchBy" class="dropdown-menu" role="menu"> <li class="disabled"><a href="#">Search By...</a></li> <li><a href="#">cost</a></li> <li><a href="#">name</a></li> </ul> </div> </div> </div> </div> <div id="everything"> </div> </code></pre> <p><strong>当我直接加载<pre><code>manager.php</code></pre>并且下拉列表初始化时，此代码工作正常，但这不是我需要代码工作的方式。 </strong> </p>用户从<p><code>return.php</code><pre>开始；此页面从用户收集大量数据并将其</pre>返回<em>到</em><code>manager.php</code><pre>。</pre> </p>一旦用户选择在 <p><code>return.php</code><pre> 上执行此操作，就会运行此代码：</pre> </p><code>$.ajax({ type: 'POST', url: 'manager.php', data: {number:number, location:location, project:project, comments:comments}, success:function(data){ $('#everything').html(data); } }); </code><pre> </pre>ajax 调用工作正常，并将从 <p><code>manager.php</code><pre> 返回的数据加载到 </pre><code>everything</code><pre> div 中。 它按预期传递数据。 将 </pre><code>manager.php</code><pre> 加载到 DIV 中时唯一不起作用的是下拉菜单。我需要了解我做错了什么导致了这个功能，这样我就可以防止将来这样做。</pre> </p> </question> <answer tick="false" vote="7">页面加载后无法通过添加引导类来初始化引导组件。为此，您必须自己初始化它<p> </p>要初始化下拉列表，请编写以下代码：<p> </p><code>$('.dropdown-toggle').dropdown(); </code><pre> </pre>之后<p> </p><code>$('#everything').html(data); </code><pre> </pre>了解更多详情：<p>http://getbootstrap.com/javascript/#dropdowns<a href="http://getbootstrap.com/javascript/#dropdowns" rel="nofollow noreferrer"></a> </p> </answer> <answer tick="true" vote="6">将数据加载到 everything div 后，您需要手动重置下拉列表。我修改了您的 AJAX 调用，以向您展示在哪里进行调用。<p> </p><code>$.ajax({ type: 'POST', url: 'manager.php', data: {number:number, location:location, project:project, comments:comments}, success:function(data){ $('#everything').html(data); $('#searchBy').dropdown(); } }); </code><pre> </pre>您正在执行的动态加载不会导致 DOM 重新加载，从而强制下拉列表重新初始化。 AJAX 调用完成后，您可以通过调用 <p><code>.dropdown();</code><pre> 手动重置引导下拉列表。</pre> </p><p>编辑<strong></strong> </p>引导程序中的功能通常是使用 <p><code>$( document ).ready()</code><pre> 调用来设置的。该函数在 DOM 加载后并且仅在 DOM 完全加载后执行一次。由于您操作了 DOM，因此不会导致该函数再次被触发，并且您需要手动触发您需要的功能。</pre> </p>您还希望在每个页面上仅加载一次包含内容。他们需要在 manager.php 上，以便在您进入成功方法时该功能可用。我建议您为您的项目使用一个模板，以便您可以在一个地方管理所有包含内容。另外，如果您使用 manager.php 作为要包含在另一个页面中的页面，那么如果您没有对 JavaScript 片段的引用也没关系，因为您不希望用户自己访问该组件。 <p> </p>您正在进行的重新加载似乎强制将内容重新添加到页面，从而强制重新执行包含文件中的 <p><code>$( document ).ready()</code><pre> 调用。你可以这样做，但是效率很低。</pre> </p> </answer> <answer tick="false" vote="1">所以我不确定为什么会这样，但到目前为止是这样：<p> </p>我修改了 ajax 调用以在执行返回之前重新加载 bootstrap 的 .js 文件。<p> </p><code>function reload_js(src) { $('script[src="' + src + '"]').remove(); $('<script>').attr('src', src + '?cachebuster='+ new Date().getTime()).appendTo('head'); } $.ajax({ ... success:function(data){ reload_js('https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'); $('#everything').html(data); } }); </code><pre> </pre>对于赏金，有人可以向我解释一下吗：<p> </p>a.) 为什么我需要强制重新加载<p><code>bootstrap.min.js</code><pre>？</pre> </p>b.）如果我在两个文件的 <p><code><head></code><pre> 部分中都有指向该文件的链接，为什么还需要这样做？</pre> </p><code> <!-- Bootstrap --> <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="../../css/bootstrapstyle.css"> </code><pre> </pre>我也尝试过将其加载到一个中，但没有加载到另一个中（所以我不会加载两次），但这没有任何作用。<p> </p>c.) 为什么这样有效？ 它在做什么？<p> </p> </answer> <answer tick="false" vote="0">页面将第一次加载 DOM。 ajax 只是更新页面的一部分，因此您添加的新元素不会具有您定义的 prop。你需要像以前那样重新启动或做类似的事情<p> </p><p>http://hussain.io/2012/01/reinitializing-jquery-event-on-ajax-response/<a href="http://hussain.io/2012/01/reinitializing-jquery-event-on-ajax-response/" rel="nofollow noreferrer"></a> </p> </answer> <answer tick="false" vote="0">我想分享我的经验：我正在做动态多层下拉菜单，这意味着用户可以自定义这个菜单有多少个父母和孩子。因此，在 ajax 提交后，我清空菜单所在的导航栏 $(document).find('.navbar-nav').empty();<p> </p>并用新的 html 填充它，例如：<p> html.push("<br/> <li class="nav-item dropdown">" + val.PageName + ""); // 它在顶部<a class="nav-link" href="#"> </p>并将其附加到我的导航栏： $(".navbar-nav").append(html.join(''));<p> </p>下拉菜单项在那里，但不起作用。原因是你必须再次加载新 html 项目的所有 js 和 css。<p> </p>这是操作系统静态多层菜单的好示例：<p>https://github.com/kmlpandey77/bootnavbar<a href="https://github.com/kmlpandey77/bootnavbar" rel="nofollow noreferrer"></a> </p>因此，重点是在将新的 html 附加到 DOM 项后，您需要重新加载页面以使其正常工作，或者加载新的 html 项正在使用的资源；<p> </p>这里如何在ajax和append过程之后加载：<p> </p><code> jQuery.ajaxSetup({ async: false }); $.get("wwwroot/bootnavbar/bootnavbar.css") .done(function () { // exists code jQuery.ajaxSetup({ async: true }); }).fail(function () { // not exists code jQuery.ajaxSetup({ async: true }); }); </code><pre> </pre> </answer></body>
我正在开发一个流程，我们使用 Bootstrap 风格的手风琴（不是 jQuery UI 手风琴）。要求是当用户展开手风琴时调用服务。这是 HTML： 我正在开发一个流程，我们使用 Bootstrap 风格的手风琴（不是 jQuery UI 手风琴）。要求是当用户展开手风琴时调用服务。这是 HTML： <div class="accordion-dashboard"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading row-white" data-toggle="collapse" data-parent="#accordion" href="#runtimeValue"> <table> <tr> <td><span class="badge blue">A</span></td> <td><strong>Aenean ultricies est lorem,id feugiat velit euismod ut.Nullam inia.Prasent vel nu Sed ante mauris, eu lacus..</strong></td> <td><i class="icon8 icon-paperclip"></i></td> <td><span class="time">5 mins</span></td> </tr> </table> </div> <div id="runtimeValue" class="panel-collapse collapse "> <div class="panel-body"> <div class="row"> <div class="col-lg-9 col-lg-offset-1"> <table> <tr> <td class="text-muted">By</td> <td><img width="24px" src="images/company-logo.png"> Company Admin</td> </tr> <tr> <td class="text-muted">On</td> <td class="text-muted">Friday- 7 Aug 2014, 9.00PM</td> </tr> <tr> <td><i class="icon8 icon-paperclip"></i></td> <td>dummyfile.pdf</td> </tr> <tr> <td colspan="2"> <h5>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</h5> <p>Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p> </td> </tr> </table> </div> <div class="col-lg-1 pull-right"> <span data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="btn-close icon8"></span> </div> </div> </div> </div> </div> </div> </div> HREF属性和相应的id属性将在运行时决定，我知道它们的模式。一种方法可能是在单击手风琴时绑定事件，但我想将其作为最后的手段。 当用户单击并展开手风琴时，还有其他方法可以调用服务吗？ 您可以使用：- $('#accordion').on('show.bs.collapse', function () { //call a service here }); 根据 Bootstrap 源（诚然，对于最新版本，3.3.0），一旦转换完成，应该会发出 shown.bs.collapse 事件。你可以加入其中。 编辑（2024 年 7 月）：该事件仍然存在于源中。您可以在此处看到它发出并且在上面定义了几行，具有相同的名称，因此该事件应该仍然可以安全使用。 您可以查看：http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-accordion.php。这肯定会有帮助。 show.bs.collapse 当调用 show 实例方法时，此事件立即触发。 您可以使用此代码触发该函数并获取打开的手风琴的相应 id。 jQuery(document).on('show.bs.collapse','#your-accordion',function (e){ var clicked = $(document).find("[href='#" + $(e.target).attr('id') + "']"); // Your awesome code });
我使用此代码使 Bootstrap 3.4.1 模态不可关闭——不允许用户在模态之外单击或使用 Esc 关闭它，同时仍然允许正常的 .modal("hide" )...
Bootstrap 中未显示下拉菜单Bootstrap 101 模板
我正在尝试在 Bootstrap 中获取基本的下拉菜单： Bootstrap 101 模板 我正在尝试在 Bootstrap 中获取 一个基本的下拉菜单： <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="js/bootstrap.min.js"></script> <div class="dropdown"> <!-- Link or button to toggle dropdown --> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Separated link</a></li> </ul> </div> </body> </html> 但是，什么也没有出现。我知道本地 CSS 和 JS 文件被正确引用。据我了解，默认的JS包含了所有的插件。 编辑：感谢大家的反馈。我只能补充一点，如果人们发现自己处于与我相同的情况，请在复制和粘贴片段之前在教程中进一步向下移动。 我认为您的代码基本上很好，但您缺少触发下拉菜单的链接。请参阅 jsFiddle 请注意，我添加了 <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 这是如何将其包含在完整导航栏中的示例 祝你好运！ 请特别注意代码中的注释<-- Link or button to toggle dropdown -->。您需要放置一个带有 data-toggle="dropdown" 属性的链接或按钮来激活下拉菜单。 试试这个： <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="dropdown"> <!-- Link or button to toggle dropdown --> <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#"> <i class="icon-user"></i> TestDropdown <span class="caret"></span> </a> <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#"> <i class="icon-user"></i> TestDropdown <span class="caret"></span> </a> <a class="btn btn-default" data-toggle="dropdown"> Dropdown Test </a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Separated link</a></li> </ul> </div> 来自文档： 仅查看下拉菜单，这是所需的 HTML。您需要将下拉菜单的触发器和下拉菜单包装在 .dropdown 中，或声明position:relative; 的另一个元素中。然后只需创建菜单即可。 因此，您可能需要为您的 dropdown 类设置 CSS（至少）具有 position: relative;。默认情况下，您在 display:none 上还有一个 .dropdown-menu。也尝试覆盖它。 尝试使用父级 ul 和 li 代替 div 来包装您在上面发布的 ul。 例如， <ul class="nav nav-pills span7 pull-right" id="upper_username_hide"> <li class= "dropdown" data-dropdown="dropdown"> <a id="" class="dropdown-toggle" data-toggle="dropdown" href="#"> <b class="caret dropdown-toggle"></b> </a> <ul class="dropdown-menu" > <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> </ul> </li> </ul> 我不认为 tab-index 是必要的，因为 bootstrap css 会处理这个问题。 祝你好运！ 在我的例子中，我发现 .dropdown-menu 引导类已将 top 属性设置为：top: 100%，这导致下拉列表显示在视口之外。 我确实用另一个类覆盖了最高值，现在正在工作。 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
我想知道这三种在项目中包含第三方代码的方法有什么区别。例如，在 bootstrap 中，我可以通过 cdn 链接包含 css 和 javascript，或者下载
更改引导程序“modal-open”类的分配位置，而不是主体[关闭]
目前 模式开放 当模态打开时分配给主体。我如何更改添加类而不是添加主体的位置。 感谢您的帮助。
BootstrapValidator 关闭启用并禁用输入时的提交按钮
如何在BootstrapValidator中输入时始终启用提交按钮？