Questions tagged «twitter-bootstrap»

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

1
Bootstrap日期和时间选择器
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案会得到事实，参考或专业知识的支持，但是这个问题可能会引起辩论，争论，民意测验或进一步的讨论。如果您认为此问题可以解决并且可以重新提出，请访问帮助中心以获取指导。 7年前关闭。 建议我使用任何JavaScript来选择日期和时间。 注意：我只想使用一个文件进行日期和时间选择。 我已经看到了： http://www.eyecon.ro/bootstrap-datepicker/ 和 http://jdewit.github.com/bootstrap-timepicker/index.html
3
Bootstrap 3水平分隔线（不在下拉菜单中）
我知道Bootstrap 3有一个水平分隔符，您可以将其放置在下拉菜单中，以分隔这样的链接： <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2"> <li role="presentation" class="dropdown-header">Dropdown header</li> ... <li role="presentation" class="divider"></li> </ul> 我的问题是：有没有办法做到这一点而不将其放在下拉列表中，例如将其放入任何类型的列表或类似菜单中？
14
重新加载模式内容（Twitter引导程序）
我正在使用twitter bootstrap的模式弹出窗口。 <div id="myModal" class="modal hide fade in"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>Header</h3> </div> <div class="modal-body"></div> <div class="modal-footer"> <input type="submit" class="btn btn-success" value="Save"/> </div> </div> 我可以使用带有此a元素的ajax加载内容： <a data-toggle="modal" data-target="#myModal" href="edit.aspx">Open modal</a> 现在，我必须打开相同的模式，但使用不同的URL。我正在使用此模式从数据库中编辑实体。因此，当我单击实体上的“编辑”时，我需要使用ID加载模式。 <a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=1">Open modal</a> <a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=2">Open modal</a> <a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=3">Open modal</a> 如果我单击链接号1，则可以正常工作。但是，如果我然后单击链接号2，则已经加载了模态内容，因此它将显示链接号1中的内容。 如何在Twitter …
1
为什么Bootstrap 3切换为box-sizing：border-box？
我正在将Bootstrap主题从v2.3.2迁移到v3.0.0，我注意到的一件事是，由于bootstrap.css中的以下样式，许多尺寸的计算方式有所不同。 *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 谁能解释为什么Bootstrap将所有元素的框大小切换为border-box？我怀疑这与基于百分比的新网格系统有关，但是上面的选择器显然不仅适用于网格元素。 似乎有点激进的恕我直言:-) 有人愿意提供一些见识吗？
12
如何在Bootstrap中设置ScrollSpy的偏移量？
我有一个网站，导航栏固定在顶部，主要内容区域下面是3个div。 我正在尝试使用bootstrap框架中的scrollspy。 当您滚动经过div时，它可以成功突出显示菜单中的不同标题。 我也有它，所以当您单击菜单时，它将滚动到页面的正确部分。但是，偏移量是不正确的（它没有考虑导航栏，因此我需要偏移40像素左右） 我在Bootstrap页面上看到它提到了偏移选项，但是我不确定如何使用它。 当它说您可以将scrollspy与一起使用时$('#navbar').scrollspy()，我也不是什么意思，我不确定在哪里包括它，所以我没有，而且一切似乎都在起作用（偏移量除外）。 我以为偏移量可能data-offset='10'在body标签上，但是对我没有任何帮助。 我感觉这确实很明显，我只是想念它。有什么帮助吗？ 我的代码是 ... <!-- note: the data-offset doesn't do anything for me --> <body data-spy="scroll" data-offset="20"> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="#">VIPS</a> <ul class="nav"> <li class="active"> <a href="#trafficContainer">Traffic</a> </li> <li class=""> <a href="#responseContainer">Response Times</a> </li> <li class=""> <a href="#cpuContainer">CPU</a> …
13
带网格的Bootstrap 3和4 .container-fluid添加了不必要的填充
我希望我的内容流畅，但是当.container-fluid与Bootstrap的网格一起使用时，我仍然看到填充。我如何摆脱填充物？ 我看到我没有使用.row填充，但是我想添加列，并且一旦添加，填充就会返回：O。 我希望能够以全宽使用列。 一个例子： <div class="container-fluid"> <div class="row"> <div class="col-sm-6"> <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> <div class="col-sm-6"> <p>Use this document as a way to quickly start any new project.<br> All …
6
引导程序4中的popper.js提供了SyntaxError意外的令牌导出
我尝试安装Bootstrap 4，并包含以下链接 <script src="libs/jquery/dist/jquery.min.js"></script> <script src="libs/tether/dist/js/tether.min.js" ></script> <script src="libs/popper.js/dist/popper.js"></script> <script src="libs/bootstrap/dist/js/bootstrap.min.js" ></script> 但是发生以下错误： 语法错误：意外的令牌导出 任何想法如何解决？
18
如何使用引导程序中的selectpicker插件在select上设置选定值
我正在使用Bootstrap-Select插件，如下所示： HTML： <select name="selValue" class="selectpicker"> <option value="1">Val 1</option> <option value="2">Val 2</option> <option value="3">Val 3</option> <option value="4">Val 4</option> </select> Javascript： $('select[name=selValue]').selectpicker(); 现在，我想在单击按钮时将选择的值设置为此选择……类似这样： $('#mybutton').click(function(){ $('select[name=selValue]').val(1); }); 但是什么也没发生。 我该如何实现？
18
引导日期选择器在选择后隐藏
选择日期后如何隐藏日历？我可以使用特定功能吗？我的代码如下： $('#dp1').datepicker({ format: 'mm-dd-yyyy', startDate: '-15d', autoclose: true, endDate: '+0d' // there's no convenient "right now" notation yet }); 任何帮助，将不胜感激。
8
如何创建也在Bootstrap 3中扩展的响应式图像
我目前正在使用Twitter Bootstrap 3，并且在创建响应图像时遇到了问题。我上过img-responsive课。但是图像尺寸没有扩大。如果我使用width:100%而不是，max-width:100%那么它运行完美。问题出在哪里？这是我的代码： <div class="col-md-4 col-sm-4 col-xs-12 "> <div class="product"> <div class="product-img "> <img class="img-responsive" src="img/show1.png" alt="" /> </div> </div> </div>
8
调整图像大小以适合div（引导程序）
我正在尝试使图像适合特定大小的div。不幸的是，图像不符合要求，而是按比例缩小到不够大的尺寸。我不确定使图像适合其内部的最佳方法是什么。 如果这还不够，我将很乐意提供更多代码，并且愿意修复其他我忽略的错误。 这是HTML <div class="span3 top1"> <div class="row"> <div class="span3 food1"> <img src="images/food1.jpg" alt=""> </div> </div> <div class="row"> <div class="span3 name1"> heres the name </div> </div> <div class="row"> <div class="span3 description1"> heres where i describe and say "read more" </div> </div> </div> 我的CSS .top1{ height:390px; background-color:#FFFFFF; margin-top:10px; } .food1{ background-color:#000000; …
8
如何将参数传递给模态？
我想将登录用户点击userName的userNamesa 列表中的传递给twitter bootstrap modal。我在与angularjs一起使用grails，其中数据是通过angularjs呈现的。 组态 我的grails视图页面encouragement.gsp是 <div ng-controller="EncouragementController"> <g:render template="encourage/encouragement_modal" /> <tr ng-cloak ng-repeat="user in result.users"> <td>{{user.userName}}</rd> <td> <a class="btn btn-primary span11" href="#encouragementModal" data-toggle="modal"> Encourage </a> </td> </tr> 我的encourage/_encouragement_modal.gsp是 <div id="encouragementModal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Confirm encouragement?</h3> </div> <div class="modal-body"> Do you really want …
3
Twitter引导导航栏中的“ icon-bar”
我无法理解以下代码在以下方面的含义icon-bar： <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 是icon-bar为了什么 为什么会有三个类似的例子呢？ 此代码位于导航栏部分： <div class="navbar-header"> ... </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.