Tag: twitter bootstrap 3

选中checkbox后，dynamic更改引导程序进度栏值: 我正在尝试使用引导程序进度条制作dynamic清单。这是我的标记代码 <div class="progress progress-striped active"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> </div> </div> <div class="row tasks"> <div class="col-md-6"> <p><span><?php echo $title; ?></span><?php echo $description; ?></p> </div> <div class="col-md-2"> <label><?php echo $date; ?></label> </div> <div class="col-md-2"> <input type="checkbox" name="progress" class="progress" value="<?php echo $progress; ?>"> </div> <div class="col-md-2"> <input type="checkbox" name="done" class="done" value="<?php echo $done; ?>"> […]

Bootstrap3 .visible- * .hidden- *内联显示: Bootstrap有一些很好的.visible-* （例如.visible-lg ）类实用程序，用于根据屏幕大小select要显示或隐藏的内容。使用这些类时，它将应用样式display: block !important; 当在正确的屏幕尺寸。但有时候，我想用它来显示一些inline或inline-block元素。我怎么能干净地覆盖一些引导规则有select？或者它应该是一个自举function请求？编辑似乎我不是唯一一个想知道这个问题的人。这是github问题。感谢您的最新答案！

保持文本环绕引导3响应式devise: 我有一个查看器与控制栏组成的连续divs。其他项目的FA图标已经在文本上，所以没有屏幕大小的问题，但为了区分具有更高级别控制的两个button来切换查看器中的内容。它们的布局如下所示： <i class="fa fa-toggle-right lg"></i> <span style="font-size:18px;">Next 当这个图像显示在像iPhone这样的小屏幕上时，图标移动到文本上，我希望它保持在它旁边。原因是另一个button，然后与它下面的图标排队，这是不好看的用户界面。 Previous<i class="fa fa-toggle-left lg"></i> 任何选项，如何防止他们包装？

把search图标靠近文本框使用引导: 我使用引导默认文本框采取全列的宽度，我想把search图标结束文本框。我的代码是这样的： <div class="container"> <div class="row"> <div class="form-group col-lg-4"> <label class="control-label">Name</label> <input id="txtName" class="form-control input-sm" /> <span class="glyphicon glyphicon-search"></span> </div> <div class="col-lg-4"></div> <div class="col-lg-4"></div> </div> </div> 我不想使用input组。请build议一个替代方式或替代HTML与CSS。

Bootstrap 3格没有差距: 我试图创build一个2列网格，字面上50％没有利润率或填充。我如何用Bootstrap 3实现这一点我试过这个，但在平板电脑/台式机断点处最终出现负边限： HTML <div class="container"> <div class="row"> <div class="col-sm-6 offset-0">Col 1</div> <div class="col-sm-6 offset-0">Col 2</div> </div> </diV> CSS .container { background: green; overflow: hidden; } .row > * { background: blue; color: #fff; } .row :first-child { background: red; } .offset-0 { padding-left: 0; padding-right: 0; } DEMO – http://jsfiddle.net/pjBzY/

文本旁边的品牌: 我如何将Bootstrap品牌和任何相关文字作为品牌一起对待？我试过这个： <nav class="navbar navbar-default"> <div class="navbar-header"> <div class="navbar-brand"> <a href="…" ><img class="img-responsive" src="/brand.png")?>"></a> <h3>Ultimate Trade Sizer</h3> </div> </div> </nav> 但是，我不能让他们alignment（即并排）。它产生以下效果：请注意，我正在使用Bootstrap 3。

如何使Bootstrap旋转木马滑块使用移动左/右滑动: DEMO JSSFIDDLE <div class="col-md-4"> <!–Carousel–> <div id="sidebar-carousel-1" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators grey"> <li data-target="#sidebar-carousel-1" data-slide-to="0" class="active"></li> <li data-target="#sidebar-carousel-1" data-slide-to="1"></li> <li data-target="#sidebar-carousel-1" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <a href="" data-lightbox="image-1" title=""> <img src="http://shrani.si/f/3D/13b/1rt3lPab/2/img1.jpg" alt="…"> </a> </div> <div class="item"> <a href="" data-lightbox="image-1" title=""> <img src="http://shrani.si/f/S/jE/UcTuhZ6/1/img2.jpg" alt="…"> </a> </div> <div class="item"> <a href="" data-lightbox="image-1" title=""> […]

你如何使Twitter Bootstrap手风琴保持开放？: 我试图模仿使用Twitter引导使用手风琴和崩溃插件的Outlook栏，到目前为止，我得到了崩溃和手风琴的工作，但它目前允许所有部分被折叠。我想限制它，只有一个总是显示。这是我正在工作的一个： http : //jsfiddle.net/trajano/SMT9D/我认为这是沿线的某处 $('#accordions').on('hide', function (event) { console.warn("HIDE TRIGGERED, check if trying to hide the active one if so stop"); })

使用Bootstrap3的响应时间线用户界面: 我怎样才能创build一个垂直的时间线栏，在桌面上显示为中间的时间线栏和两侧的事件框的用户界面。在较小的手机屏幕上，左侧的时间轴和右侧的所有事件框。结合使用JQuery和响应类是好的，只需要显示所有的事件框，所以用xs-hidden隐藏替代框就不行了。 JS小提琴： http : //jsfiddle.net/n82ek/2/ 减小结果窗口的扩展大小以查看响应行为。什么需要发生？移动栏左边的XS显示尼斯有：还添加时间线在框旁边线。请参考附带的示例时间线UI模式图像….谢谢！当前HTML： <div class="container"> <div class="timelineBar"></div> <div class="timelineDot"></div> <div class="row"> <div class="col-sm-6"> </div> <div class="col-sm-6"> <div class="shadowBox">right</div> </div> </div> <div class="row"> <div class="col-sm-6"> <div class="shadowBox">left</div> </div> <div class="col-sm-6"> </div> </div> <div class="row"> <div class="col-sm-6"> </div> <div class="col-sm-6"> <div class="shadowBox">right</div> </div> </div> <div class="row"> <div class="col-sm-6"> […]

在Twitter Bootstrap中绑定到Collapse事件3: 假设我有Bootstrap崩溃： <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa […]