标签: twitter-bootstrap-2
在Twitter Bootstrap 2.3.2中是否有导航栏的下拉类？
有拉右和左拉类来对齐块元素.我想知道是否有相应的拉杆和拉杆可用于导航栏？
<header id="navbar" role="banner" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<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="logo pull-left" href="/" title="Home">
<img src="logo.png" alt="Home">
</a>
<div class="nav-collapse collapse">
<nav role="navigation">
<ul class="menu nav">
<li>...</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
目标是将菜单(ul.nav)对齐到导航栏的底部.
推荐指数
解决办法
查看次数
崩溃事件的Twitter Bootstrap 2
崩溃菜单出现时(或用户点击折叠按钮时)是否有任何方法可以捕获？
我正在使用标准的bootstrap twitter框架和类.
推荐指数
解决办法
查看次数
Twitter Bootstrap 2.1 - 模态无法正常工作
我尝试集成twitter bootstrap模式但由于某种原因它不起作用.
问题是页面加载后会显示模态.
我写的是我的 <head>
<script type="text/javascript">
$('#myModal').modal({show: false,keyboard: false});
</script>
但是没有效果.
我使用的代码:(http://twitter.github.com/bootstrap/javascript.html#modals)
<-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
它在页面加载后直接呈现,如果我再次按下模态按钮它会消失,第二次出现但是整个页面变暗(即使模态本身也是暗色调)
有谁遇到过同样的问题？
我把它推到了heroku所以你可以看到问题.http://elobeast.com/ (右上角"启动演示模式")
推荐指数
解决办法
查看次数
Bootstrap Carousel Lazy Load
我正在尝试使用bootstrap Carousel延迟加载.看起来这应该是直截了当的,但我在这里甚至没有任何错误来排除故障.JS:
<script type="text/javascript">
$('#bigCarousel').on("slid", function() {
// load the next image after the current one slid
var $nextImage = $('.active.item', this).next('.item').find('img');
$nextImage.attr('src', $nextImage.data('lazy-load-src'));
});
</script>
然后是html:
<div id="bigCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<img src="assets/bigimage1.jpg" class="img-big">
</div>
<div class="item">
<img data-lazy-load-src="assets/menu-header2.jpg" class="img-big">
</div>
</div>
</div>
在firebug中没有JS错误或其他任何我能弄明白的错误,但我的图像只是没有加载.这可能是一件非常简单的事......
推荐指数
解决办法
查看次数
Twitter Bootstrap Modal在show上滚动页面
单击触发Twitter Bootstrap Modal弹出窗口的链接会导致浏览器向上滚动页面.此行为仅发生在Chrome中.
这是一个演示页面:
http://www.turizmburosu.com/test2.aspx
该页面有600行链接,导致页面正文超过窗口高度.如果单击这些链接中的任何一个,则会显示模式对话框.在Chrome中,点击初始视图下方的任何链接都会导致后台页面向上滚动(并非总是向上滚动).
我使用以下函数来触发模态的显示:
function test(id, imp) {
$("#modalLabel").html("Header");
$("#modalBody").html("Body");
$("#myModal").modal("show");
}
和链接的形式:
<a href="" onclick="test();return false;">Test Link ###</a>
我在Chrome 22.0.1229.94 m中看到了这种行为.
关于为什么会发生这种情况的任何建议/想法以及如何预防？
附加示例
这可以在Modal插件的Twitter Bootstrap文档页面上重新创建.
进入页面后,只需覆盖现有的data-api即可使用JavaScript api:
$('#modals a[data-toggle="modal"]').on('click',
function(e) {
$('#myModal').modal('toggle');
return false
});
现在,如果单击" 启动演示模式"按钮,则在显示模式时页面将向上滚动.
同样,这是使用Chrome.
推荐指数
解决办法
查看次数
填充在bootstrap中
我使用bootstrap:
<div id="main" class="container" role="main">
<div class="row">
<div class="span6">
<h2>Welcome</h2>
<p>Hello and welcome to my website.</p>
</div>
<div class="span6">
Image Here (TODO)
</div>
</div>
主要也有灰色背景.页面的背景是白色的.我遇到的问题是文本是正确的灰色背景的边缘.我想要一些填充但是当我添加它时,图像跨度转到下一行.
我出错的任何想法？
推荐指数
解决办法
查看次数
下拉菜单未显示在Bootstrap中
我正试图在Bootstrap中获得一个基本的下拉菜单:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="dropdown">
<!-- Link or button to toggle dropdown -->
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</body>
</html>
然而,没有任何表现.我知道正确引用了本地CSS和JS文件.据我所知,默认的JS包含所有插件.
编辑:感谢大家的反馈.我只能添加,以防人们发现自己处于相同的情况,在复制和粘贴代码段之前,在教程中进一步向下移动.
推荐指数
解决办法
查看次数
是否可以使用混合流体/非流体网格系统？
使用bootstrap 2,在左侧使用静态宽度列并使右列成为流体的最简单方法是什么.像这样的东西,左侧列宽200像素,右侧填充浏览器窗口.
======================
Hello
======================
A |
B | 100%
200px|
D |
E |
F |
我尝试将min-width添加到常规容器布局中,但在调整大小时它有一些奇怪的行为:
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">Hello</div>
</div>
<div class="row-fluid">
<div class="span2" style="min-width:200px">Left Column</div>
<div class="span10">Right Column</div>
</div>
</div>
这里有一个JS小提琴,虽然js小提琴的四重布局本身似乎在添加自己的行为.
推荐指数
解决办法
查看次数
以Twitter Bootstrap网格为中心"奇数"
我玩了一点引导程序,然后我发现了关于如何使span类居中的烦人问题.在尝试偏移以对某些跨度进行居中后,我可以将某个跨度类居中(如span8与offset2,或span6与偏移量3),但问题是,我想将span7/span9/span10居中.
然后我尝试使用一些技巧来使span10居中......
<div class="container"> <!--Or span12 since the width are same-->
<div class="row">
<div class="span1" style="background:black;">Dummy</div>
<div class="span10" style="background:blue;">The Real One</div>
<div class="span1" style="background:black;">Dummy</div>
</div>
</div>
有没有解决方案而不是使用上面的代码？
如果我想在不更改行边距左值的情况下将span7,span9甚至span11居中,我该怎么办？因为类行已经将margin-left设置为20px,这使得我难以将范围居中.
推荐指数
解决办法
查看次数
使用Twitter Bootstrap 2.x连续排列多个下拉按钮
有一种简单的方法可以将按钮下拉列表与Twitter Bootstrap 按钮组分组？
这段代码
<div class="btn-toolbar">
<div class="btn-group">
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
January
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#" class="active">January</a></li>
<li><a href="#">February</a></li>
<!-- ... -->
</ul>
</div>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
2012
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#" rel="2012" class="active">2012</a></li>
<li><a href="#" rel="2011">2011</a></li>
<li><a href="#" rel="2010">2010</a></li>
<li><a href="#" rel="2009">2009</a></li>
</ul>
</div>
</div>
结果
button buttongroup twitter-bootstrap drop-down-menu twitter-bootstrap-2
推荐指数
解决办法
查看次数