Questions tagged «twitter-bootstrap»

如何设置没有背景色的导航栏？ div后向下滚动时，导航栏将获得新的背景色（导航栏应固定在顶部，我navbar-fixed-top在Bootstrap中使用） 我尝试了一些教程，但没有成功。 这是网站：http : //attafothman.olympe.in/ 我在说的是顶部的黑色导航栏。

71 javascript  jquery  html  css  twitter-bootstrap 

使用Bootstrap 3，如何将下拉菜单放在光标处并从代码中打开它？ 我需要在表上使用它作为其行的上下文菜单。

70 jquery  twitter-bootstrap  twitter-bootstrap-3 

我整天都在进行调查，因为我认为花一些时间来学习定制Bootstrap的最佳实践是值得的。 我可以看到有一个友好的页面可用于从http://twitter.github.io/bootstrap/customize.html中有选择地自定义元素，但是我想拥有比这更多的控制权而不接触原始的引导程序源文件。 首先，我基本上想测试一下将网格从12列更改为16列的方法，为此，我创建了自己的变量less文件，并添加了@gridColumns：16;。仅将其导入到此文件中，并在bootstrap.less内部导入此自定义项，如下所示。 // Core variables and mixins @import "variables.less"; // Modify this for custom colors, font-sizes, etc @import "mixins.less"; **@import "../custom-variables.less"; //Override variables** 然后，使用WinLess，我编译了bootstrap.less文件，以使用覆盖的变量import调用获取新的bootstrap.css，并将CSS与html文件链接在一起，但是网格不会更改为16列。 谁能指出我做错了吗？

70 variables  twitter-bootstrap  customization  less 

我想将AngularJS和Twitter Bootstrap结合到一个新的Web应用程序中。似乎已为Bootstrap编写了AngularJS指令。 但是，仔细看，这些指令似乎并不涵盖所有的Bootstrap。我可以将AngularUI引导程序代码与原始引导程序结合使用以获得完整性吗？首先可以做到吗？ 我偶然发现了另一个名为AngularStrap的Angular项目。我可以将所有三个结合吗？ 结合AngularJS和Twitter Bootstrap以获得完整性的最佳方法是什么？

70 javascript  angularjs  twitter-bootstrap  angular-ui-bootstrap  angular-strap 

已关闭。这个问题是基于观点的。它当前不接受答案。 想改善这个问题吗？更新问题，以便通过编辑此帖子以事实和引用的形式回答。 7年前关闭。 改善这个问题 我想开始对最近启动的Django应用程序使用Twitter的Bootstrap。我在Django方面有很多经验，但是我对Bootstrap完全陌生。 最好的进行方法是什么？是否有您会推荐或有经验的Django专用Boostrap应用程序？ 我了解我可以直接使用Bootstrap，而无需任何特定于Bootstrap的特殊Django应用。但是，我还读到，没有服务器端的支持（例如，将特定于Bootstrap的CSS渲染到HTML表单中），表单渲染的效果就不会很好。 似乎有几个项目，例如酥脆的表格，django-bootstrap-toolkit等。在他们的项目页面上，我可以看到不同级别的活动和支持。如果我决定选择其中之一，我当然会选择一个势头强劲的人，因此很可能会得到支持和维持一段时间。这非常重要，因此即使特定的应用程序不具备所有可能的功能或不够灵活，由于支持/新颖性，示例可用性等原因，它仍然可能是一个不错的选择。 感谢您的任何建议或反馈。

70 python  django  twitter-bootstrap 

