Questions tagged «twitter-bootstrap»

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

24
如何彻底销毁引导模态窗口？
我已将模态窗口用于向导实现，该过程大约有4,5个步骤。我需要在最后一步（onFinish）和OnCancel步骤之后完全销毁它，而无需刷新页面。我当然可以隐藏它，但是当我再次打开它时，隐藏模式窗口将还原所有内容。有人可以帮我解决这个问题吗？ 谢谢任何提示答案对我都有帮助。
22
模态窗口中的Twitter Bootstrap Datepicker
我目前正在使用Twitter Bootstrap框架，并且在使用模式窗口时，尽管已正确选择并统一渲染，但我无法克服js元素像datepicker或Validation那样工作。请在下面查看我的模态窗口： <div class="modal hide in" id="newMember" style="display: block; " aria-hidden="false"> <div class="modal-header"> <button class="close" data-dismiss="modal" type="button">×</button> <h3>New Member Form</h3> </div> <form accept-charset="UTF-8" action="/players" class="form-horizontal" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="KdL6cc2Vb53qeMY+PpBUS70myT4HX1uWofMUBolLea8="></div> <div class="modal-body"> <div class="widget-content nopadding"> <div class="control-group"> <label class="control-label" for="user_role">Role</label> <div class="controls"> <select id="user_role" name="user[role]" style="display: …
11
是否根据弹出窗口相对于窗口边缘的X位置更改Bootstrap弹出窗口的位置？
我到处搜寻了互联网，而我发现此stackoverflow帖子很有见地，是否可以根据屏幕宽度更改Bootstrap弹出窗口的位置？，它仍然没有回答我的问题，可能是由于我在理解位置/偏移时遇到了麻烦。 这就是我想要做的。我希望Twitter Bootstap Popover的位置为RIGHT，除非热点Popover的位置超出视口，然后我希望它的位置为LEFT。我正在制作一个具有热点的iPad Web应用程序，当您按一个热点时，会显示信息，但是当水平滚动锁定时，我不希望它出现在视口之外。 我在想它会变成这样： $('.infopoint').popover({ trigger:'hover', animation: false, placement: wheretoplace }); function wheretoplace(){ var myLeft = $(this).offset.left; if (myLeft<500) return 'left'; return 'right'; } 有什么想法吗？谢谢！
7
引导程序“ tooltip”和“ popover”在表中增加了额外的大小
注意： 根据您的Bootstrap版本（是否在3.3之前），您可能需要一个不同的答案。 请注意这些注意事项。 当我在此代码中激活工具提示（悬停在单元格上方）或弹出框时，表的大小正在增加。如何避免这种情况？ 在这里emptyRow-函数生成带有100的tr <html> <head> <title></title> <script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <link type="text/css" rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"> <script type="text/javascript" language="javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.1/bootstrap.min.js"></script> <style> #matrix td { width: 10px; height: 10px; border: 1px solid gray; padding: 0px; } </style> <script> function emptyRow() { str = '<tr>' for (j = 0; j < 100; …
4
Bootstrap 3 Glyphicons CDN
请注意！ 此合并请求合并后，Bootstrap图标又回来了。 在过去的几周内反复进行此操作之后，我决定将Glyphicons图标字体恢复为主仓库。考虑到UI中普遍使用的图标，对于大多数人来说，不将它们（或其他一些图标字体）与CSS和JS包含在同一位置可能是不利的。 此更新附带以下内容： 恢复文档（在“组件”页面上） 新变量，@icon-font-path以及@icon-font-name，可灵活添加和删除图标字体 升级到最新的Glyphicons（添加40个新图标） 从CSS页面中删除旧的Glyphicons提及 将来，我们将致力于改进图标字体的自定义设置，以便更轻松地交换字体库（这是原始删除字体的全部动机）。 新版Twitter Bootstrap Glyphicons的CDN网址是哪个？ 他们从Bootstrap 3中移到了一个单独的存储库中，但是我没有找到任何CDN。 从官方文档中： 随着Bootstrap 3的发布，图标已被移至单独的存储库。这样可以使主要项目保持精简，使人们更容易交换图标库，并使Glyphicons图标字体更容易为Bootstrap之外的更多人使用。 在官方网站上他们没有提供图标的CDN网址。 在哪里可以找到它？我不想下载存储库并将其包含到我的项目中。
5
多个和/或嵌套的Bootstrap容器？
我的理解是所有Bootstrap样式的元素都必须存在于一个<div class="container">元素内。但是有时我会看到存在多个“容器”的Bootstrap示例： <div class="container"> <!-- Blah, GUI stuff, blah --> </div> ... <div class="container"> <!-- Blah, more GUI stuff, blah --> </div> 我的问题： 什么时候需要一个带有多个“容器div”的HTML页面？与将整个身体放在一个大的“容器div”中相比，这有什么好处？ 您是否想在其他容器中嵌套“容器div”？什么时候/为什么？
7
使Bootstrap表列适合内容
我正在使用Bootstrap，并绘制表格。最右边的列中有一个按钮，我希望它降低到适合该按钮所需的最小尺寸。 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <table class="table table-responsive"> <tbody> <tr> <th>Name</th> <th>Payment Method</th> <th></th> </tr> <tr> <td>Bart Foo</td> <td>Visa</td> <td><a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">View</a></td> </tr> </tbody> </table> 运行代码段隐藏结果展开摘要 呈现如下： 在突出显示萤火虫的同时，列的宽度也是如此宽： 当页面处于较大的动态宽度模式时，该列随页面缩放。我知道如何在纯CSS中修复此问题，但是大多数方法可能会导致网站的低宽度版本出现问题。 如何使该列下降到其内容的宽度？ （与以往一样-现有的引导程序类>纯CSS> Javascript）
13
Twitter Bootstrap选项卡不起作用：当我单击它们时，没有任何反应
我正在尝试在以下代码中实现Twitter Bootstrap选项卡，但它似乎不起作用。显示了选项卡，但是当我单击它们时，什么也没有发生。以下是我正在使用的唯一代码。所有其他CSS / JS脚本均从Twitter Bootstrap框架复制而来。 <!DOCTYPE html> <html lang="en"> <head> <!-- Le styles --> <link href="assets/twitterbootstrap/css/bootstrap.css" rel="stylesheet"> <link href="assets/twitterbootstrap/css/bootstrap-responsive.css" rel="stylesheet"> </head> <body data-spy="scroll" data-target=".subnav" data-offset="50"> <div class="container"> <!--------> <div id="content"> <ul class="nav nav-tabs" data-tabs="tabs"> <li class="active"><a href="#red">Red</a></li> <li><a href="#orange">Orange</a></li> <li><a href="#yellow">Yellow</a></li> <li><a href="#green">Green</a></li> <li><a href="#blue">Blue</a></li> </ul> <div id="my-tab-content" class="tab-content"> <div …
13
如何在Bootstrap中更改btn颜色
有没有办法更改.btnBootstrap中的所有属性？我已经尝试过以下方法，但有时仍显示默认的蓝色（例如单击并删除鼠标后等）。如何完全更改整个主题？ .btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited { background-color: #8064A2; }
6
引导程序-将按钮对准卡的底部
我正在偷看一个使用card-deckandcard类的Bootstrap示例（Pricing示例）。我想知道，如果其中一个列表的项目少于其他列表，如何解决按钮对齐问题。 我希望所有按钮都垂直对齐（在每张卡的底部），但我想不出一种方法。我尝试设置.align-bottom类以及将按钮包装在中<div class="align-text-bottom">。我还尝试了有关添加空间的问题的一些建议，但是仍然没有成功（间隔也应该是可变的，以便它可以填充列表中的剩余空间）。 包裹<div class="card-footer bg-white">没有产生期望的结果，因为它没有对齐卡片底部的按钮，并且在卡片周围产生了某种边框。 有人有主意吗？ 编辑：这是一个类似于问题的jsfiddle。
3
如何在Bootstrap响应表中设置列的大小
如何在Bootstrap响应表中设置列的大小？我不希望桌子失去响应能力。我也需要它在IE8中工作。我已包含HTML5SHIV和“响应”。 我正在使用Bootstrap 3（3.2.0） <div class="table-responsive"> <table id="productSizes" class="table"> <thead> <tr> <th>Size</th> <th>Bust</th> <th>Waist</th> <th>Hips</th> </tr> </thead> <tbody> <tr> <td>6</td> <td>79 - 81</td> <td>61 - 63</td> <td>89 - 91</td> </tr> <tr> <td>8</td> <td>84 - 86</td> <td>66 - 68</td> <td>94 - 96</td> </tr> </tbody> </table> </div>
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.