Questions tagged «twitter-bootstrap»

Bootstrap是一个前端框架，旨在启动Web应用程序和网站的开发。对于与Bootstrap版本有关的问题，请使用“ twitter-bootstrap-2”，“ twitter-bootstrap-3”和“ bootstrap-4”标签中特定版本的标签。

7
如何更改移动版式上的Bootstrap 3列顺序？
我正在使用顶部固定的导航栏进行响应式布局。在下面，我有两列，一列用于侧栏（3），一列用于内容（9）。在桌面上看起来像这样 导航栏 [3] [9] 当我resize将其navbar压缩并隐藏时，侧边栏会堆积在内容的顶部，如下所示： 导航栏 [3] [9] 我想要顶部的主要内容，因此我需要将移动设备的顺序更改为此： 导航栏 [9] [3] 我发现这篇文章涵盖了相同的要点，但是对可接受的答案进行了编辑，说该解决方案不适用于当前版本的Bootstrap。 如何在移动设备上重新排列这些列？或者，如何将sidbar列表组放入正在扩展的导航栏中？ 这是我的代码： <div class="navbar navbar-inverse navbar-static-top"> <div class="container"> <a href="#" class="navbar-brand">Brand Title</a> <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="collapse navbar-collapse navHeaderCollapse"> <ul class="nav navbar-nav navbar-right"><!--original navbar--> <li class="active"><a href="#">Home</a></li> <li><a href="#">FAQ</a></li> …
10
在Bootstrap v4中缺少可见**和隐藏**
在Bootstrap v3中，我经常将hidden-**类与clearfix结合使用以控制不同屏幕宽度下的多列布局。例如， 我可以在一个DIV中合并多个hidden-**，以使我的多列在不同的屏幕宽度下正确显示。 例如，如果我要显示产品照片行，则在大屏幕上每行显示4张，在小屏幕上每行显示3张，然后在非常小的屏幕上每行显示2张。产品照片的高度可能不同，因此我需要使用clearfix来确保行正确地断开。 这是v3中的一个示例... http://jsbin.com/tosebayode/edit?html,css，输出 现在，v4取消了这些类，并用可见/隐藏**-上/下类替换了它们，我似乎不得不对多个DIV执行相同的操作。 这是v4中的类似示例... http://jsbin.com/sagowihowa/edit?html,css，输出 因此，我已经从单个DIV变为必须添加具有很多上/下类的多个DIV以实现相同的目的。 从... <div class="clearfix visible-xs-block visible-sm-block"></div> 至... <div class="clearfix hidden-sm-up"></div> <div class="clearfix hidden-md-up hidden-xs-down"></div> <div class="clearfix hidden-md-down"></div> 在我忽略的v4中，有没有更好的方法可以做到这一点？
12
Twitter Bootstrap弹出窗口中的HTML
我正在尝试在自举弹出窗口中显示HTML，但不知为何它不起作用。我在这里找到了一些答案，但对我不起作用。如果我做错了事，请告诉我。 <script> $(function(){ $('[rel=popover]').popover({ html : true, content: function() { return $('#popover_content_wrapper').html(); } }); }); </script> <li href="#" id="example" rel="popover" data-content="" data-original-title="A Title"> popover </li> <div id="popover_content_wrapper" style="display: none"> <div>This is your div content</div> </div>
7
Twitter Bootstrap定制最佳实践
已关闭。这个问题是基于观点的。它当前不接受答案。 想改善这个问题吗？更新问题，以便通过编辑此帖子以事实和引文回答。 6年前关闭。 改善这个问题 我正在使用LESS使用Bootstrap 2.0.3。我想对其进行广泛的自定义，但是我希望避免在任何可能的情况下都对源进行更改，因为对库的更改非常频繁。我是LESS的新手，所以我不知道它的编译如何完全起作用。使用LESS或基于LESS的框架有哪些最佳实践？
24
如何使用JavaScript隐藏Bootstrap模态？
我已经读过这里的文章，Bootstrap网站以及疯狂的Googled-但找不到我确定这是一个简单的答案... 我有一个从link_to助手打开的Bootstrap模式，如下所示： <%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal", class: "btn btn-primary"} %> 在我的ContactsController.create操作中，我创建了代码，Contact然后传递给create.js.erb。在中create.js.erb，我有一些错误处理代码（ruby和javascript的混合）。如果一切顺利，我想关闭模式。 这是我遇到麻烦的地方。一切顺利的时候，我似乎无法拒绝这种模态。 我已经尝试过了$('#myModal').modal('hide');，这没有效果。我也尝试过$('#myModal').hide();使模式退出，但留下背景。 关于如何关闭模式和/或消除内部背景的任何指导create.js.erb？ 编辑 这是myModal的标记： <div class="modal hide" id="myModal" > <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>Add Contact</h3> <div id="errors_notification"> </div> </div> <div class="modal-body"> <%= form_for :contact, url: contacts_path, remote: true …
16
twitter bootstrap typeahead ajax示例
我正在尝试查找twitter bootstrap typeahead元素的工作示例，该示例将进行ajax调用以填充其下拉列表。 我有一个现有的工作jQuery自动完成示例，该示例定义了ajax URL以及如何处理回复 <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { var options = { minChars:3, max:20 }; $("#runnerquery").autocomplete('./index/runnerfilter/format/html',options).result( function(event, data, formatted) { window.location = "./runner/index/id/"+data[1]; } ); .. 我需要进行什么更改才能将其转换为预输入示例？ <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { var options = { source:'/index/runnerfilter/format/html', items:5 }; $("#runnerquery").typeahead(options).result( function(event, data, formatted) { window.location = "./runner/index/id/"+data[1]; } …
7
如何将Twitter Bootstrap工具提示绑定到动态创建的元素？
我正在使用带有JavaScript的Twitter引导工具提示，如下所示： $('a[rel=tooltip]').tooltip(); 我的标记如下所示： <a rel="tooltip" title="Not implemented" class="btn"><i class="icon-file"></i></a> 效果很好，但是我<a>动态添加了元素，而那些动态元素没有显示工具提示。我知道这是因为在完成典型的jquery $(document).ready(function()功能的文档加载后，我只绑定一次.tooltip（）。 如何将其绑定到动态创建的元素？通常我会通过jquery live（）方法来做到这一点。但是，我用来绑定的事件是什么？我只是不确定如何将bootstrap .tooltip（）与jquery .live（）挂钩。 我发现一种使这项工作可行的方法是这样的： /* Add new 'rows' when plus sign is clicked */ $("a.add").live('click', function () { var clicked_li = $(this).parent('li'); var clone = clicked_li.clone(); clone.find(':input').each(function() { $(this).val(''); }); clicked_li.after(clone); $('a[rel=tooltip]').tooltip(); }); 这行得通，但似乎有点骇人听闻。我还在$（ready）调用中调用完全相同的.tooltip（）行。那么，页面首次加载并与该选择器匹配时存在的元素是否以工具提示两次结束？ 我认为这种方法没有任何问题。我只是在寻找最佳实践或对行为的理解。
9
使按钮全角显示？
我希望按钮能占据列的整个宽度，但是有困难... <div class="span9 btn-block"> <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button> </div> 如何使按钮与列一样宽？
9
如何包括位于node_modules文件夹内的脚本？
我有一个关于node_modules纳入HTML网站的最佳做法的问题。 假设我的node_modules文件夹中有Bootstrap 。现在，对于网站的正式版，我将如何在node_modules文件夹内添加Bootstrap脚本和CSS文件？将Bootstrap保留在该文件夹中并执行以下操作是否有意义？ <script src="./node_modules/bootstrap/dist/bootstrap.min.js"></script> 还是我必须在gulp文件中添加规则，然后将这些文件复制到dist文件夹中？还是最好让gulp从我的HTML文件中完全删除本地引导程序，然后将其替换为CDN版本？
30
Bootstrap 3模态垂直位置中心
这是一个两部分的问题： 当您不知道模态的确切高度时，如何将模态垂直放置在中心？ 仅在模态超过屏幕高度的情况下，模态才能居中并在模型主体中具有overflow：auto吗？ 我试过使用这个： .modal-dialog { height: 80% !important; padding-top:10%; } .modal-content { height: 100% !important; overflow:visible; } .modal-body { height: 80%; overflow: auto; } 当内容远大于垂直屏幕大小时，这给了我所需的结果，但是对于较小的模态内容却几乎无法使用。
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.