我正在使用Twitter BootstrapDjango与结合来渲染表单。 Bootstrap 可以很好地格式化表格-只要您有 CSS期望包含类即可。 但是，我的问题是Django生成的表单 {{ form.as_p }}在Bootstrap中表现不佳，因为它们没有这些类。 例如，Django的输出： <form class="horizontal-form" action="/contact/" method="post"> <div style='display:none'> <input type='hidden' name='csrfmiddlewaretoken' value='26c39ab41e38cf6061367750ea8c2ea8'/> </div> <p><label for="id_name">Name:</label> <input id="id_name" type="text" name="name" value="FOOBAR" maxlength="20" /></p> <p><label for="id_directory">Directory:</label> <input id="id_directory" type="text" name="directory" value="FOOBAR" maxlength="60" /></p> <p><label for="id_comment">Comment:</label> <textarea id="id_comment" rows="10" cols="40" name="comment">Lorem ipsum dolor sic amet.</textarea></p> …

70 css  django  twitter-bootstrap 

我正在使用折叠插件，并且想知道如何启用多个组同时打开。在他们的演示页面中： http://twitter.github.com/bootstrap/javascript.html#collapse 在给定时间只允许打开一个。我想这是手风琴的预期行为，但是如何更改它，以使打开一个组不会折叠其他组？

70 twitter-bootstrap 

我是jquery和bootstrap的新手，所以请考虑我的错误。我创建了用于登录和注册的bootstrap模式。它包含两个分别称为登录和注册的导航选项卡。我有两个按钮弹出相同的Modal窗口，但在Modal窗口中显示不同的选项卡。每个选项卡中都有一个带有许多输入的表单。我的问题是，当我单击“登录”按钮时，在模式中弹出“登录”选项卡时弹出模式，而当我单击页面上的“注册”按钮时，则打开注册选项卡。 这些是模态打开的2个链接： <div class="header-login-li" style="background-color:gray;float:left;width:100px;height:60px;"> <a data-toggle="modal" href="#regestration" class="header-register-a" > <big> <font color="white" class="header-register-font"><center style="margin-top:20px;">Login <i class="icon-chevron-down" style="font-size:20px"></i></center></font> </big></a></div> <div class="header-register-li" style="background-color:green;float:right;margin-right:-15px;width:130px;height:60px;"> <a data-toggle="modal" href="#regestration" class="header-register-a" > <big> <font color="white" class="header-register-font"><center style="margin-top:20px;">Register</center></font> </big></a> 这是我的标签及其内容的代码（我在这里避免不必要的代码）： <div class="tabbable" > <ul class="nav nav-tabs" ><!--tabs--> <li class="active" style="position:absolute;margin-left:0px;" id="logintab"> <a href="#pane_login" data-toggle="tab">Login</a></li> <li style="margin-left:70px;" …

70 javascript  jquery  html  css  twitter-bootstrap 

我正在为我的项目使用Bootstrap 3.1.1。表格中的每个单元格都包含000或数据111。悬停时，我想将此数据显示为工具提示。到目前为止，这可行。但是，当我将鼠标悬停在上时<td>，所有相邻单元都向右移动。 这是我的JSFiddle <table class="table"> <thead> <tr> <th class="matrisHeader">   </th> <th data-original-title="111" data-toggle="tooltip" data-placement="bottom" title=""> PÇ1 </th> <th data-original-title="222" data-toggle="tooltip" data-placement="bottom" title=""> PÇ2 </th> <th data-original-title="333" data-toggle="tooltip" data-placement="bottom" title=""> PÇ3 </th> <th data-original-title="444" data-toggle="tooltip" data-placement="bottom"title=""> PÇ4 </th> </tr> </thead> <tbody> <tr> <th data-original-title="555" data-toggle="tooltip" data-placement="bottom" title=""> ÖÇ1 </th> <td …

70 javascript  jquery  html  css  twitter-bootstrap 

我刚刚开始使用Twitter Bootstrap，但是我对如何最好地为父元素添加边框有疑问？ 例如，如果我有 <div class="main-area span12"> <div class="row"> <div class="span9"> //Maybe some description text </div> <div class="span3"> //Maybe a button or something </div> </div> </div> 如果我像这样应用边框： .main-area { border: 1px solid #ccc; } span3由于边框增加了宽度，因此网格系统将中断并跳至下一行……是否有一种好方法可以像这样向父级添加边框或填充<div>？

