Bootstrap是一个前端框架,旨在启动Web应用程序和站点的开发。有关Bootstrap版本的问题,请使用“twitter-bootstrap-2”,“twitter-bootstrap-3”和“bootstrap-4”标签中的特定版本标签。
我想知道这三种在项目中包含第三方代码的方法有什么区别。例如,在 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',
我正在开发一个使用画布外侧边栏菜单的引导网站。将商品添加到购物车后,此菜单会显示一个迷你购物篮,其中购物车内容的宽度小于 980 像素。在底部...
大家好,我尝试实现一个 html 表格单元格下拉按钮来打印与当前行相关的文件,为此,我选择了引导按钮。该按钮位于 r 中的最后一个位置...