twitter-bootstrap 相关问题

引导进度条没有进度

引导进度条在我的 MVC 索引视图上不起作用。 我已经用 Chrome 和 Internet Explorer 尝试过了。 @{ ViewBag.Title = "首页"; } 引导进度条在我的 MVC 索引视图上不起作用。 我已经用 Chrome 和 Internet Explorer 尝试过了。 @{ ViewBag.Title = "Home Page"; } <div class="jumbotron"> <h1>ASP.NET</h1> <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p> <p><a href="http://asp.net" class="btn btn-primary btn-large">Learn more &raquo;</a></p> </div> <div class="row"> <div class="col-md-4"> <h2>Getting started</h2> <div class="progress-bar progress-striped "></div> </div> </div> 本次聚会迟到了，但在我使用的 Bootstrap 版本（v3.1.1）中，该类是“progress-striped”（不是像文档所说的“progress-bar-striped”），并且它和“active” ' 类必须应用于外部 div: <div class="progress progress-striped active"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">Some text</div> </div> 查看 CSS，选择器“progress-bar”已更改为“bar”： ./bootstrap.css: .progress { ... } .progress .bar { ... } 因此，将您的代码更改为 <div class="progress"> <div class="bar"> </div> </div> 然后就可以了。 不确定这种疯狂的原因是什么，似乎引导文档还没有更新。 <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div> </div> 这样进度动画就可以工作了。 <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> </div> 上面是 bootstrap v3.1.1 的代码，看起来你的进度条 div 缺少一些元素？ 如果您使用 Bootstrap v4 并且需要动画，则需要使用 progress-bar-animated 而不是 active。

根据图像数据创建背景渐变

我用引导卡制作了一个优雅的图像加载器，它在加载图像时在背景中显示渐变填充。图像加载后就会淡入。渐变颜色是...

PHP 与 Bootstrap 轮播

我正在尝试学习 PHP 并将其与我的网站的 Bootstrap 库一起使用。我希望使用引导程序轮播，如此处所示 我想要实现的是带有标题的轮播和

Javsacript：根据图像数据创建背景渐变

我用引导卡制作了一个优雅的图像加载器，它在加载图像时在背景中显示渐变填充。图像加载后就会淡入。 渐变颜色很...

BS 导航栏不适用于下载的 Bootstrap 库。 CDN 没问题，请帮助我

我正在尝试使用带有下载的库/离线的引导程序。 然而，编写的 html 与 CDN 配合得很好。 这是文件夹架构。 ...

如何让最后一项仅在换行到下一行时才填充剩余空间

我有一个带有 flex-wrap:wrap 集的 Flex 容器。有没有办法让最后一个弹性项目（示例中的“未知”按钮）仅在换行到新行时才填充剩余空间？它...

Bootstrap 模式仅显示 MongoDB 集合中的第一条记录

我正在使用 NodeJS、Handlebars 和 Bootstrap 构建一个简单的 Web 应用程序。它应该循环遍历模拟产品的 MongoDB 集合并显示其字段。 我正在“产品...

引导日期选择器不起作用

我正在尝试使用引导日期选择器，但它不起作用。我在引导程序中查看了很多关于同一问题的页面。我几乎尝试了所有方法，但最终都没有成功。它的作用...

单击子元素时忽略父级 onClick 事件

请参阅 - http://www.bootply.com/dR7fxjP1bk 通过单击任何 div.rows（我们称之为父级），将激活 onClick 事件，出于演示目的，会弹出警报。 行内一致...

为什么不是所有 Font Awesome 图标都可以与 boostrapCDN 一起使用？

根据我的理解，所有 Font Awesome 图标都应该与链接此引导样式表一起使用。但是，我刚刚让一个 .fa fa-deskto 可以工作，其他的不显示，例如第二个是：

如何配置验证以对无效输入使用“is-invalid”类

默认情况下，ASP.NET Core 中的输入验证使用类 input-validation-error，但 Bootstrap 5 使用 is-invalid。 我找到了一些解决方案： 创建样式 使用 jQuery.validate.unobtrusi...

如何在flex-grow容器中创建响应式表格而不影响整体布局？

我正在使用 Bootstrap 5.3 开发响应式布局，其中包括导航栏、侧栏、内容面板和状态栏。该应用程序应始终为 100% 视图高度和视图宽度，并包含所有信息...

如何在没有ID的情况下初始化和操作Bootstrap Collapse？

出于某种原因，我想在没有ID的情况下使用折叠。我在 stackoverflow 上找到了一个旧答案，它似乎在 Bootstrap 5 中不起作用。 错误：未捕获类型错误：c.nextElementSibling.collapse i...

Bootstrap 5使用js切换折叠不起作用