69 css  twitter-bootstrap 

刚开始使用引导程序，这真是太神奇了。 我正在尝试解决这个问题。我在模态窗口中有一个textarea供反馈。效果很好。但是，我希望当您单击按钮以激活模式时，焦点将集中在文本区域上。而且我似乎无法正常工作。 这是一个小提琴：http : //jsfiddle.net/denislexic/5JN9A/4/ 这是代码： <a class="btn testBtn" data-toggle="modal" href="#myModal" >Launch Modal</a> <div class="modal hide" id="myModal"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h3>Modal header</h3> </div> <div class="modal-body"> <textarea id="textareaID"></textarea> </div> <div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal">Close</a> <a href="#" class="btn btn-primary">Save changes</a> </div> </div>​ 这是JS $('.testBtn').on('click',function(){ $('#textareaID').focus(); });​ 继续 当我单击“启动模态”时，我希望模态显示出来，并将焦点放在文本区域上。 …

69 javascript  jquery  twitter-bootstrap  focus  textarea 

我正在尝试完成与该布局相似的布局：http : //dribbble.com/shots/829195-Slate/attachments/86422 我的项目使用具有响应式设计的Twitter Bootstrap。是否可以使用Bootstrap来实现全宽布局？ 问题是从我一直在阅读的内容中，流体布局将在bootstrap 3.0中删除，并且响应式设计具有固定的宽度。

69 css  twitter-bootstrap 

在Safari和其他一些基于iOS的浏览器中查看时，第一行的最后一列将换行到下一行。 苹果浏览器： Chrome /其他： 码： .flexthis { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .flexthis .col-md-4 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } <div class="row flexthis"> <div class="col-md-4 col-sm-6 text-center"> <div class="product"> <img src="img.jpg" alt="" class="img-responsive"> <h3>Name</h3> <p>Description</p> </div> …

69 twitter-bootstrap  css  twitter-bootstrap-3  flexbox 

我想创建一个固定的边栏，该边栏位于居中的Bootstrap网格之外。尝试执行此操作时，我面临的挑战是确定要向我应用/覆盖的其他样式，.container以便在调整屏幕大小时不会与侧边栏重叠。 对于初学者，我仅使用css框架的网格部分，因此和是从文件本身提取的代码.container，.row并且不是自定义的。还要记住，我正在使用Bootstrap 3，因此，请不要提出以前线程中经常问到的Bootstrap 2流体网格解决方案的建议。.col-md-12bootstrap.css 的HTML <div id="left-nav"></div> <div class="container"> <div class="row"> <div class="col-md-12"> <p>Lorem ipsum dolor sit amet, nunc dictum at.</p> </div> </div> </div> 的CSS html, body { height: 100%; width: 100%; } #left-nav { background: #2b2b2b; position: absolute; top: 0px; left: 0px; height: 100%; width: 250px; }

69 html  css  twitter-bootstrap  responsive-design 

引导程序模式在Android和iOS上无法正常工作。问题跟踪器已确认问题，但未提供有效的解决方案： 2.0中的模式在移动设备上已损坏。 2.0中的模态窗口无法正确定位 屏幕变暗，但模态本身在视口中不可见。可以在页面顶部找到它。当您向下滚动页面时，会发生此问题。 这是bootstrap-sensitive.css的相关部分： .modal { position:fixed; top:50%; left:50%; z-index:1050; max-height:500px; overflow:auto; width:560px; background-color:#fff; border:1px solid #999; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; -webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3); -moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3); box-shadow:0 3px 7px rgba(0, 0, 0, 0.3); -webkit-background-clip:padding-box; -moz-background-clip:padding-box; background-clip:padding-box; margin:-250px 0 0 -280px; } …

69 android  ios  mobile  webkit  twitter-bootstrap