标签: twitter-bootstrap-3
当地址栏隐藏iOS/Android/Mobile Chrome时,背景图片会跳转
我目前正在使用Twitter Bootstrap开发响应式网站.
该网站在移动设备/平板电脑/台式机上提供全屏背景图像.这些图像使用两个div旋转并淡入每个图像.
除了一个问题,它几乎是完美的.在Android上使用iOS Safari,Android浏览器或Chrome时,当用户向下滚动页面并导致地址栏隐藏时,背景会略微跳跃.
该网站在这里:http://lt2.daveclarke.me/
在移动设备上访问它并向下滚动,您应该看到图像调整大小/移动.
我用于后台DIV的代码如下:
#bg1 {
background-color: #3d3d3f;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; position:fixed;
width:100%;
height:100%;
left:0px;
top:0px;
z-index:-1;
display:none;
}
欢迎所有建议 - 这已经有一段时间了!
推荐指数
解决办法
查看次数
在移动视图顶部的Bootstrap右列
我有一个像这样的Bootstrap页面:
<div class="row">
<div class="col-md-6">
A
</div>
<div class="col-md-6">
B
</div>
</div>
好像:
-----
|A|B|
-----
因此,如果我在移动设备上查看它,列A位于顶部,但我希望B位于顶部.这可能吗？我试着推拉,但它没有用.
推荐指数
解决办法
查看次数
将星号添加到bootstrap 3中的必填字段？
我的HTML有一个被调用的类.required,它被分配给必需的字段.这是html:
<form action="/accounts/register/" method="post" role="form" class="form-horizontal">
<input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' />
<div class="form-group required">
<label class="col-md-2 control-label">Username</label>
<div class="col-md-4">
<input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" required="required" title="" type="text" />
</div>
</div>
<div class="form-group required"><label class="col-md-2 control-label">E-mail</label><div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">Password</label><div class="col-md-4"><input class="form-control" id="id_password1" name="password1" placeholder="Password" required="required" title="" type="password" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">Password (again)</label><div class="col-md-4"><input class="form-control" id="id_password2" name="password2" placeholder="Password (again)" required="required" title="" type="password" /></div></div>
<div class="form-group required"><label …推荐指数
解决办法
查看次数
单击标题div时如何使Bootstrap手风琴折叠？
在Bootstrap手风琴中,a我想要点击panel-headingdiv中的任何地方,而不是要求点击文本.
我正在使用Bootstrap 3.因此,它不仅仅是手风琴,而是一个可折叠的面板.知道怎么做整个面板可点击吗？
推荐指数
解决办法
查看次数
在Twitter Bootstrap 3中使用col-lg-push和col-lg-pull进行列顺序操作
我现在正在阅读Twitter Bootstrap 3上的文档,并试图按照本页所示的列排序, 但是碰壁了.我不明白为什么这样的代码工作,也不知道如何正确指定设置.我要展示的是一个网格,它由长度为5,另一个长度为5,最后是一个长度为2的网格.
所以我的是这样的:
[5] [5] [2]
而我想要实现的是,当它在桌面上查看时,显示上面的布局,但是当它在移动设备上查看时,我想首先显示第二个长度为5的对象,然后是第一个长度为5的对象,最后是长度为2的对象, 垂直.像这样:
[5] (second)
[5] (first)
[2]
当我尝试按照上面文档中解释的步骤进行操作时,尽管是在移动平台上,但我在第二个上获得了第一个长度为5的对象,正如我所说的那样,它应该在顶部显示第二个长度为5的对象.换句话说,我得到了这个:
[5] (first)
[5] (second)
[2]
那么我怎样才能正确地将第二个放在第一个？或者因为我使用相同长度的对象,列排序不起作用？
这是我的代码供您参考:
<div class='row'>
<div class='col-lg-5 col-lg-push-5'></div>
<div class='col-lg-5 col-lg-pull-5'></div>
<div class='col-lg-2'></div>
</div>
此外,文档没有说明什么pull或push意味着什么.我错过了什么吗？
谢谢.
推荐指数
解决办法
查看次数
Bootstrap抛出Uncaught Error:Bootstrap的JavaScript需要jQuery
我正在尝试使用Bootstrap为程序创建一个接口.我在<head>标签中添加了jQuery 1.11.0,并认为就是这样,但是当我在浏览器中启动网页时,jQuery报告错误:
Uncaught Error: Bootstrap's JavaScript requires jQuery
我尝试过使用jQuery 1.9.0,我尝试过在几个CDN上托管的副本,但我无法让它工作.谁能指出我做错了什么？
推荐指数
解决办法
查看次数
Bootstrap 3断点和媒体查询
在http://getbootstrap.com/css/上它说:
我们使用以下媒体查询在网格系统中创建关键断点.
超小型设备(电话,最高480px):无媒体查询,因为这是Bootstrap中的默认设置
小型设备(平板电脑,768像素及以上):@ media(最小宽度:@ screen-sm){...}
中型设备(台式机,992px及以上):@ media(最小宽度:@ screen-md){...}
大型设备(大型台式机,1200px及以上):@ media(最小宽度:@ screen-lg){...}
我们是否应该能够在我们的媒体查询中使用@ screen-sm,@ screen-md和@ screen-lg名称？因为它对我不起作用.在它工作之前,我必须使用像@media(min-width:768px){...}这样的像素测量.难道我做错了什么？
另外,对于超小型设备而言,480px的参考是错字吗？不应该说高达767px？
breakpoints media-queries twitter-bootstrap twitter-bootstrap-3
推荐指数
解决办法
查看次数
Bootstrap 3中的堆叠标签
我正在尝试使用Bootstrap 3中的Tab jquery插件实现左对齐堆叠选项卡,其中选项卡垂直呈现在选项卡内容的左侧,而不是顶部.当我尝试以下时;
<ul class="nav nav-tabs nav-stacked">
<li><a href="#tab1" data-toggle="tab">Tab 1</a></li>
<li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
<li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade" id="tab1">
Tab 1 content
</div>
<div class="tab-pane fade" id="tab2">
Tab 2 content
</div>
<div class="tab-pane fade" id="tab3">
Tab 3 content
</div>
</div>
标签堆叠在彼此之上,但没有正确地呈现为向左转,而是它们只是水平标签粘在彼此之上.标签内容在内容div中正确显示/隐藏.
这是在Bootstrap 2.x中使用tab-left和tab-right类处理的,但这在Bootstrap 3中已被弃用,并且似乎没有被任何东西替换.有谁知道Bootstrap 3 Tab插件中是否可以进行正确的左右选项卡渲染？
推荐指数
解决办法
查看次数
使用jQuery Validation插件的Bootstrap
我正在尝试使用jQuery Validation Plugin为我的表单添加验证,但是我遇到了一个问题,当我使用输入组时插件会输出错误消息.
$('form').validate({
rules: {
firstname: {
minlength: 3,
maxlength: 15,
required: true
},
lastname: {
minlength: 3,
maxlength: 15,
required: true
}
},
highlight: function(element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
}
});
我的代码: http ://jsfiddle.net/hTPY7/4/
推荐指数
解决办法
查看次数
Bootstrap 3上的输入宽度
再次更新:我正在通过选择最佳答案来结束这个问题,以防止人们在没有真正理解问题的情况下添加答案.实际上,没有使用网格或添加额外的CSS,无法使用内置功能.如果您正在处理help-block需要超出简短输入的元素,但是它们是"内置",则网格不能很好地工作.如果这是一个问题,我建议使用额外的CSS课程,你可以在这里的BS3讨论中找到.现在BS4已经出局了,可以使用包含的大小调整样式来管理它,这样就不会有更长的时间了.感谢所有人对这个流行的SO问题的良好意见.
更新:这个问题仍然存在,因为它是关于BS中的内置功能来管理输入宽度而不依赖于网格(有时它们必须独立管理).我已经使用自定义类来管理这个,所以这不是基本css的操作方法.该任务在BS 功能讨论列表中,尚未得到解决.
原始问题: 有人想出办法管理BS 3的输入宽度吗？我目前正在使用一些自定义类来添加该功能,但我可能错过了一些未记录的选项.
当前的文档说使用.col-lg-x但显然不起作用,因为它只能应用于容器div,然后导致各种布局/浮动问题.
这是一个小提琴.奇怪的是,在小提琴上我甚至无法让形式组调整大小.
<form role="form" class="row">
<div class="form-group col-lg-1">
<label for="code">Name</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-lg-1 ">
<label for="code">Email</label>
<input type="text" class="form-control input-normal">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
推荐指数
解决办法
查看次数