twitter-bootstrap 相关问题

尝试将 div 大小调整为整个页面的百分比

尝试将 div 高度设置为身体高度的百分比。我正在使用引导版本 5.3。我能够使 body 元素 100% 占据视图。然而，所有其他 div 的大小都相同 2...

多个按钮调用同一个 Bootstrap toast

只要调用一个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 4 中删除字形图标？

在 Bootstrap 3 中，我们有一种字体可以让我们使用字形图标，但在 Bootstrap 4 中没有字体，字形图标也无法使用。我想知道为什么他们拿走了字形图标，以及替换了什么......

为什么从 Bootstrap 4 中删除字形图标？

在 Bootstrap 3 中，我们有一种字体可以让我们使用字形图标，但在 Bootstrap 4 中没有字体，字形图标也无法使用。我想知道为什么他们拿走了字形图标，以及替换了什么......

单击标题上的按钮时防止引导手风琴打开

我有两个操作按钮，位于手风琴的标题上，如下所示： 当我单击这些按钮之一时，它会切换手风琴的状态。我尝试了 e.preventDefault() 和 e.

如何同时使用css-modules和bootstrap？

我在我的项目中使用了 electro-react-boilerplate，并且该样板使用 css-modules 来实现样式设计目的。 我在同一位置使用引导程序和自定义样式时遇到问题。 假设...

如何仅更改特定元素的引导工具提示样式？

我有一个 id 为 pls_btn 的按钮。我已将工具提示位置设置为顶部。但我还希望工具提示距左侧有 100 像素的边距。经过一番挖掘，我发现 .tooltip-inner 可以服务...

带有深色主题 bootstrap css 的样式破折号组件

我下面有一个绘图破折号应用程序的工作示例，该示例在选项卡上显示下拉列表，然后在选择下拉列表中的项目时显示警报。 #!/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>&nbsp;</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>

Bootstrap 4：下拉菜单消失在屏幕右侧

我似乎无法让下拉项目不离开页面。我尝试了 BS3 的一些方法，但似乎不起作用。我不确定是否是因为 ml-auto 的原因。 （忽略 if-else

导航栏中#anchors 的链接在单击后未关闭

