Tag: twitter bootstrap 3
Bootstrap 3.3.2模态事件多次触发
Bootstrap模态事件多次触发，或者更确切地说是之前的一次。 我将模态事件包装在click函数中，该函数返回现在的模态id。 我怎样才能确保事件始终只触发一次，并且只有当click函数调用它时？ jQuery的 $(‘.img-modal’).on(‘click’, function () { // returns #modal-Id var modalIdClicked = $(this).attr(‘data-target’) console.log (‘modal id clicked from .img-modal = ‘+ modalIdClicked); console.log (‘.img-modal clicked’); $(modalIdClicked).on(‘show.bs.modal’, function(event) { console.log ( ‘show.bs.modal’); }); }); 默认Bootstrap 3.3.2模态HTML CLOSE × Modal Title Close 我确实看过多次触发jQuery点击事件和Bootstrap 3 – 远程加载模式创建了重复的javascript事件 ，看起来这可以通过.off方法实现。 所以使用$(modalIdClicked).off().on(‘show.bs.modal’, function(event) {在这种情况下做了诀窍。 有人可以向我解释为什么在这种情况下需要这种.off方法吗？ 我无法理解点击的传递方式 。 每次点击都会再次点击Bootstrap JS吗？ […]
当提交按钮在表单之外时，如何使用Bootstrap 3表单validation？
我对表单validation的Bootstrap 3实现感到困惑。 我是Bootstrap的新手，我似乎无法使用不包含提交按钮的表单进行表单validation。 我正在寻找的表单validation类型可以通过以下代码看到： http://jsfiddle.net/hTPY7/1107/ Email: Password: Submit 我知道我可以像下面的代码那样使用一些JQuery提交表单，但是如何使用Bootstrap 3validation呢？ $( “#createUserSubmit” ).click(function() { $( “#newUserForm” ).submit(); }); 我多年来一直在阅读Stackoverflow，但这是我的第一篇文章。 我一直在寻找答案，但我能找到的只是使用其他validation库的解决方案。 我想使用Bootstrap自己的内置函数。 谢谢！
bootstrap，modal dialog，shown.bs.modal事件不会触发
我正在使用带远程选项的modal dialog： Edit 哪里： 另外，我正在监听使用event.target属性的shown.bs.modal事件： $(“body”).on(“shown.bs.modal”, function (event) { // do something with event.target } 我第一次打开对话框时没有触发此事件的原因。 它只是第二次被解雇了。 我试图浏览bootstrap脚本并找到此代码（请参阅我的评论）： var e = $.Event(‘shown.bs.modal’, { relatedTarget: _relatedTarget }) transition ? that.$element.find(‘.modal-dialog’) // wait for modal to slide in .one($.support.transition.end, function () { that.$element.focus().trigger(e) //THIS LINE NEVER EXECUTED AT FIRST DIALOG OPENING }) .emulateTransitionEnd(300) : that.$element.focus().trigger(e) 所以，我关闭了转换作为一种解决方法，它使事件第一次被触发，但是，event.target是空字符串。 第二次，event.target包含适当的对话框HTML。 […]
Bootstrap 3水平可滚动行网站设计
我正在尝试使用bootstrap 3创建一个水平滚动网页。 这是我到目前为止所尝试的。 @media (min-width:768px) { .container { width:100%; } #main-content{ min-height: 100%; height: auto; } #main-content > .row { overflow-x:scroll; overflow-y:hidden; } #main-content > .row [class*=”col-lg”], #main-content > .row [class*=”col-md”], #main-content > .row [class*=”col-sm”] { float:left; } 我尝试了在这个线程中提到的jquery方法，但是即使在将宽度设置为row类之后它也不滚动， 这里显示的是col-lg类。 我还尝试通过获取col-lg- height的高度来设置高度到row类，但仍未成功 。 我想要达到的目标是： col-lg-，col-md-和col-sm-类应该用它各自的宽度内容滚动。 列数可能会根据数据而有所不同。 在col-xs中，默认行为没有变化。 http://jsfiddle.net/ravimallya/7kCTD/3/这是工作场所。 有人可以建议一个解决方法吗？ css，jquery
用户在弹出窗口外单击时关闭Bootstrap Popover
我有一些内容在包含弹出框的网页上动态加载。 出于这个原因，我必须将它们绑定到身体，以便它们加载并正确显示。 当用户点击弹出窗口或其他弹出窗口触发器时，我想找到隐藏弹出窗口的方法。 我发现如果我“隐藏”popover，popover确实隐藏了但元素仍保留在DOM中。 这意味着popover中的活动链接仍然是“可点击的”。 如果我改为销毁popover，它会隐藏，但如果点击则无法重新激活。 隐藏弹出窗口的唯一可靠方法是使用“切换”。 这增加了确定隐藏哪些弹出窗口的复杂性。 请看这个JSFiddle所有这些代码。 HTML <a href="#" data-toggle="popover" data-original-title="" data-content="http://www.yahoo.com” class=”some-popover-link”>Yahoo <a href="#" data-toggle="popover" data-original-title="" data-content="http://www.google.com” class=”some-popover-link”>Google <a href="#" data-toggle="popover" data-original-title="" data-content="http://www.microsoft.com” class=”some-popover-link”>Microsoft JavaScript的 $(‘.some-popover-link’).popover({ container: ‘body’, html: true, placement: ‘bottom’ }); $(document).click(function (e) { $(‘.some-popover-link’).each(function () { if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $(‘.popover’).has(e.target).length === 0) { $(this).popover(‘hide’); […]
Bootstrap 3 – 带侧边栏的Scrollspy
我正在使用Bootstrap 3.我想重新创建与Bootstrap站点上的文档中的侧栏相同的function。 下面是我的代码，它也在这里： http ： //bootply.com/82119 两个问题。 当您向下滚动每个部分的页面时，侧边栏项目不会突出显示。 当您单击侧栏项时，它会跳转到相关锚点，但一半的内容不可见。 更改data-offset值似乎无效。 我究竟做错了什么？ Content 1 Content 2 Content 3 Content 4 Content 5 Content 1 At Bootply we attempt to build simple Bootstrap templates that utilize… Content 2 Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto… Content 3 Rem aperiam, eaque ipsa quae […]
是否可以使用Bootstrap的modal dialog，jQuery，AJAX和PHP将图像上传到服务器？ 如果有，怎么样？ 如果没有什么原因呢？
我正在使用PHP，jQuery（jquery-1.9.1.min.js和jquery-ui-1.10.0.custom.min.js），AJAX，Bootstrap设计框架（Bootstrap v3.0.0）等。 我是网络编程领域的新手。 现在在一个地方，我想在点击按钮时显示Bootstrap框架的内置模式对话框 。 在此模式对话框中，将有一个用于上载图像文件的HTML文件控件。 用户将通过浏览文件从他/她的本地机器中选择任何图像文件。 然后执行以下所有必要的validation之后 适当的标准图像扩展 最大大小限制为5 MB 最小尺寸为940 px * 370 px 应使用PHP代码将文件上载到服务器。 如果任何validation失败，相关的错误消息应在文件上载HTML控件上方以红色显示。 是否可以实现此function？ 我听说使用AJAX上传文件是不可能的。 我真的不知道这是神话还是事实。 如果有人知道这件事，请详细向我解释。
有没有办法使用jQuery.noConflict（）的bootstrap 3.0插件？
我们目前正在页面上加载2个不同版本的jQuery，1.4.2和1.10.1。 $和window.jQuery对象当前指向1.4.2。 我们使用版本1.10.1的noConflict（）将其设置为$ jq1： var $jq1 = jQuery.noConflict(true); 有没有办法让Bootstrap 3.0插件自动使用$ jq1而不是$或window.jQuery？
使用带有$ .cookie（）的cookie保存多个面板的折叠状态
我正在尝试确定如何使用$ .cookie保存可折叠面板的折叠状态。 到目前为止， 这个问题一直有用，但仍然缺少最终解决方案。 到目前为止我找到的任何解决方案都只保存了最后一个下拉面板，所以当重新加载页面时，唯一保存的面板是最后一个。 我需要的是保存所有滚动的面板而不是一个。 链接到Github上的jCookie插件。 链接到JSFiddle上的demo UPDATE 有人建议LocalStorage是我想要实现的更合适的解决方案。 如果您可以评论为什么以及本地存储是什么，将非常感激。 更新2 因为有人建议本地存储比使用cookie解决这个问题有所改进。 选定的答案基于此。 然而，正如Robin所提到的，在HTTPS站点上使用此技术存在缺点。 HTML Panel 1 Panel 2 Panel 3 jQuery的 $(“.panel .panel-collapse”).on(‘shown.bs.collapse’, function () { var active = $(this).attr(‘id’); $.cookie(‘activePanelGroup’, active); }); $(“.panel .panel-collapse”).on(‘hidden.bs.collapse’, function () { $.removeCookie(‘activePanelGroup’); }); var last = $.cookie(‘activePanelGroup’); if (last != null) { //remove default collapse settings […]
Bootstrap网格列清除
我很难理解bootstrap中的列clearfix结构。 我正在尝试创建一个卡片布局，它需要布局中的行都具有相同的高度，但每个条目中的内容不一定相同。 你可以看到我在这里做的一个例子： https ： //demo.eap.soa.com/content/test/staticapps.html 部分困难在于我使用车把模板来制作内容： {{#each apps}} {{title}} {{description}} {{/each}} 因此，每X个条目插入一个空的清除div并不容易，或者甚至必须知道X应该是什么。 我可以通过在col-md-4类上使用min-height来破解它，但这看起来非常难看。 这里有什么想法？ 谢谢。
