Tag: twitter bootstrap

在表单提交上显示Twitter Bootstrap模式

我试图在提交表格时显示模态，例如： form有两个文本字段，如果其中一个填充，那么modal将向用户显示一些信息，如果两个字段都没有填写，那么表单将不会提交为此我做了这个但没有成功.. jsfiddle： jsFidle Link × Modal header do you want to save partial info Finish Now Do It Later Confirm JS： $(function(){ $(“#refrenceSubmit”).submit(function(){ var inputFieldsCount=0; $(this).find(‘input[type=text]’).each(function(){ if($(this).val() != “”) inputFieldsCount+=1; }); if(!inputFieldsCount){ alert(“You must fill in at least one field”); return false; }else if(inputFieldsCount<2){ $('#confirmButton').click() $('#showModelContainer').show() $('#doItLater').click("click",function (e) { $('#refrenceSubmit').submit() } }); return false; […]

在Bootstrap Select插件中选择all / Unselect all

2″> All Ratings EC (Early Childhood) E (Everyone) E10+ (Everyone 10+) T (Teen) M (Mature) AO (Adults Only) 在上面的html中，有值为All选项。 如果选择了该选项，我想选择所有项目，如果取消选择此选项，则取消选择全部。 我认为这样做很简单，但我无法$(‘#divRatings’).change(function(){//some logic});为什么$(‘#divRatings’).change(function(){//some logic});上没有任何$(‘#divRatings’).change(function(){//some logic}); 我选择/取消选择项目的function： function toggleSelectAll(control) { if (control.val().indexOf(“All,”) > -1) { control.selectpicker(‘selectAll’); } else { control.selectpicker(‘deselectAll’); } } JSFiddle的例子

专注于引导选项卡中的必填字段

下午，我使用PHP，HTML5和Bootstrap。 我已经构建了一个分隔5个选项卡的表单，在这个表单中有几个必填字段。 所需的所有输入字段均为“text”，并且还标有required =“required”aria-required =“true”。 在提交时，如果在当前选项卡上，html5validation会捕获错误，但是我想使用一些jquery来重新关注尚未填充的正确选项卡和输入字段并显示警告框。 我不确定这是否可行.. 要么就是这样，如果更容易检查选项卡上的选项卡需要字段更改.. 页面上只有一个表单。 非常感谢 **编辑**我在修补后为必填字段创建了一个警报function，但它仍然不会改变选项卡以专注于必填字段。 ‘productbutton’是整个表单的提交按钮的ID。 ‘product_form’是我表单的ID。 $(‘#productbutton’).click(function(){ var error = 0; var msg = ‘An Error Has Occured.\n\nRequired Fields missed are :\n’; $(‘:input[required]’, ‘#product_form’).each(function(){ $(this).css(‘border’,’2px solid green’); if($(this).val() == ”){ msg += ‘\n’ + $(this).attr(‘id’) + ‘ Is A Required Field..’; $(this).css(‘border’,’2px solid red’); if(error == 0){ $(this).focus(); […]

使用jQuery动画Bootstrap进度条宽度

我想在2.5秒内将进度条的宽度从0％设置为70％。 但是，下面的代码会在2.5秒延迟后立即将宽度更改为70％。 我错过了什么？ $(“.progress-bar”).animate({ width: “70%” }, 2500); JSFiddle： http ： //jsfiddle.net/WEYKL/

BootStrap DatePicker NoConflict

根据该文件： https ： //github.com/eternicode/bootstrap-datepicker#no-conflict bootstrap datepicker现在可以使用noConflict： var datepicker = $.fn.datepicker.noConflict(); $.fn.bootstrapDP = datepicker; // give $().bootstrapDP the bootstrap-datepicker functionality 它说“给$（）。bootstrapDP bootstrap-datepickerfunction”，这是什么意思？ 这是否意味着我可以使用$(“#object”).bootstrapDP()而不是$(“#object”).datepicker() ？ 我在firefox中尝试过它（仅用于测试，实际上与任何js没有冲突），但是“date-choose”没有显示，并且没有出现错误（来自firebug），这很奇怪。 以下是我的代码： HTML JS $(function(){ var datepicker = $.fn.datepicker.noConflict; $.fn.bootstrapDP = datepicker; $(“#dp3”).bootstrapDP(); }); 当我用$(“#dp3”).datepicker()替换脚本时，将显示“date-choose”。 谁能告诉我如何使用noConflict来引导datepicker？

选择当前日期后，bootstrap-datepicker清空字段

如果我启用了自动关闭，并且我从已选择的日历中选择了该字段，则会清空该字段，然后按预期关闭日期选择器。 我怎样才能使用autoclosefunction，但不能将其清空？ 查看演示示例， http：//eternicode.github.io/bootstrap-datepicker/？markup = input＆format =＆weekStart =＆startDate =＆endDate =＆startView = 0＆minViewMode = 0＆todayBtn = false＆language = en＆Orientation = auto＆multidate =＆multipledateSeparator =＆autoclose = on＆ keyboardNavigation = ON＆forceParse =上＃沙箱 确保autoclose已打开 选择一个日期。 再次打开日期选择器，再次选择当前选择的日期。 字段再次为空 谢谢

bootstraps 4错误：折叠正在转换

任何人都可以帮助我解决转换问题bootstrap 4.这是犯错误未捕获错误：崩溃是转换问题只有当不包括bootstrap css。 在我的情况下bootstrap css冲突我的大css。 任何人都可以帮助解决这个地狱 Collapsible Group Item #1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Collapsible Group Item #2 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

延迟后显示Bootstrap模态

如何在2秒后显示Bootstrap模态而不通过按钮触发模态？ ×Close Modal title … Close Save changes

如何在旋转木马div之外放置Bootstrap Carousel图像标题？

如果在这里任何地方都有这个问题，请道歉。 我尝试搜索，但只找到与轮播代码中的样式和定位标题相关的主题… 所以，我有一个包含三列的布局： 左列包含与每个页面/项目相关的一般信息。 中间列包含带图像的Bootstrap 3轮播。 右栏是我计划在中心Carousel中显示与图像相关的所有标题的地方。 我无法弄清楚如何让标题在右列中运行。 为了澄清，字幕将随每个轮播幻灯片而改变，就像它们在默认轮播设置中一样。 我基本上想要从图像移动标题，并进入右列。 我使用Kirby（www.getkirby.com）作为我的CMS，我使用foreach循环来获取旋转木马中的图像等代码。 这是我当前的代码，包括标题部分（我试图移动……） children()->first() ?> hasImages()): ?> images() as $image): $n++; ?> <div class="item”> <img style="display:block; margin-left: auto; margin-right: auto;" src="https://stackoverflow.com/questions/20437925/how-to-place-bootstrap-carousel-image-captions-outside-the-carousel-div/url() ?>” alt=”title()) ?>” class=”img-responsive”> https://stackoverflow.com/questions/20437925/how-to-place-bootstrap-carousel-image-captions-outside-the-carousel-div/img_title() ?> THIS IS WHERE I AM TRYING TO PUT THE CAROUSEL CAPTIONS… 我已经尽了最大努力，但我完全没有想法。 我想也许我可以做一些像使标题变量的东西： img_title() ?> 但这在旋转木马区域以外不起作用。 我猜它是不会在foreach循环之外工作的？ 无论如何，如果有人有任何建议我会非常感激。 我正在学习PHP，但我不知道任何javascript，所以我希望有一个解决方案。 […]

使用validate插件的Jquery bootstrap select2插件问题

在我的bootstrap项目中，我正在尝试使用插件select2，但我意识到如果你使用这个插件不再能够使用validate插件validation我的表单中的选择字段。 我会避免使用商业插件bootstrapvalidation器.. Foo 1 2 Bar 1 2 VALIDATE JS /* select 2 plugin */ $(‘select#foo’).select2(); /* Validation */ $(“#test_form”).validate({ rules: { foo: { required: true }, bar: { required: true } }, errorPlacement: function (error, element) { $(element).addClass(‘err’); }, success: function (label, element) { $(element).removeClass(‘err’); }, submitHandler: function(form) { alert(“validation ok”); } }); 在您看来，我该如何解决这个问题？ […]