Questions tagged «twitter-bootstrap»

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

30
垂直居中的Bootstrap模式窗口
我想将模态集中在视口（中间），我试图添加一些CSS属性 .modal { position: fixed; top:50%; left:50%; } 我正在使用此示例http://jsfiddle.net/rniemeyer/Wjjnd/ 我试过了 $("#MyModal").modal('show').css( { 'margin-top': function () { return -($(this).height() / 2); }, 'margin-left': function () { return -($(this).width() / 2); } })
5
使Bootstrap Popover在悬停时显示/消失而不是单击
我正在使用Bootstrap的Popover构建网站，但我不知道如何使Popover出现在悬停而不是点击的位置。 我要做的是，当有人将鼠标悬停在链接上而不是单击链接时，会出现一个弹出窗口，并且当他们离开时，弹出窗口会消失。该文档说，可以使用data属性或jquery。我宁愿使用jQuery，因为我有多个弹出窗口。
12
带Bootstrap的固定宽度按钮
Bootstrap是否支持固定宽度的按钮？当前，如果我有两个按钮，即“保存”和“下载”，则按钮的大小将根据内容而变化。 还有扩展Bootstrap的正确方法是什么？
19
带悬停的Bootstrap下拉菜单
好的，所以我需要的很简单。 我已经在导航栏中设置了一些下拉菜单（使用class="dropdown-toggle" data-toggle="dropdown"），并且工作正常。 问题是它可以工作“ onClick”，而我希望它可以工作“ onHover”。 有内置的方法吗？
1
引导程序模态打开时调用函数
我曾经使用过JQuery UI的对话框，它具有open选项，您可以在其中指定一些Javascript代码，以在打开对话框后执行。我会使用该选项使用我拥有的功能在对话框中选择文本。 现在，我想使用引导程序的模态来做到这一点。以下是HTMl代码： <div id="code" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Modal header</h3> </div> <div class="modal-body"> <pre> print 'Hello World' 至于打开模式的按钮： <a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a> 我尝试使用按钮的onclick侦听器，但是在出现模式之前显示了警报消息： $( ".code-dialog" ).click(function(){ alert("I want this to appear after the modal has opened!"); });
11
Bootstrap 3将页脚冲洗到底部。不固定
我正在为正在设计的网站使用Bootstrap 3。 我想要一个像这样的样本页脚。 样品 请注意，我不希望它已修复，因此引导程序navbar-fixed-bottom无法解决我的问题。我只希望它始终位于内容的底部并且也要有所响应。 任何指南将不胜感激。 编辑： 对不起，如果我不清楚。现在发生的是，当内容主体没有足够的内容时。我的页脚向上移动，然后在底部留下一个空白区域。 这就是我现在所拥有的导航栏 <nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0"> <div class="container"> <div class="row"> <div class="col-sm-4"> <h5 id='footer-header'> SITEMAP </h3> <div class="col-sm-4" style="padding: 0 0 0 0px"> <p>News</p> <p>contact</p> </div> <div class="col-sm-4" style="padding: 0 0 0 0px"> <p>FAQ</p> <p>Privacy Policy</p> </div> </div> <div …
23
如何解决错误；'错误：Bootstrap工具提示需要Tether（http://github.hubspot.com/tether/）'
我正在使用Bootstrap V4，控制台中记录了以下错误； 错误：Bootstrap工具提示需要系绳（http://github.hubspot.com/tether/） 我试图通过安装Tether来消除错误，但没有成功。我通过包含以下代码行来“安装” Tether； <link rel="stylesheet" href="http://www.atlasestateagents.co.uk/css/tether.min.css"> <script src="http://www.atlasestateagents.co.uk/javascript/tether.min.js"></script> 我是否正确“安装”了系绳？ 谁能帮助我消除此错误？ 如果您想在我的网站上查看错误，请单击此处并加载控制台。
5
将Fieldset Legend与Bootstrap一起使用
我正在为我使用Bootstrap JSP页面。 我想使用<fieldset>和<legend>填写表格。这是我的代码。 <fieldset class="scheduler-border"> <legend class="scheduler-border">Start Time</legend> <div class="control-group"> <label class="control-label input-label" for="startTime">Start :</label> <div class="controls bootstrap-timepicker"> <input type="text" class="datetime" id="startTime" name="startTime" placeholder="Start Time" /> <i class="icon-time"></i> </div> </div> </fieldset> CSS是 fieldset.scheduler-border { border: 1px groove #ddd !important; padding: 0 1.4em 1.4em 1.4em !important; margin: 0 0 1.5em 0 …
14
Bootstrap引发未捕获的错误：Bootstrap的JavaScript需要jQuery
关闭。这个问题需要调试细节。它当前不接受答案。 想改善这个问题吗？更新问题，使它成为Stack Overflow 的主题。 2年前关闭。 改善这个问题 我正在尝试使用Bootstrap为程序创建接口。我在<head>标签中添加了jQuery 1.11.0，并认为是这样，但是当我在浏览器中启动网页时，jQuery报告一个错误： Uncaught Error: Bootstrap's JavaScript requires jQuery 我尝试使用jQuery 1.9.0，尝试使用多个CDN上托管的副本，但是无法正常工作。有人可以指出我做错了吗？
18
如何在禁用按钮上启用Bootstrap工具提示？
我需要在禁用的按钮上显示工具提示，然后在启用的按钮上将其删除。目前，它的工作方式相反。 颠倒这种行为的最佳方法是什么？ $('[rel=tooltip]').tooltip(); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <hr> <button class="btn" disabled rel="tooltip" data-title="Dieser Link führt zu Google">button disabled</button> <button class="btn" rel="tooltip" data-title="Dieser Link führt zu Google">button not disabled</button> 运行代码段隐藏结果展开摘要 这是一个演示 PS：我想保留该disabled属性。
10
Bootstrap 3断点和媒体查询
在Bootstrap 3媒体查询文档中，该文档显示： 我们在Less文件中使用以下媒体查询在网格系统中创建关键断点。 超小型设备（电话，小于768px）：无媒体查询，因为这是Bootstrap中的默认设置 小型设备（平板电脑，768像素及以上）： @media (min-width: @screen-sm-min) { ... } 中型设备（台式机，992px及以上）： @media (min-width: @screen-md-min) { ... } 大型设备（大型台式机，1200px及以上）： @media (min-width: @screen-lg-min) { ... } 难道我们应该能够使用@screen-sm，@screen-md以及@screen-lg在我们的媒体查询的名字呢？因为它对我不起作用。我必须先使用像素测量，@media (min-width: 768px) {...}然后才能使用。难道我做错了什么？ 另外，对于超小型设备的480px的引用是否是错字？那不应该说到767px吗？（因为已从文档中删除）
14
如何在Bootstrap按钮下拉标题中显示所选项目
我在我的应用程序中使用bootstrap Dropdown组件，如下所示： <div class="btn-group"> <button class="btn">Please Select From List</button> <button class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <li><a tabindex="-1" href="#">Item I</a></li> <li><a tabindex="-1" href="#">Item II</a></li> <li><a tabindex="-1" href="#">Item III</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Other</a></li> </ul> </div> 我想将所选项目显示为btn标签。换句话说，将“请从列表中选择”替换为已选择的列表项（“项目I”，“项目II”，“项目III”）。
6
`col-xs- *`在Bootstrap 4中不起作用
我以前从未遇到过，而且我很难找到解决方案。当在引导程序中具有等于medium的列时，如下所示： <h1 class="text-center">Hello, world!</h1> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <h1>vicki williams</h1> </div> </div> </div> 文本对齐可以正常工作： 但是当使列等于超小时，如下所示： <div class="container"> <div class="row"> <div class="col-xs-12 text-center"> <h1>vicki williams</h1> </div> </div> </div> 然后，文本对齐将不再起作用： 是否有一些我不理解的引导概念，或者这实际上是我认为是错误的。我从来没有遇到过这个问题，因为我的文字在过去一直与xs对齐。任何帮助将不胜感激。这是我完整的代码： <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- …
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.