出于某种原因，我想在没有ID的情况下使用折叠。我在 stackoverflow 上找到了一个旧答案，它似乎在 Bootstrap 5 中不起作用。 错误：未捕获类型错误：c.nextElementSibling.collapse i...

脚本无法在我的引导模式中工作

希望这不是一个愚蠢的问题，但我已经没有主意了...... 所以我有这个模式： 1.scala.html 希望这不是一个愚蠢的问题，但我已经没有主意了...... 所以我有这个模式： 1.scala.html <div class="feat" id="cor" data-toggle="tooltip" data-placement="bottom" title="add conference role"><div data-toggle="modal" data-target="#conf-role-menu-modal">Conference Role</div></div> <div class="modal fade" id="conf-role-menu-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body-conf-role-menu"> <script type="text/javascript"> $(function(){ $(".modal-body-conf-role-menu").load("@routes.Application.areaConferenceRole(id,idenv)"); }); </script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> 使用模态主体中的脚本，我尝试加载此页面： 2.scala.html @(id:String, idenv:String) @Main("Add area") { <form action="@routes.Application.areaPostConferenceRole(id,idenv)" method="POST"> First Name: <input type="text" name="first_name" id="first" class="form-control"> Last Name : <input name="last_name" class="form-control"> <script type="text/javascript"> $( document ).ready(function() { // Handler for .ready() called. $( "#first" ).focus(function() { alert( "Handler for .focus() called." ); }); }); </script> </form> } 页面加载正常。我在我的模态中看到它...... 问题是我的页面 2.scala.html 中的脚本无法运行。我不明白为什么......如果我从我尝试在模态中加载的页面之外尝试它们，它们就会起作用...... $( document ).ready(function(){}); 永远不会在模态中到达，因为加载页面时已经触发了此事件（模态在之后加载...） 尝试直接插入脚本，如下所示： <script type="text/javascript"> $( "#first" ).focus(function() { alert( "Handler for .focus() called." ); }); </script> 当引导模式弹出时，shown.bs.modal事件将被触发。这是例子。 $('#myModal').on('shown.bs.modal', function () { $('#myInput').trigger('focus') }) Full documentation. https://getbootstrap.com/docs/4.0/components/modal/ 试试这个我已经准备好这个功能了 $('#myModal').on('shown.bs.modal', function () { // Your script here }); $(document).on('shown.bs.modal', '#myModal', function () { // Your script here });

Bootstrap - 如何创建具有可滚动列的全屏布局？

我正在尝试创建一个全屏布局，占据 100% 的视口，并带有粘性页眉和页脚，以及主内容区域中可单独滚动的列。 我已经和你一起实验过...

鼠标悬停时停止 setTimeout 引导模式

我使用 Bootstrap 4 创建模态，并在后端添加 settimeout 以在 X 秒后关闭模态。 但如果用户没有读完该模式，这就是我的主要目标：我想停止设置...

如何停止 javascript 上的 onclick 操作？

单击按钮时，我希望微调器出现 3 秒然后消失。我会做 可见但无法再次变得不可见 函数停止加载（）{ document.getElementById('l...

带有 Bootstrap 下拉菜单的 DataTable 固定列

我使用具有固定列扩展的 DataTable 和 Bootstrap 样式。我设置为固定的列包含 Bootstrap 的下拉元素。 问题是当我单击下拉元素时，我的...

具有等效表行跨度和列跨度的引导网格

我正在尝试在 bootstrap3 中创建一个像这样的布局 在这里找到类似的东西但无法使其工作： https://jsfiddle.net/SxcqH/52/ 。容器 { 顶部边距：10px； } 我正在尝试在 bootstrap3 中创建一个像这样的布局 在这里找到类似的东西但无法使其工作： https://jsfiddle.net/SxcqH/52/ .container { margin-top: 10px; } <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="row-fluid"> <div class="span4"><div class="well">1<br/><br/><br/><br/><br/></div></div> <div class="span8"> <div class="row-fluid"> <div class="span6"><div class="well">2</div></div> <div class="span6"><div class="well">3</div></div> </div> <div class="row-fluid"> <div class="span6"><div class="well">4</div></div> <div class="span6"><div class="well">5</div></div> </div> </div> </div> <div class="row-fluid"> <div class="span4"> <div class="well">6</div> </div> <div class="span4"> <div class="well">6</div> </div> <div class="span4"> <div class="well">6</div> </div> </div> 我能够使用嵌套网格来做到这一点 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <div class="row mx-auto" style="height: 200px;"> <div class="col-sm-6"> <div class="row "> <!-- nested row 1 --> <div class="col-sm-12 "> <!-- nested quick links col --> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA </div> <div class="row"> <!-- nested row 2 --> <div class="col-sm-6"> BBBBBBB </div> <div class="col-sm-6"> CCCCCCCCC </div> </div> </div> </div> <div class="col-sm-3"> DDDDDD </div> </div> </div>