Questions tagged «twitter-bootstrap»

我是Bootstrap的新手，并且一直遇到这个问题。我有一个输入字段，只要输入一个数字，onChange就会调用from函数，但是我希望在输入完整个数字后按“ Enter”键才能调用它。验证功能存在相同的问题-调用时间过早。 var inputProcent = React.CreateElement(bootstrap.Input, {type: "text", //bsStyle: this.validationInputFactor(), placeholder: this.initialFactor, className: "input-block-level", onChange: this.handleInput, block: true, addonBefore: '%', ref:'input', hasFeedback: true });

204 javascript  twitter-bootstrap  reactjs 

我正在使用引导程序在网站上工作。 基本上，我想在主页中使用模态，由英雄单位中的按钮召唤。 按钮代码： <button type="button" class="btn btn-warning btn-large" data-toggle="modal" data-target="#myModal">Open Modal</button> 模态代码： <div class="modal hide fade" id="myModal" 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="myModalLabel">In Costruzione</h3> </div> <div class="modal-body"> <p>Test Modal: Bootstrap</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button> <button class="btn btn-warning">Salva</button> </div> </div> 问题是，一旦我单击按钮，模态就会淡入，然后立即消失。 …

203 twitter-bootstrap  modal-dialog 

是否有任何方法可以增加bootstrap 3导航栏折叠的位置（即，使其在肖像平板电脑上折叠成一个下拉列表）？ 这两个适用于引导程序2，但现在不适用！ 如何使用Twitter引导响应式更改导航栏折叠阈值？ 更改默认的响应式导航栏断点

202 twitter-bootstrap  twitter-bootstrap-3  navbar 

在没有任何自制类的情况下，在Twitter Bootstrap中设计如下所示的表单的最佳方法是什么（请参见下面的链接）？ 是否可以像下面的示例一样在水平表单内设置内部表单内联：

199 html  forms  twitter-bootstrap 

我已经开始使用Bootstrap来实现漂亮的页面设计而无需借助GWT（后端是用Java制作的） 对于我的登录屏幕，我复制了此示例。现在，我想标记一个错误，例如，用户名保留为空。所以我想知道Bootstrap框架中的程序是什么。或者，也许有一些示例显示有错误的表格。 我不确定该想法是在红色输入元素内显示错误消息，还是在输入元素下方显示错误消息，或者是否弹出窗口？

194 twitter-bootstrap 

我想要1个较大的图像和2个2x2格式的4个较小的图像，如下所示： 我最初的想法是将所有东西都放在一排。然后创建两列，并在第二列中创建两行和两列以创建1x1和2x2效果。 但是，这似乎是不可能的，或者我只是没有正确执行？

194 css  html  twitter-bootstrap  grid  grid-system 

我正在使用Bootstrap 3设计页面。我正在尝试placement: right在输入元素上使用弹出框。新的Bootstrap可确保您在使用form-control时基本上具有全角输入元素。 HTML代码如下所示： <div class="row"> <div class="col-md-6"> <label for="name">Name:</label> <input id="name" class="form-control" type="text" data-toggle="popover" data-trigger="hover" data-content="My popover content.My popover content.My popover content.My popover content." /> </div> </div> 我认为popover的宽度太低，因为它们在div中没有​​剩余的任何宽度。我想在左侧输入表单，在右侧显示宽弹出窗口。 通常，我正在寻找无需覆盖Bootstrap的解决方案。 附加的JsFiddle。第二个输入选项。jsfiddle并没有使用太多，所以不知道，但是尝试增加输出框的大小以查看结果，在较小的屏幕上甚至看不到它。 http://jsfiddle.net/Rqx8T/

192 css  twitter-bootstrap  twitter-bootstrap-3  popover 

在Twitter引导程序中，查看模态文档。我无法弄清楚是否有办法监听模态的close事件并执行函数。 例如，以该模式为例： <div class="modal-header"> <button type="button" class="close close_link" data-dismiss="modal" aria-hidden="true">×</button> <h3>Modal header</h3> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <a href="#" class="btn close_link" data-dismiss="modal">Close</a> </div> 由于，顶部的X按钮和底部的关闭按钮都可以隐藏/关闭模式data-dismiss="modal"。所以我想知道，是否可以听一下？ 另外，我想我可以像这样手动进行... $("#salesitems_modal").load(url, data, function() { $(this).modal('show'); $(this).find(".close_link").click(modal_closing); }); 你怎么看？

191 jquery  twitter-bootstrap  modal-dialog 

有谁知道如何更改Bootstrap的input:focus？单击input字段时出现的蓝色发光？

190 html  css  twitter-bootstrap 

使用Bootstrap时，我有点陷入CSS问题。我还将Angular JS与Angular UI.bootstrap一起使用（这可能是问题的一部分）。 我正在建立一个在表格中显示数据的网站。有时，数据包含我必须在表中显示的对象。因此，我想将无边界表放在普通表中，同时将无边界表的分隔线保留在内部。 但是，即使我明确地说不要在桌子上显示边框，也似乎是强制性的： HTML： <table class='table borderless'> CSS： .borderless table { border-top-style: none; border-left-style: none; border-right-style: none; border-bottom-style: none; } 所以在这里，我想要的只是内部边界。

190 html  css  twitter-bootstrap 

Twitter Bootstrap的按钮具有良好的Loading...状态。 事实是，它仅显示一条消息，例如Loading...通过data-loading-text属性传递的消息，如下所示： <button type="button" class="btn btn-primary start" id="btnStartUploads" data-loading-text="@Localization.Uploading"> <i class="icon-upload icon-large"></i> <span>@Localization.StartUpload</span> </button> 查看Font Awesome，您会看到现在有一​​个动画微调器图标。 在触发这样的Upload操作时，我尝试集成该微调器图标： $("#btnStartUploads").button('loading'); $("#btnStartUploads i").removeAttr('class'); $("#btnStartUploads i").addClass('icon-spinner icon-spin icon-large'); 但这完全没有效果，也就是说，我只看到Uploading...按钮上的文字。 按钮处于“加载”状态时是否可以添加图标？看起来Bootstrap只是<i class="icon-upload icon-large"></i>在处于Loading状态时只是删除了按钮内的图标。 这是一个简单的演示，展示了我上面描述的行为。如您所见，当它进入“加载”状态时，图标消失了。在该时间间隔后，它会重新出现。

189 button  twitter-bootstrap  icons  loading  font-awesome 

我在一个项目上使用Twitter Bootstrap。除了默认的引导样式之外，我还添加了一些自己的样式 //My styles @media (max-width: 767px) { //CSS here } 当视口的宽度小于767px时，我还使用jQuery更改页面上某些元素的顺序。 $(document).load($(window).bind("resize", checkPosition)); function checkPosition() { if($(window).width() < 767) { $("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar")); } else { $("#body-container .main-content").remove().insertAfter($("#body-container .left-sidebar")); } } 我遇到的问题是，$(window).width()由CSS计算的宽度与由CSS计算的宽度似乎并不相同。当$(window).width()返回767时，css将其视口宽度计算为751，因此似乎存在16px的差异。 有谁知道是什么原因造成的，以及如何解决这个问题？人们建议不要考虑滚动条的宽度，而应该使用滚动条的宽度$(window).innerWidth() < 751。但是，理想情况下，我想找到一种解决方案，该解决方案可以计算滚动条的宽度，并且与我的媒体查询一致（例如，两种情况都对照值767进行检查）。因为肯定不是所有浏览器的滚动条宽度都为16px？

186 jquery  css  twitter-bootstrap  media-queries 

在我的一生中，我无法获得这些twitter twitter bootstrap按钮来将文本换行多行，它们看起来像这样。 我无法发布图片，所以这就是正在做的... [这是bu] tton文本 我希望它看起来像 [这是] [按钮文字] <div class="col-lg-3"> <!-- FIRST COL --> <div class="panel panel-default"> <div class="panel-body"> <h4>Posted on</h4> <p>22nd September 2013</p> <h4>Tags</h4> <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a> <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit …

186 html  css  twitter-bootstrap  web 

我需要将叠加层显示在第一个模态上方，而不是在背面。 显示代码段 $('#openBtn').click(function(){ $('#myModal').modal({show:true}) }); <a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal title</h4> </div><div class="container"></div> <div class="modal-body"> Content for the dialog / modal goes here. <br> <br> <br> <br> <br> <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch …

185 javascript  jquery  twitter-bootstrap  twitter-bootstrap-3  modal-dialog 

关于引导程序模态，我已经看到了几个问题，但是没有一个完全像这样，所以我继续。 我有一个模态，我这样称呼onclick ... $(".modal-link").click(function(event){ $("#modal-content").modal('show'); }); 这可以正常工作，但是当我显示模态时，我想关注第一个输入元素...在某些情况下，第一个输入元素的ID为#photo_name。 所以我尝试了 $(".modal-link").click(function(event){ $("#modal-content").modal('show'); $("input#photo_name").focus(); }); 但这无济于事。最后，我尝试绑定到“ show”事件，但是即使如此，输入也不会集中。最后，仅出于测试目的，因为我怀疑这与js加载顺序有关，所以我设置了setTimeout只是为了查看是否延迟一秒钟，焦点会起作用，是的，它起作用了！但是这种方法显然是胡扯。有什么方法可以在不使用setTimeout的情况下达到与以下相同的效果？ $("#modal-content").on('show', function(event){ window.setTimeout(function(){ $(event.currentTarget).find('input#photo_name').first().focus() }, 0500); });

182 javascript  twitter-bootstrap  modal-dialog