Questions tagged «twitter-bootstrap»

我已经对StackOverflow和Google进行了彻底的搜索，但是空着。如果已经提出并解决此问题，请提前道歉。 注意：我是jQuery的新手，所以我不确定如何自己编写。我敢肯定这是一段简单的代码，但是我无法将其包裹住。 我想要做的是使用一个data-元素（例如：data-class或类似元素）将一个新类（或ID，我不再挑剔！）附加到顶级popover <div>。我目前拥有的代码如下： jQuery的： $('a[rel=popover]') .popover({ placement : 'bottom', trigger : 'hover' }) .click(function(e) { e.preventDefault() }); HTML： <a href="" rel="popover" data-class="dynamic-class" title="Title goes here" data-content="Content goes here"> 理想情况下，我会吐出的那种HTML是这样的： <div class="popover ... dynamic-class"> <!-- remainder of the popover code as per usual --> </div> 这是我能做的吗？引导程序站点中有关弹出窗口的文档有点稀疏，所以很遗憾，我花了一段时间才到达这一点:( 预先感谢您的所有回复！

72 jquery  css  twitter-bootstrap 

有谁知道可以通过Twitter Bootstrap在表格上应用样式吗？我可以在一些较旧的教程中看到一些表示例，但在Bootstrap网站本身上却看不到。 我尝试进行设置，但是页面中的表几乎没有样式适用于它们。 <table> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Language</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Some</td> <td>One</td> <td>English</td> </tr> <tr> <td>2</td> <td>Joe</td> <td>Sixpack</td> <td>English</td> </tr> </tbody> </table> 我需要申请什么课程？

72 twitter-bootstrap 

我在Bootstrap中使用Angular。这是参考代码： <form name="newUserForm" ng-submit="add()" class="" novalidate> <input type="text" class="input" ng-model="newUser.uname" placeholder="Twitter" ng-pattern="/^@[A-Za-z0-9_]{1,15}$/" required></td> <button type="submit" ng-disabled="newUserForm.$invalid" class="btn btn-add btn-primary">Add</button> </form> Bootstrap具有以下形式的无效字段样式input:invalid {.... }：这些字段在字段为空时开始。现在我也通过Angular进行了一些模式匹配。当“：invalid”关闭但“ .ng-invalid”打开时，这会产生奇怪的情况，这将需要我为“ .ng-invalid”类重新实现引导CSS类。 我看到两个选择，但都遇到麻烦 使Angular使用一些自定义类名而不是“ ng-valid”（我不知道该怎么做）。 禁用html5验证（我认为那是form标记中的“ novalidate”属性应该执行的操作，但由于某种原因无法使它起作用）。 此处的Angular-Bootstrap指令不涵盖样式。

72 twitter-bootstrap  angularjs 

我在某些我必须执行的Web应用程序中使用了Twitter Bootstrap（我不是Web开发人员），我找不到禁用表行的方法。 从Bootstrap文档中可以看到，默认的表格样式包含行。 问候，

72 css  twitter-bootstrap 

我刚刚使用新的Twitter Bootstrap版本启动了一个新项目：bootstrap3。我无法使Modal在远程模式下工作。我只想在单击链接时显示带有远程URL内容的模式。它可以工作，但模式布局已被完全破坏。 这是jsfiddle的链接：http : //jsfiddle.net/NUCgp/5/ 编码 ： <a data-toggle="modal" href="http://fiddle.jshell.net/Sherbrow/bHmRB/0/show/" data-target="#myModal">Click me !</a> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <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="modal-body"><div class="te"></div></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button …

72 twitter-bootstrap  modal-dialog 

我正在使用twitter-bootstrap，发现居中div具有类.btn-group（link）的位置相当困难。通常，我用 margin: 0 auto; 要么 text-align: center; 可以使div中的内容居中，但是当内部元素具有float: left在这种情况下用于视觉效果的属性时，它将不起作用。 http://jsfiddle.net/EVmwe/1

72 html  css  twitter-bootstrap 

我有一个输入元素，带有使用bootstrap-datepicker创建的附加datepicker。 <div class="well"> <div class="input-append date" id="dp3" data-date="2012-01-02" data-date-format="yyyy-mm-dd"> <input type="text" id="date-daily"> <span class="add-on"><i class="icon-th"></i></span> </div> </div> <script language="JavaScript" type="text/javascript"> $(document).ready(function() { $('#dp3').datepicker(); $('#date-daily').val('0000-00-00'); $('#date-daily').change(function () { console.log($('#date-daily').val()); }); }); </script> 当用户通过直接在输入元素中键入来更改日期时，我可以使用输入元素的onChange事件获取值，如上所示。但是，当用户从日期选择器更改日期时（即通过单击日历中的日期），则不会调用onChange处理程序。 如何检测通过日期选择器而不是通过输入输入元素对选定日期所做的更改？

72 jquery  twitter-bootstrap  datepicker  bootstrap-datepicker 

我有一个标头设置为的网站position: fixed。在我的一页上，我scrollIntoView(true)在一个元素上使用。我的问题是，当scrollIntoView被调用时，该元素位于标头下方。如何解决此问题，以便将元素显示在标题的正下方？ 我使用的是Bootstrap框架，标头的样式为navbar navbar-fixed-top。

72 javascript  twitter-bootstrap 

我正在使用Angular和Twitter Bootstrap导航栏，并尝试使折叠功能正常工作。 部分：program.html <div class="navbar navbar-inverse navbar-static-top" ng-include="'partials/navbar.html'" ng-controller="NavbarCtrl"></div> 部分：navbar.html <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">Short Course</a> <div class="nav-collapse collapse"> <ul class="nav"> <li><a href="#"><i class="icon-home icon-white"></i> Home</a></li> <li class="dropdown ng-class: settingsActive;"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Intro <b class="caret"></b></a> …

71 twitter-bootstrap  angularjs 

我正在使用Twitter Bootstrap-我不是前端开发人员！但是，这几乎使过程变得很有趣-我敢说-很有趣！ 我对工具提示有些困惑。它们已包含在文档中，但Twitter假定具备一些知识。例如，他们说要使用以下JavaScript代码触发工具提示。 $('#example').tooltip(options) 在探究它们的源代码之后，我意识到带有工具提示的字段必须在一个类中，并运行以下代码。 $('.tooltipclass').tooltip(options) 但是现在我的问题是，为什么Twitter Bootstrap不提供此类tooltip？只是为了允许更大的配置？将带有工具提示的单个元素添加到还是更好tooltipclass，还是应该将周围区域添加到tooltipclass？是否使用类标识符（.class）而不是名称标识符（#name）有关系吗？

71 javascript  twitter-bootstrap 

如何部署单选按钮组并使按钮之一预切换？ 我有一个带有星期几值的单选按钮组。这个： <div class="btn-group" data-toggle="buttons-radio"> <button class="btn" id="test0">Mon</button> <button class="btn" id="test1">Tue</button> <button class="btn" id="test2">Wed</button> <button class="btn" id="test3">Thu</button> <button class="btn" id="test4">Fri</button> <button class="btn" id="test5">Sat</button> <button class="btn" id="test6">Sun</button> </div> 我需要的是获取当前日期值（使用var currentDay = new Date().getDay()）并toggle（激活）组中的相应按钮。 我正在尝试用下一个代码切换它（仅出于测试目的）： $("#test0").button('toggle') 这是行不通的。

71 jquery  twitter-bootstrap 

<select>在Bootstrap 3中设置表单元素的样式时，它将在OS X的Firefox中呈现一个难看的按钮： （http://bootply.com/98385） 显然，这已经是一段时间以来的已知问题了，并且有许多hack和变通办法，但没有一个很干净（ https://github.com/twbs/bootstrap/issues/765）。我想知道是否有人使用Bootstrap下拉列表或其他插件找到了解决此问题的好方法。我故意选择使用HTML<select>而不是Bootstrap下拉列表，因为在移动设备上使用长列表时，可用性更好。 这是Firefox问题还是Bootstrap问题？ 详细信息：Mac OS X 10.9，Firefox 25.0.1 更新12/4/13：我对每种浏览器如何<select>使用Firefox，Chrome和Safari在OS X 10.9上呈现的进行了并排比较，以响应@zessx（使用http://bootply.com / 98425）。显然，<select>表单元素在浏览器和操作系统之间的呈现方式之间存在很大差异： 我了解，<select>根据您使用的操作系统，对标签的处理方式有所不同，因为存在基于操作系统的本机控件来指示样式和行为。但是，class="form-control"导致Bootstrap的<select>表单元素在Firefox中看起来与众不同的原因是什么？为什么<select>Firefox中默认的未设置样式的样式看起来可以，但是一旦被设置样式，则看起来很难看？

71 css  twitter-bootstrap  twitter-bootstrap-3 

我正在使用Bootstrap，我想将整个区域设置为btn-group其父元素的宽度的100％。我也希望内部按钮采用相同的宽度。就那样，我也无法实现。 我在这里做了一个JSFiddle：http : //jsfiddle.net/BcQZR/12/ 这是HTML： <div class="span8 background"> <div class="btn-group btn-block" id="colours"> <span class="btn"><input type='checkbox' name='size' value='red'/>red</span> <span class="btn"><input type='checkbox' name='size' value='orange'/>orange</span> <span class="btn"><input type='checkbox' name='size' value='yellow'/>yellow</span> </div> <!-- /btn-group --> </div> 这是我当前的CSS，它不起作用： #colours { width: 100%; }

71 css  twitter-bootstrap 

我可以检查Bootstrap Modal当前是否以编程方式显示/隐藏？ 喜欢 bool a = if("#myModal").shown();吗？ 我需要对/错

71 javascript  twitter-bootstrap  twitter-bootstrap-3  bootstrap-modal 

我在模态对话框启动程序内的jQuery自动完成功能中出现显示问题。 当我滚动鼠标时，结果不会保持附加到输入中。 有办法解决吗？ 在这里JsFiddle： .ui-autocomplete-input { border: none; font-size: 14px; width: 300px; height: 24px; margin-bottom: 5px; padding-top: 2px; border: 1px solid #DDD !important; padding-top: 0px !important; z-index: 1511; position: relative; } 编辑 我发现了问题： .ui-autocomplete { position: fixed; ..... } 如果模态已经滚动，问题仍然存在！ 在这里JsFiddle / 1。

71 jquery  twitter-bootstrap  jquery-ui-autocomplete  bootstrap-modal