我之前已经解决了我的导航栏链接在单击后没有崩溃的问题，感谢@Kami，我使用下面的代码完成了这项工作 $(document).on('点击','.navbar-collapse.in',

关闭画布侧边栏打开时的引导模式

我正在开发一个使用画布外侧边栏菜单的引导网站。将商品添加到购物车后，此菜单会显示一个迷你购物篮，其中购物车内容的宽度小于 980 像素。在底部...

引导下拉按钮列表隐藏并充满

大家好，我尝试实现一个 html 表格单元格下拉按钮来打印与当前行相关的文件，为此，我选择了引导按钮。该按钮位于 r 中的最后一个位置...

Echarts 和 bootstrap：响应式宽度

使用Echarts（来自百度）我想在div元素中放置一个饼图（我正在使用bootstrap）。 所以我有： 使用Echarts（来自百度）我想在div元素中放置一个饼图（我正在使用bootstrap）。 所以我有： <div class="row"> <div class="col-md-4"> <div id="chartGift" style="height:400px;"></div> </div> </div> 我从官方文档中获取了javascript代码 https://ecomfe.github.io/echarts/doc/example/pie1.html#-en 问题是饼图没有出现，因为检查html代码，我看到宽度为0。为什么echarts不从父元素设置宽度？我不想设置静态宽度（我看到它有效），因为图表没有响应。 如果您只想设置固定高度，请尝试将宽度设置为容器的 100% 并设置最小高度： <div id="chartGift" style="width: 100%; min-height: 400px"></div> 这对我有用！ 另外，如果您想确保图表具有响应能力，您可以知道何时调整窗口大小并强制图表调整大小。像这样： $(window).on('resize', function(){ if(chart != null && chart != undefined){ chart.resize(); } }); 希望有帮助！ 只需使用 ResizeObserver 即可检测图表容器元素大小的变化。即使您的布局发生变化，它也可以工作，并且不依赖于窗口大小调整等。顺便说一句。如果需要，也可提供 Polyfill。 const container = document.querySelector('#chart'); const chart = echarts.init(container); new ResizeObserver(() => chart.resize()).observe(container); 我在购买的管理模板中找到了解决方案。有加载内容后初始化图表的解决方案。这是工作示例： $(document).ready(function () { setTimeout(function () { // based on prepared DOM, initialize echarts instance var myChart = echarts.init(document.getElementById('chart-amount'), 'macarons'); // specify chart configuration item and data var option = {..options of chart here ..} // use configuration item and data specified to show chart myChart.setOption(option); }, 100); }); 图表容器的样式为：style="height: 400px; width: 100%; 这一点很重要，当你使用echart工具箱时，它喜欢走出容器。 我希望它有帮助:) <div id="echart" style="width: 400px; min-width: 100%; height:400px;"></div> 这对我有用。最小宽度：100% 就可以了。 首先，将图表包装在 div 中，并指定 div 宽度：100% 和高度：100%。这允许图表在弹性布局中使用。 其次，你需要给图表的父容器一个宽度（即使它的响应宽度），如 flex: 1。 在解决这个问题时，我必须做很多事情： 包装器应动态确定图表的大小 <div class="goal-chart-wrapper" ref="chartContainer"> <div class="goal-chart" ref="goalChart"></div> </div> CSS 控制包装器的大小并强制孩子遵守父母的大小 .goal-chart-wrapper { width: 100%; min-height: 200px; position: relative; .goal-chart { height: 100%; width: 100%; position: absolute; } } 删除插入画布内图表的渲染填充（在图表选项内）。没有包含标签，轴消失了。 grid: { left: 0, top: 0, right: 0, bottom: 0, containLabel: true } 在决定大小的父级上添加 ResizeObserver，这会触发图表的大小调整 import { init } from 'echarts'; const options = { // ... } this.chart = init(this.$refs.goalChart); this.chartContainer = this.$refs.chartContainer; new ResizeObserver(() => { this.chart.resize(); }).observe(this.chartContainer); this.chart.setOption(options); 为了使图表具有响应性并始终匹配其容器的大小，您可以将 ResizeObserver 与 echartsInstance.resize 结合使用。但是，因为观察开始时会触发观察，这会破坏图表的初始动画。因此，就我而言，我在请求调整大小之前检查是否有实际大小变化： let elemChart = document.querySelector('#divChartPie'); let chart = echarts.init(elemChart); // Make chart responsive (resize chart on elemChart resize) new ResizeObserver(() => { if (elemChart.clientWidth !=chart.getWidth() || elemChart.clientHeight != chart.getHeight()) { chart.resize(); } }).observe(elemChart); 设置 width: 100% 会使 echarts 以节点大小（100px）显示，而设置 min-width: 100% 则根本不显示。所以这是相对 css 单位的一些问题。 但是我们仍然可以使用JS设置图表容器的大小。 let main = document.querySelector("main"); let chartDom = document.getElementById("echartsGrafikon"); // getting width of element we want to size up to our chart // do this before chart initialization let grafikonWidth = main.getBoundingClientRect().width; chartDom.style.width = grafikonWidth + "px"; // initializing echart let echartGrafikon = echarts.init(chartDom); // to dynamically change size window.onresize = function () { echartGrafikon.resize(); };

维护 Yii2 GridView 页面更改上的 Bootstrap 选项卡

我有一个页面有 5 个引导选项卡。当我在任何选项卡上更改寻呼机时，都会移动到第一个选项卡。 如何激活用于更改寻呼机的选项卡。 整个页面有 5 个 dataProvider。埃克...

引导程序可搜索选择选项

当我使用引导选择时，选择选项不起作用。 $(函数() { $('.selectpicker').selectpicker(); }); .sc_表{ 高度：100vh； 溢出：滚动； } 当我使用引导选择时，选择选项不起作用。 $(function() { $('.selectpicker').selectpicker(); }); .sc_table { height: 100vh; overflow: scroll; } <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script> <body> <div> <center> <h2>Transaction Creation</h2> </center> </div> <div class="container-fluid p-2 sc_table b-5"> <form action="" method="post"> <div class="mb-3"> <label for="FromACC" class="form-label" data-toggle="tooltip" data-placement="bottom" title="Cash/Bank when money goes out, interest account when need to process income as interest">Credit Account</label> <select id='FromACC' name='frmac' class="selectpicker" data-show-subtext="true" data-live-search="true"> <option data-tokens="dummy" value="0" selected>Select Account</option> <option data-tokens="13000013 - CashBank" value="13">13000013 - CashBank</option> <option data-tokens="202311433 - Interest Account" value="33">202311433 - Interest Account</option> <option data-tokens="202311934 - IIA" value="34">202311934 - IIA</option> <option data-tokens="202311735 - IEA" value="35">202311735 - IEA</option> <option data-tokens="13001313 - Cash" value="36">13001313 - Cash</option> <option data-tokens="13130013 - Bank" value="53">13130013 - Bank</option> </select> </div> <button type="submit" name="tran_submit" class="btn btn-primary">Submit</button> </form> </div> </body> 您遇到的 bootstrap-select 无法正常工作的问题可能是由于 Bootstrap 5 的 兼容性 问题。 您使用的 bootstrap-select 版本可能与 Bootstrap 5 不完全兼容。要解决此问题，您可以尝试使用与 Bootstrap 5 兼容的 bootstrap-select 版本，例如版本 1.14.0-beta2 或 later。 $(function() { $('.selectpicker').selectpicker(); }); .sc_table { height: 100vh; overflow: scroll; } <!-- Include Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Include jQuery --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <!-- Include Popper.js --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script> <!-- Include Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <!-- Include Bootstrap-Select CSS --> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" rel="stylesheet"> <!-- Include Bootstrap-Select JS (compatible version with Bootstrap 5) --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js"></script> <body> <div> <center> <h2>Transaction Creation</h2> </center> </div> <div class="container-fluid p-2 sc_table b-5"> <form action="" method="post"> <div class="mb-3"> <label for="FromACC" class="form-label" data-toggle="tooltip" data-placement="bottom" title="Cash/Bank when money goes out, interest account when need to process income as interest">Credit Account</label> <select id='FromACC' name='frmac' class="selectpicker" data-show-subtext="true" data-live-search="true"> <option data-tokens="dummy" value="0" selected>Select Account</option> <option data-tokens="13000013 - CashBank" value="13">13000013 - CashBank</option> <option data-tokens="202311433 - Interest Account" value="33">202311433 - Interest Account</option> <option data-tokens="202311934 - IIA" value="34">202311934 - IIA</option> <option data-tokens="202311735 - IEA" value="35">202311735 - IEA</option> <option data-tokens="13001313 - Cash" value="36">13001313 - Cash</option> <option data-tokens="13130013 - Bank" value="53">13130013 - Bank</option> </select> </div> <button type="submit" name="tran_submit" class="btn btn-primary">Submit</button> </form> </div> </body>