Bootstrap是一个前端框架，旨在启动Web应用程序和站点的开发。有关Bootstrap版本的问题，请使用“twitter-bootstrap-2”，“twitter-bootstrap-3”和“bootstrap-4”标签中的特定版本标签。
我使用此代码使 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 中没有字体，字形图标也无法使用。我想知道为什么他们拿走了字形图标，以及替换了什么......
在 Bootstrap 3 中，我们有一种字体可以让我们使用字形图标，但在 Bootstrap 4 中没有字体，字形图标也无法使用。我想知道为什么他们拿走了字形图标，以及替换了什么......
我有两个操作按钮，位于手风琴的标题上，如下所示： 当我单击这些按钮之一时，它会切换手风琴的状态。我尝试了 e.preventDefault() 和 e.
我在我的项目中使用了 electro-react-boilerplate，并且该样板使用 css-modules 来实现样式设计目的。 我在同一位置使用引导程序和自定义样式时遇到问题。 假设...
我有一个 id 为 pls_btn 的按钮。我已将工具提示位置设置为顶部。但我还希望工具提示距左侧有 100 像素的边距。经过一番挖掘，我发现 .tooltip-inner 可以服务...
我下面有一个绘图破折号应用程序的工作示例，该示例在选项卡上显示下拉列表，然后在选择下拉列表中的项目时显示警报。 #!/usr/bin/env python3 进口...
我的网站上设置了一个导航栏，我在导航栏的右侧设置了一个搜索栏，请参阅下面的代码 我的网站上设置了一个导航栏，我在导航栏的右侧设置了一个搜索栏，请参阅下面的代码 <nav class="navbar navbar-trans navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand text-danger" href="index.php">Network TV</a> </div> <div class="navbar-collapse collapse" id="navbar-collapsible"> <ul class="nav navbar-nav navbar-left"> <li><a href="#section1">Home</a></li> <li><a href="#section2">Top rated</a></li> <li><a href="#section3">Most Popular by Genre</a></li> <li><a href="#section4">Music</a></li> <li><a href="#section5">Suggestions</a></li> <li id="adminpanel"><a href="admin/data_display.php">Admin control panel</a></li> <li> </li> <div class="col-sm-3 col-md-3 pull-right"> <form class="navbar-form" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> </div> </div> </form> </div> </ul> </div> </div> </div> </nav> 我想知道如何做到这一点，以便当用户在搜索栏中输入信息时，结果将以引导模式显示。例如，他们输入“电影”，就会弹出电影模式，其中包含电影名称。这是搜索栏的特写 <div class="col-sm-3 col-md-3 pull-right"> <form class="navbar-form" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> </div> </div> </form> </div> 这取决于您计划如何获取数据。如果我没猜错的话，您只想向某些电影数据库发出 POST/GET 请求。看起来像 php，也许是 Wordpress/Drupal，所以猜测它是一个 MySQL 请求。 这是 PHP Academy 的（免费）教程，Alex 是一位很好的导师。 PHP学院视频： https://www.youtube.com/watch?v=Yb3c-HljFro 干杯。 <div class="container h-100"> <form method="POST" action="jq.php"> <div class="d-flex justify-content-center h-100"> <div class="searchbar"> <input class="search_input" type="text" name="" placeholder="Search..."> <a href="#" class="search_icon"><i class="fas fa-search"></i></a> </div> </div> </form> </div>
我似乎无法让下拉项目不离开页面。我尝试了 BS3 的一些方法，但似乎不起作用。我不确定是否是因为 ml-auto 的原因。 （忽略 if-else
我之前已经解决了我的导航栏链接在单击后没有崩溃的问题，感谢@Kami，我使用下面的代码完成了这项工作 $(document).on('点击','.navbar-collapse.in',