Questions tagged «twitter-bootstrap»

Bootstrap是一个前端框架，旨在启动Web应用程序和网站的开发。对于与Bootstrap版本有关的问题，请使用“ twitter-bootstrap-2”，“ twitter-bootstrap-3”和“ bootstrap-4”标签中特定版本的标签。

10
如何在Bootstrap中更改悬停表格的悬停颜色？
我有一个带有“ table-hover”类的表。默认的悬停颜色是白色/浅灰色。如何更改此颜色？ 我尝试通过将以下内容添加到我的主要样式表中来覆盖默认值 .table-hover tbody tr:hover > th { background-color: #D1D119; } 不幸的是，上述方法不起作用
14
Twitter Bootstrap警报消息关闭并再次打开
我的警报消息有问题。它正常显示，当用户按下x（关闭）时，我可以将其关闭，但是当用户尝试再次显示它（例如，单击按钮事件）时，则不会显示它。（此外，如果我将此警报消息打印到控制台，则等于[]。）我的代码在这里： <div class="alert" style="display: none"> <a class="close" data-dismiss="alert">×</a> <strong>Warning!</strong> Best check yo self, you're not looking too good. </div> 事件： $(".alert").show(); PS！仅在发生某些事件（例如，单击按钮）后才需要显示警报消息。还是我做错了什么？
1
在Bootstrap中对表行进行排序
已关闭。这个问题需要更加集中。它当前不接受答案。 想改善这个问题吗？更新问题，使其仅通过编辑此帖子来关注一个问题。 3年前关闭。 改善这个问题 有人可以告诉我一个示例代码，我将不得不使用这些代码对Bootstrap中的表的列进行排序吗？ 例如，如果我要按价格或名称排序。
7
表列大小
在中Bootstrap 3，我可以随意col-sm-xx将其应用于和调整大小表列中的th标签thead。但是，这在Bootstrap 4中不起作用。如何在Bootstrap 4中实现类似的功能？ <thead> <th class="col-sm-3">3 columns wide</th> <th class="col-sm-5">5 columns wide</th> <th class="col-sm-4">4 columns wide</th> </thead> 查看提供的编解码器大小不正确，特别是如果您向表中添加一些数据。查看运行方式： <div class="container" style="border: 1px solid black;"> <table class="table table-bordered"> <thead> <tr class="row"> <th class="col-sm-3">3 columns wide</th> <th class="col-sm-5">5 columns wide</th> <th class="col-sm-4">4 columns wide</th> </tr> </thead> <tbody> <tr> <td>123</td> <td>456</td> <td>789</td> …
19
在引导日期时间选择器中禁用时间
我在用PHP / HTML5和JavaScript制作的Web应用程序中使用引导日期时间选择器。我目前正在从这里使用一个：http : //tarruda.github.io/bootstrap-datetimepicker/ 当我没有时间使用控件时，它将无法正常工作。它只是显示一个空白文本框。 我只想从日期时间选择器中删除时间。有什么解决办法吗？ <div class="well"> <div id="datetimepicker4" class="input-append"> <input data-format="yyyy-MM-dd" type="text"></input> <span class="add-on"> <i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i> </span> </div> </div> <script type="text/javascript"> $(function() { $('#datetimepicker4').datetimepicker({ pickTime: false }); }); </script>
15
如何根据内容动态调整Twitter Bootstrap模式的大小
我的数据库内容包含不同类型的数据，例如Youtube视频，Vimeo视频，文本，Imgur图片等。它们的高度和宽度都不同。我在搜索Internet时发现的所有内容都将大小更改为仅一个参数。它必须与弹出窗口中的内容相同。 这是我的HTML代码。我还使用Ajax来调用内容。 <div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="ModalLabel"></h3> </div> <div class="modal-body"> </div> </div>
18
Bootstrap下拉菜单不起作用
我无法正常使用下拉菜单。我可以使导航栏完美显示，但是当我单击“ Dropdown”（二者之一）时，它不会显示下拉菜单。我曾尝试查看有关此问题的其他文章，但是没有什么能解决每个人的问题。我直接从bootstrap网站复制了源代码，但似乎无法在我的机器上使用它。有人有主意吗？我盯着它看了一个小时，似乎无法弄清楚问题出在哪里。 <head> <script src="resource/js/jquery-1.11.0.js"></script> <script src="resources/js/bootstrap.js"></script> <script type="text/javascript"> $(document).ready(function() { $('dropdown-toggle').dropdown() }); </script> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data- target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> …
5
使用Bootstrap的自适应iframe
我正在使用Bootstrap。 我的文字包含2或3个基于iframe的嵌入视频。 该数据是从数据库中获取的。 如何使这些iframe响应？ 示例代码： <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12"> SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT <iframe src="http://youtube.com/...."></iframe> SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT <iframe src="http://youtube.com/...."></iframe> SOME TEXT SOME …
14
在引导程序中将分页居中
我在分页中有这段代码 <div class="pagination"> <ul> <li><a href="?p=0" data-original-title="" title="">1</a></li> <li><a href="?p=1" data-original-title="" title="">2</a></li> </ul> </div> 但是我ul却一无所获。有什么办法可以使ulwrt 居中div吗？ 我尝试了margin: auto auto，margin :0 auto但是他们没有用。
30
Bootstrap模态在关闭后继续向身体添加填充物
我正在使用bootstrap和Parse框架来构建一个小型Webapp。但是那些Bootstrap模态在关闭后会继续向主体添加padding-right。如何解决呢？ 我试图将此代码放在我的JavaScript中： $('.modal').on('hide.bs.modal', function (e) { $("element.style").css("padding-right","0"); }); 但这是行不通的。有人知道如何解决此问题吗？ 我的代码： <button type="button" class="btn btn-lg btn-default" data-toggle="modal" data-target="#loginModal">Admin panel</button> <div id="loginModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-sm"> <!-- Modal content --> <div class="modal-content"> <!-- header --> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Login</h4> </div> <!-- body --> <div class="modal-body text-center" …
12
在嵌入式HTML中使用link_to
我正在使用Twitter的Bootstrap内容，并且具有以下HTML： <a class="btn" href="<%= user_path(@user) %>"><i class="icon-ok icon-white"></i> Do it@</a> 在Rails中执行此操作的最佳方法是什么？我想用<%= link_to 'Do it', user_path(@user) %>但是<i class="icon-ok icon-white"></i>把我扔掉了？
2
引导中的tabindex =“-1”是什么
tabindexBootstrap 3 的属性是什么？ 尽管他们实际上在所有模态中都使用它们，但它的文档中没有提及它们。 我只发现了有关它的用法，实际上并没有说太多 键盘和辅助技术用户可访问的工具提示 对于使用键盘导航的用户，特别是使用辅助技术的用户，应仅将工具提示添加到可键盘聚焦的元素，例如链接，表单控件或任何具有tabindex =“ 0”属性的任意元素。 而且我发现如果属性不是的话我不能按下esc隐藏模态tabindex-1。 按下esc键后的模态关闭（带有tabindex） 按下esc键后模态未关闭（无tabindex）
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.