Bootstrap是一个前端框架，旨在启动Web应用程序和站点的开发。有关Bootstrap版本的问题，请使用“twitter-bootstrap-2”，“twitter-bootstrap-3”和“bootstrap-4”标签中的特定版本标签。
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中输入时始终启用提交按钮？
尝试将 div 高度设置为身体高度的百分比。我正在使用引导版本 5.3。我能够使 body 元素 100% 占据视图。然而，所有其他 div 的大小都相同 2...
只要调用一个Bootstrap toast，用一个唯一的id，我就可以做到。但： 我将有多个按钮，所有按钮都引用同一个 Toast 消息。我想触发一下，班级电话会议？在我的 JS 脚本中。我不...
我正在使用 Twitter Bootstrap 创建可折叠的文本部分。当按下 + 按钮时，这些部分会展开。我的html代码如下： 演示链接 我正在使用 Twitter Bootstrap 创建可折叠的文本部分。当按下 + 按钮时，这些部分会展开。我的html代码如下： 演示链接 <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> <span class="glyphicon glyphicon-chevron-down"></span> Open </button> </h4> </div> <div id="demo" class="panel-collapse collapse in"> <div class="panel-body"> Contents:Thank you to help me solve the problem, you're a great guy! </div> </div> </div> </div> 后来，我需要更改文本、按钮图标并展开。 已开放： <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> <span class="glyphicon glyphicon-chevron-up"></span> Close </button> 已关闭： <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> <span class="glyphicon glyphicon-chevron-down"></span> Open </button> 也可以通过css样式来实现。 在CSS中添加样式： .text-toggle[aria-expanded=false] .text-expanded { display: none; } .text-toggle[aria-expanded=true] .text-collapsed { display: none; } 并在html中使用： <a class="btn btn-default text-toggle" data-toggle="collapse" data-target="#tabsNavigation" aria-expanded="false"> <span class="text-collapsed">More info</span> <span class="text-expanded">Less info</span> <i class="fa fa-angle-right"></i> </a> 请记得添加属性 aria-expanded="false" 和班级 text-toggle 链接/按钮。 基于：https://stackoverflow.com/a/16870379/1596547 $('button span').parent().click(function () { if($('button span').hasClass('glyphicon-chevron-down')) { $('button').html('<span class="glyphicon glyphicon-chevron-up"></span> Close'); } else { $('button').html('<span class="glyphicon glyphicon-chevron-down"></span> Open'); } }); 如果您使用 jQuery，请使用 toggleClass $('div.toggler').click(function(){ $('div.toggler span').toggleClass('glyphicon-chevron-down glyphicon-chevron-up'); }); 在这里工作 JSFiddle 我发现这个问题和答案很有帮助。我删除了parent()方法，并向我的+按钮添加了一个id，以避免在切换+时更改其他按钮。 $('#more').click(function () { if($('button span').hasClass('glyphicon-chevron-down')) { $('#more').html('<span class="glyphicon glyphicon-chevron-up"></span> Less Info'); } else { $('#more').html('<span class="glyphicon glyphicon-chevron-down"></span> More Info'); } }); http://jsfiddle.net/maybolles/opbyvbv4/2/ 使用此 JavaScript 来更改图标 $(document).ready(function(){ $("#demo").on("hide.bs.collapse", function(){ $(".btn").html('<span class="glyphicon glyphicon-collapse-down"></span> Open'); }); $("#demo").on("show.bs.collapse", function(){ $(".btn").html('<span class="glyphicon glyphicon-collapse-up"></span> Close'); }); $("#demo1").on("hide.bs.collapse", function(){ $(".btn1").html('<span class="glyphicon glyphicon-collapse-down"></span> Open'); }); $("#demo1").on("show.bs.collapse", function(){ $(".btn1").html('<span class="glyphicon glyphicon-collapse-up"></span> Close'); }); });
我成功创建了一个下拉菜单，并更改了选项卡内容。但问题是，在我选择下拉列表中的值来更改选项卡内容之后 - 假设从 wan_static_ip 更改为 wan_dynamic_i...
如何使 Twitter Bootstrap 工具提示有多行？
我目前正在使用以下函数来创建将使用 Bootstrap 的工具提示插件显示的文本。为什么多行工具提示只适用于 而不是 ？我更喜欢那里...
使用 bootstrap 将 glyphicon 添加到 asp.net 按钮
我是 bootstrap/asp.net 的新手，所以我一定做错了什么。 我想要的只是引导程序中的字形图标显示在我的按钮旁边。据我了解，我不能使用asp:Button，但必须使用LinkBu...
在 Bootstrap 3 中，我们有一种字体可以让我们使用字形图标，但在 Bootstrap 4 中没有字体，字形图标也无法使用。我想知道为什么他们拿走了字形图标，以及替换了什么......