Tag: twitter bootstrap

当鼠标移动缓慢时，Bootstrap 4中的菜单消失: 我正在运行这个小提琴，当鼠标指针从START快速移动到展开的菜单时，一切都很好。但是，当运动较慢时，菜单会关闭，因为它感觉就像鼠标左侧。 const menu = $(“li.dropdown”); menu.on(“mouseenter mouseleave”, () => { menu.toggleClass(“open”); }); 最初，我试图使列表项控制更高但很快意识到菜单将在它下面打开（加上这个不幸的垂直距离）。我该怎么办？显然Bootstrap创建者出于某种原因发现了这个好处（或者没有考虑鼠标移动而是点击）。我可能以不恰当的方式设置hover事件吗？

动态添加多个字段的Bootstrapvalidation: 我正在使用bootstrap v3.1.1，我想validation一个带有bootstrapvalidation的表单，但是包含一个克隆3个字段的按钮。克隆一切都很好，但我无法validation克隆的字段。这是我的HTML表单： add line 在JavaScript文件中我有： $(document).ready(function () { var count = 2; $(‘#cloneButton’).click(function () { var klon = $(‘#line_1’); klon.clone().attr(‘id’, ‘line_’ + (++count)).insertAfter($(‘#line_1’)); $(‘#line_’ + count).children(‘div’).children(‘input’).each(function () { $(this).val(”); var oldId = $(this).attr(‘id’).split(‘_’); $(this).attr(‘id’, oldId[0] + ‘_’ + count); }); }); //For validating the fields: $(‘#myForm’).bootstrapValidator({ fields: { ‘firstField[]’: { validators: { notEmpty: […]

按宽度排列Bootstrap Carousel项目。: 我们安排一些div的内部bootstrap轮播项目。请看这个 .item{ padding:10%; } .inner{ float:left; margin:10px; border:1px solid black; width:26% } .carousel-control{ width:4%; } 1 2 3 4 5 6 7 8 9 10 11 12 Previous Next 当窗口调整到360px宽度时，div 3进入第一个轮播。但每次我们只需要在一个caurosel中显示一行项目。即，当窗口调整为360px div 3显示在第一个旋转木马itme，但我们需要显示在第二个旋转木马项目。有没有办法做到这一点？即：每当我们需要在一个轮播项目中显示第一行div时，另一个内部div需要根据宽度自动移动到下一级别。

带有Bootstrap布局的jQuery UI Draggable: jQuery可拖动元素属于bootstrap样式列（col- *）。例如，我有两个.row每个分为4列（使用col-md-3 ）。我试图让第一行列可拖动到第二行可放置列。但是当我拖动’Drag＃’元素时，它们总是在’droppable’元素下面。我无法使用Bootstrap样式。有人可以解释为什么会发生这种情况并提供解决方案吗？ Bootply Exmple： http ： //www.bootply.com/THBX5GJnCn

将需要参数的匿名函数传递给另一个函数作为将分配给onclick的参数: 我有一个function，我想在整个程序中重用。基本上它是一个带有确认和取消按钮的引导对话框。我设置了辅助函数来接受两个匿名函数，一个用于取消，一个用于确认。我有一切工作，但我不知道如何在构建html时将其正确分配给onclick。我想避免使用全局变量，但这是我能够使用它的唯一方法。自定义function： function confirmMessageBox(msg, cancelFunc, confirmFunc) { var html = ‘ Confirmation Needed’ + msg + ‘CancelConfirm’; $(“#confirmMsgContainer”).html(html); $(‘#ConfirmMsgModal’).modal(‘show’); } 我必须这样做，onclick =“（’+ cancelFunc +’）（）”>因为如果我这样做，onclick =“’+ cancelFunc（）+’”>它显示为未定义。目前的方法基本上只是打印匿名函数并将其分配给onclick（几乎就像我刚刚在onclick上输入了匿名函数）这是我调用函数的地方： var transTypeHolder; $(“input[name=’transType’]”).click(function () { var tabLength = $(‘#SNToAddList tbody tr’).length; if (tabLength == 0) { var selection = $(this).attr(“id”); serialAllowableCheck(selection); resetSerialNumberCanvasAndHide(); $(“#Location”).val(“”); […]

在数据表的分页控件中显示没有省略号的页面: 我正在使用带有Bootstrap的jQuery Datatables JS，我遇到了一个问题，其中有一个解决方法，但它不是最好的。问题：我的表包含超过4k的记录如果在桌子上工作的人需要从记录200到300工作并且为了方便，他需要在页面中看到10条记录，然后他可以点击页码上的5，然后点击6，然后点击7一直到第20页。（我知道周围的工作将是显示100条记录，只需点击第3页就可以从200开始，但正如我所说，由于他们的工作，他们更容易看到不超过10每页-20条记录）。下面的图片显示，当我到达第5页时，我无法访问除第一页，最后一页，下一页或上一页之外的其他页面是否有任何设置我可以说显示所有页面？这个表是在服务器端处理的，我添加了选项： ‘sPaginationType’ : ‘full_numbers’, 编辑： j$(document).ready(function() { j$(‘#sharkTankTable’).dataTable({ ‘aoColumns’: aoColumns, ‘sPaginationType’: ‘listbox’, // ‘pageLength’: 10, // // ‘sPaginationType’: ‘ellipses’, // ‘iShowPages’: 10, ‘bProcessing’: true, ‘bServerSide’: true, // ‘sPaginationType’ : ‘full_numbers’, ‘sDom’: ‘Tlfrtip’, ‘bFilter’: true, ‘tableTools’:{“sSwfPath”: “//cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/swf/copy_csv_xls_pdf.swf”}, ‘sAjaxSource’: ‘fakeUrl’, ‘fnServerData’: function(sSource, aoData, fnCallback) { …..

Twitter引导下拉菜单会在单击时禁用按钮的原始function: 所以我刚开始使用bootstrap的下拉菜单。这很方便，但我遇到了问题。为了使下拉菜单起作用，在添加html属性data-toggle=”dropdown”时，似乎完全禁用了触发下拉列表（.dropdown-toggle）的元素的原始函数。这是有道理的，因为你真的不希望下拉切换进行其他神奇的事情（尤其是当你试图访问菜单时重定向到新的页面或锚点）。但是，我有一个提交按钮，当你点击它时通过ajax保存一些东西。我希望在执行保存后出现下拉菜单。如何在单击按钮时切换下拉菜单并执行ajax请求？或者甚至更奇怪的是，如何在保留按钮的原始function的同时切换下拉菜单？也许twitter bootstrap下拉菜单不适合这个？或者有修改吗？

无法通过单击重新打开下拉列表: 我有一个由angularjs和bootstrap制作的网页，但不是ui-bootstrap 。有一个drop-down list和一个iframe 。问题是当下拉列表打开时，单击iframe不会自动关闭下拉列表。我按照这个答案添加了以下内容： $(window).on(‘blur’,function() { $(‘.dropdown-toggle’).parent().removeClass(‘open’); } ); 现在，单击iframe会关闭下拉列表。但是，在关闭之后，单击下拉按钮将不会重新打开列表; 我们必须单击iframe以外的其他位置或单击下拉按钮一次，然后再次单击下拉按钮打开列表。很抱歉，我无法在游乐场重现问题，但似乎是“只有第二次点击才能打开下拉列表”这一常见问题。我试图删除data-toggle=”dropdown” ，但它没有帮助。有谁知道我可以尝试解决这个问题？

Bootstrapvalidation器 – 下拉列表: 这是HTML和JavaScript代码： #bootstrapSelectForm .selectContainer .form-control-feedback { /* Adjust feedback icon position */ right: -15px; } Language Arabic English French German Other Validate 这是JavaScript的代码： $(document).ready(function() { $(‘#bootstrapSelectForm’) .find(‘[name=”language”]’) .selectpicker() .change(function(e) { // revalidate the language when it is changed $(‘#bootstrapSelectForm’).formValidation(‘revalidateField’, ‘language’); }) .end() .formValidation({ icon: { valid: ‘glyphicon glyphicon-ok’, invalid: ‘glyphicon glyphicon-remove’, validating: ‘glyphicon glyphicon-refresh’ }, excluded: […]

使用“关闭”按钮时，Popover仅在每次单击时显示: 我在一个页面上有多个弹出窗口，他们都有一个关闭按钮。如果我通过点击打开它的相同按钮来关闭popover，我没有问题。当我点击popover中的一个dismiss按钮时出现问题。当我点击弹出窗口中的关闭按钮时，弹出窗口关闭，但是下次我单击打开它时，它不会打开。只有在我第二次点击按钮时才会打开。 HTML： <button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" data-content="YesNo” title=”Delete this”>Delete this JS： $.fn.extend({ popoverClosable: function (options) { var defaults = { html: true, template: ‘\ \ \ ×\ \ \ \ ‘ }; options = $.extend({}, defaults, options); var $popover_togglers = this; $popover_togglers.popover(options); $popover_togglers.on(‘click’, function (e) { e.preventDefault(); $popover_togglers.not(this).popover(‘hide’); }); […]