Questions tagged «twitter-bootstrap»

我有一个bootstrap 2.32模态，试图将其动态插入另一个视图的HTML中。我正在使用Codeigniter 2.1。在向视图中动态插入引导模式部分视图之后，我具有： <div id="modal_target"></div> 作为要插入的目标div。我的视图中有一个按钮，看起来像： <a href="#message" class="btn btn-large btn-info" data-action="Message" data-toggle="tab">Message</a> 我的JS有： $.ajax({ type : 'POST', url : "AjaxUpdate/get_modal", cache : false, success : function(data){ if(data){ $('#modal_target').html(data); //This shows the modal $('#form-content').modal(); } } }); 主视图的按钮是： <div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div> 这是我想作为局部视图单独存储的内容： <div id="form-content" …

92 javascript  jquery  css  twitter-bootstrap  twitter-bootstrap-2 

是否可以使侧边栏导航始终固定在流体布局中的滚动上？

92 css  twitter-bootstrap  css-position  fluid-layout 

我最初使用HTML，CSS和JavaScript创建了一个Web应用程序，然后又被要求在Bootstrap中再次创建它。我做得很好，但是我在Web应用程序中将切换按钮改回了单选按钮（最初是复选框），而不是原来的切换按钮。 按钮的代码为： <label> Notifications <span class='toggle'> <input type='radio' class='notifications' name='notifications' id='notifications' /> </span> </li> <label> Preview <span class='toggle'> <input type='radio' class='preview' name='preview' id='preview' /> </span> </li> HTML页面链接到的JavaScript和CSS文件是： <script src = 'jqtouch.js'></script> <script src="jquery.js"></script> <script src="js/bootstrap.js"></script> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/bootstrap-responsive.css" rel="stylesheet"> 有没有办法更改代码，以便可以将切换按钮找回来？

92 javascript  jquery  css  twitter-bootstrap  jqtouch 

我有这个代码： <footer class="row"> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 1</li> <li>Text 2</li> <li>Text 3</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 4</li> <li>Text 5</li> <li>Text 6</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 7</li> <li>Text 8</li> <li>Text 9</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 10</li> <li>Text 11</li> <li>Text 12</li> </ul> …

92 html  css  twitter-bootstrap  twitter-bootstrap-3  responsive-design 

这很烦人-当我在Bootstrap下拉菜单中单击某个项目时，该下拉菜单不会关闭。当您单击下拉项时，我将其设置为打开Facebox灯箱，但是它有问题。 我尝试过的 单击该项目后，我尝试执行以下操作： $('.dropdown.open').removeClass('open'); $('.dropdown-menu').hide(); 这将其隐藏起来，但是由于某种原因，它将无法再次打开。 如您所见，我确实需要关闭下拉菜单，因为它在保持打开状态时显得cr脚（主要是因为z-index下拉菜单的高于Facebox模式框叠加层。 为什么我不使用Bootstrap的内置模式框 如果您想知道为什么我不使用Bootstrap内置的漂亮模态框，那是因为： 它没有办法使用AJAX将内容加载到其中。 您每次必须为模式输入HTML；使用Facebox，您可以执行以下操作：$.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'}); 它使用CSS3动画进行动画处理（看起来很不错），但是在非CSS3浏览器中它只是显示出来，看上去并不那么好。Facebox使用JavaScript淡入，因此可在所有浏览器中使用。

92 jquery  twitter-bootstrap 

一个人如何将链接放在带有自举程序的按钮上？ 引导程序文档中有4种方法： <a href="#" class="btn btn-info" role="button">Link Button</a> <button type="button" class="btn btn-info">Button</button> <input type="button" class="btn btn-info" value="Input Button"> <input type="submit" class="btn btn-info" value="Submit Button"> 第一个不适用于我，没有按钮显示，只有带有链接的文本，让我感觉到主题正在使用。 第二个显示的是我想要的按钮，但是单击什么代码会使按钮链接到另一页？ 干杯

92 html  twitter-bootstrap  button  hyperlink 

<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-8"> <div v-for="job in job"> <div class="text-center"> <h1>{{ job.job_title }}</h1> <p><strong>Google Inc. </strong> - {{ job.location }}</p> <h2><u>Job Description</u></h2> </div> <p v-html="desc"></p> <p class="text-center">Posted: {{ formatDate(job.date_created) }}</p> <button v-on:click="applyResume()" id="apply-btn" class="btn btn-primary">{{ buttonText }}</button> </div> </div> <div class="hidden-sm-down col-md-4"></div> </div> </div> 无法弄清楚如何使此按钮居中。在BS 3中，我将仅使用中心块，但这不是BS4中的选项。有什么建议吗？

92 css  twitter-bootstrap  bootstrap-4 

我是一个菜鸟，所以我认为我正在使用twitter bootstrap modal监视某些事情（可能很明显）。我正在尝试做的是获得一个仅在移动设备上启动的模式。在模式div上添加类.visible-phone，效果很好。到目前为止，一切都很好。但是我希望它能正常工作，这意味着您可以使用X按钮将其关闭。而且我无法使用该按钮。 <div class="modal visible-phone" id="myModal"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h3>text introductory<br>want to navigate to...</h3> </div> <div class="modal-body"> <ul class="nav"> <li> ... list of links here </li> </ul> </div> </div> 在html的底部，我放置了jquery.js（第一个），bootstrap.modal.js和bootstrap.transition.js。实际上，所有的bootstrap js模块（不要错过一个include）。我对js没有经验。 如果我提出了一个非常愚蠢的问题，请原谅我。我在日志中找不到针对此特定情况的答案。

91 twitter-bootstrap  modal-dialog 

我正在使用premailer-rails3可以为html电子邮件内联样式的gem，并且我正在尝试使其与Twitter引导程序一起使用。 https://github.com/fphilipe/premailer-rails3 看起来有些样式可以正确输入，但不是全部。我想知道是否有人将Twitter Bootstrap CSS（修改或未修改）放入html电子邮件中，这是一个很好的工作示例。 谢谢！

91 html  twitter-bootstrap  html-email 

我正在使用twitter的bootstrap CSS框架（太棒了）。对于某些给用户的消息，我正在使用警报Javascript JS和CSS来显示它们。 对于那些感兴趣的人，可以在这里找到：http : //getbootstrap.com/javascript/#alerts 我的问题是这个；在向用户显示警报后，我希望它在一段时间后消失。根据twitter的文档和我浏览过的代码来看，它似乎不存在： 我的第一个问题是要求确认是否确实没有引入Bootstrap中 其次，如何实现这种行为？

90 javascript  jquery  css  twitter-bootstrap  alert 

我正在使用Twitter Bootstrap，并试图将按钮置于表格单元格的中央。我只需要垂直居中即可。 <table class="table table-bordered table-condensed"> <tbody> <tr> <td><a href="#" class="btn btn-primary"><i class="icon-check icon-white"></i></a></td> <td><a href="#">Todo Item One</a><br /><span class="label label-success">One thing</span></td> </tr> </tbody> </table> 请参阅我的JSFiddle以获得该问题。我尝试了一些我知道的表格居中技巧，但似乎都无法正常工作。有任何想法吗？提前致谢。 更新：是的，我已经尝试过了vertical-align:middle;，如果它是内联的，那行得通，但是如果它在具有的类中，那行不通td。更新了JSFiddle以反映这一点。 最终更新：我是个白痴，没有检查bootstrap.css是否覆盖了它

90 css  twitter-bootstrap 

我正在尝试在我的应用程序中使用Bootstrap工具提示。我的应用程序正在使用AngularJS，目前，我有以下内容： <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left"> Tooltip on left </button> 我想我需要使用 $("[data-toggle=tooltip]").tooltip(); 但是，我不确定。即使我在上面添加了一行，我的代码也无法正常工作。我试图避免使用UI引导程序，因为它具有超出我所需的功能。但是，如果我只需要包含工具提示，就可以接受。但是，我不知道该怎么做。 有人可以教我如何使AngularJS使用Bootstrap工具提示吗？

90 angularjs  twitter-bootstrap  twitter-bootstrap-tooltip 

我的表格在桌面上可以很好地显示，但是一旦尝试查看移动版本，我的表格最终对于移动设备屏幕来说太宽了。我正在使用响应式布局。 如何为移动视图设置表格宽度？还有什么其他替代方法可以使用Bootstrap在移动视图上显示表格数据？

90 twitter-bootstrap  twitter-bootstrap-3 

我有一个模态，并且在该模态中，有一个下拉菜单显示较大的隐藏内容，该下拉列表正在运行。 现在，当您打开堆叠在第一个模态顶部的下一个模态并关闭它时，在下面的模态上的滚动将被禁用。 我创建了一个完整的示例，其中包括复制我面临的问题的步骤。你可以在这里看到它。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> <title></title> <style> </style> </head> <body> <input type="button" data-toggle="modal" data-target="#modal_1" class="btn btn-lg btn-primary" value="Open Modal 1" > <div class="modal fade" id="modal_1"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">First Modal</h4> …

90 jquery  html  twitter-bootstrap 

请参考下面的代码我尝试了什么 <div class="row"> <div class="center-block">First Div</div> <div class="center-block">Second DIV </div> </div> 输出： First Div SecondDiv 预期产量： First Div Second Div 我想使用引导CSS将两个div水平居中对齐到页面。我怎样才能做到这一点 ？我不想使用简单的CSS和浮动概念来做到这一点。因为我需要使用bootstrap css来处理所有类型的布局（即所有窗口大小和分辨率），而不是使用媒体查询。

90 html  css  twitter-bootstrap