Tag: twitter bootstrap

Twitter Bootstrap：Popover vs Tooltip？: 这两者有什么区别？对我来说，Popover只是看起来像一个较大的边框较大的工具提示。有没有质的差别，还是只是你想要的大胆的问题？

如何更改导航栏/容器宽度？ Bootstrap 3: 我的导航栏的默认宽度太宽1170px 。我想把它降低到940px – 但我想保持响应。我试图在CSS中更改容器宽度，并且使用大型浏览器可以正常工作，但在查看移动设备大小时，页面的其余部分会分崩离析。这是正确的财产还是有别的？ @media (min-width: 1200px) { .container { max-width: 1170px; } 这是我的导航栏代码 <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Site Name</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#shop">Shop</a></li> <li><a href="#showcase">Showcase</a></li> <li><a […]

使用prototype.js时，Twitter Bootstrap 3下拉菜单消失: 在magento网站上使用bootstrap 3＆prototype.js时，我遇到了一个问题。基本上，如果你点击下拉菜单（我们的产品），然后点击背景，下拉菜单（我们的产品）消失（prototype.js添加“display：none;”到li）。这是一个问题的演示： http : //ridge.mydevelopmentserver.com/contact.html 您可以看到，下拉菜单的工作方式应该不会在下面的链接中包含prototype.js： http ： //ridge.mydevelopmentserver.com/ 有没有其他人遇到这个问题之前，或有冲突的可能的解决办法？容易修正：只要用这个引导友好的replaceMagento的prototype.js文件： https://raw.github.com/zikula/core/079df47e7c1f536a0d9eea2993ae19768e1f0554/src/javascript/ajax/original_uncompressed/prototype.js 您可以在prototype.js文件中看到修改bootstrap问题的更改： https://github.com/zikula/core/commit/079df47e7c1f536a0d9eea2993ae19768e1f0554 注意：在prototype.js之前，jQuery必须包含在你的magento皮肤中。例子： <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/prototype/prototype.js"></script> <script type="text/javascript" src="/js/lib/ccard.js"></script> <script type="text/javascript" src="/js/prototype/validation.js"></script> <script type="text/javascript" src="/js/scriptaculous/builder.js"></script> <script type="text/javascript" src="/js/scriptaculous/effects.js"></script> <script type="text/javascript" src="/js/scriptaculous/dragdrop.js"></script> <script type="text/javascript" src="/js/scriptaculous/controls.js"></script> <script type="text/javascript" src="/js/scriptaculous/slider.js"></script> <script type="text/javascript" src="/js/varien/js.js"></script> <script type="text/javascript" src="/js/varien/form.js"></script> <script type="text/javascript" src="/js/varien/menu.js"></script> <script […]

在Twitter Bootstrap 2中，当缩小屏幕时，怎样才能让右栏移动到顶部？: 我在Twitter Bootstrap中使用了2列stream体布局。左栏是主要内容（span10），右栏是小工具（span2）的侧栏。目前，在调整浏览器窗口的大小时，Bootstrap通过创build一列，最左边的部分在最上面，最右边的部分作为响应。我想反过来。这是我的HTML的要点： <body> <div id="content" class="container-fluid"> <div id="content-row-1" class="row-fluid"> <div id="mainContainer" class="span10"> Lots of content goes here </div> <div id="sidebar" class="span2"> Widgets </div> </div> <!– content-row-1 –> </div> <!– content –> </body> 有没有什么办法可以在左边的窗口中放置mainContainer ，在右边的窗口放置Widget，但是当窗口缩小的时候，把sidebar放到顶部？

Bootstrap：如何在列中alignment内容？: 一个简单的用例场景是使用映像或Bootstrap列中的任何其他内容。而且这些内容通常需要水平居中。 <div class="container"> <div class="row"> <div class="col-sm-4 col-md-4 col-lg-4 text-center"> <img class="img-responsive" src="img/some-image.png" title="this image needs to be centered"> </div> <div class="col-sm-8 col-md-8 col-lg-8"> some content not important at this moment </div> </div> </div> 在版本3.1.0中添加类文本中心列中的图像居中。但是为了解决一些其他问题，我不得不去3.3.4版本，现在这个行为（文本中心）已经被破坏了。我留下了如何将图像或其他内容置于列中的问题。我想避免必须添加类包含的元素，因为这是容易出错或需要另一个包含div。

Bootstrap Glyphicons如何工作？: 我知道一些CSS和HTML的基础知识，有时候和他们一起工作，但我不是一个专业人员，而且我很好奇Bootstrap Glyphicons是如何工作的。我的意思是在Bootstrap压缩文件中没有图像，所以图像从哪里来？

叽叽喳喳bootstrap 3 input-group-addon不是所有相同的大小: 基本上我有几个input字段，其中有一些文本前缀，当我尝试在input-group-addon和input字段本身上设置col-lg-4和col-lg-8时，它不会按照我的意思去做并调整它们的大小。 <div class="input-group"> <span class="input-group-addon">some text</span> <input type="text" class="form-control" id="current_pwd" name="current_pwd" /> </div> 任何人都可以帮助我得到input组插件获得相同的大小我在这里创build了一个小提琴： http://jsfiddle.net/Dzhz4/ 这解释了我的问题。任何人都可以点亮一下吗？

angular.js ng-repeat创build网格: 我正在尝试使用bootstrap 3和angularjs创build一个网格。我试图创build的网格是这样的，重复使用ng-repeat。 <div class="row"> <div class="col-md-4">item</div> <div class="col-md-4">item</div> <div class="col-md-4">item</div> </div> 我已经尝试使用ng-if ($index % 3 == 0)来添加行，但是这似乎没有工作正确。任何build议将是伟大的！谢谢！编辑：这是我结束了与工作的代码： <div ng-repeat="item in items"> <div ng-class="row|($index % 3 == 0)"> <ng-include class="col-sm-4" src="'views/items/item'"></ng-include> </div> </div>

如何获得引导下拉菜单“dropup”: 我有一个Bootstrap下拉菜单。最后一个项目是一个子菜单。当完整菜单下降时，如何获得子菜单dropup？代码如下： <div class="dropdown"> <a class="inputBarA dropdown-toggle" data-toggle="dropdown" href="#">FILTER</a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li role="presentation"> <a role="menuitem" href="#">Text</a> </li> <li role="presentation"> <label>Label name</label> <label>Label name</label> <label class="checkbox"> <input type="checkbox"> Text </label> <label class="checkbox"> <input type="checkbox"> Text </label> <label class="checkbox"> <input type="checkbox"> Text </label> <label class="checkbox"> <input type="checkbox"> Text </label> </li> <li class="dropdown-submenu"> <a […]

Sass :: SyntaxError：导入文件不存在或不可读：bootstrap-sprockets: 我突然在开发和部署生产中出现这个错误。 custom.css.scss @import "bootstrap-sprockets"; @import "bootstrap"; 错误（生产中） rake aborted! Sass::SyntaxError: File to import not found or unreadable: bootstrap-sprockets. Load paths: /srv/www/myapp/releases/20141001060418/app/assets/images /srv/www/myapp/releases/20141001060418/app/assets/javascripts /srv/www/myapp/releases/20141001060418/app/assets/stylesheets /srv/www/myapp/releases/20141001060418/vendor/assets/javascripts /srv/www/myapp/releases/20141001060418/vendor/assets/stylesheets