标签: twitter-bootstrap-2
对齐twitter bootstrap进度条和徽章
我正在为我的网站使用twitter bootstrap.我想使用进度条指示该过程的完成百分比.
在进度条中,我想显示正在处理的步骤的名称,并在进度条的结尾或开始处使用徽章来显示完成百分比.这是我试图做的JS小提琴链接
<div id="coolstuff" style="margin-top: 10px;">
<span class="badge" style="padding: 3px; width: 10px">10%</span>
<div class="progress" id="prgbar">
<div title="PO Details" class="bar" style="width: 20%;" id="prgwidth">Add New PO Detail</div>
</div><!-- end of progress bar -->
</div> <!-- end of cool stuff -->
但是bade和进度条并没有并排排列.我不是很擅长CSS,所以我不知道我能做些什么来将它们排成一行.
css badge twitter-bootstrap progress-bar twitter-bootstrap-2
推荐指数
解决办法
查看次数
bootstrap scrollspy不工作
这就是我面临的问题.
http://bittu.github.com/folderGrid/
它首先突出显示最后一个选项卡,当滚动时,它在每个滚动步骤上仅在两个标签之间切换.
这是我使用的一小段代码.
<body data-spy="scroll" data-target=".subnav" data-offset="50">
<div class="subnav">
<ul class="nav nav-pills">
<li><a href="#contents">Contents</a></li>
<li><a href="#config">Config Options</a></li>
<li><a href="#usage">Usage</a></li>
<li><a href="#examples">Examples</a></li>
</ul>
</div>
<div class="row">
<div class="span12">
<section id="contents">
....
</section>
<section id="config">
....
</section>
<section id="usage">
....
</section>
<section id="examples">
....
</section>
</div>
</div>
包括所有必要的文件.并尝试了所有数字data-offset
推荐指数
解决办法
查看次数
Bootstrap水平表单"control-label"不使用响应式样式
我正在使用Bootstrap 2的"form-horizontal"类,但我的标签似乎没有使用Responsive样式.这就是它的样子:
当我检查它时,它在标签上特别具有"width:160px",这是常规的Bootstrap设置,但是Responsive样式只有"width:auto".
我对该部分的HTML看起来像这样:
<form id="addproject" class="form-horizontal">
<div class="control-group">
<label for="title" class="control-label">Title</label>
<div class="controls">
<input type="text" name="title" id="title" />
</div>
</div>
</form>
推荐指数
解决办法
查看次数
在Twitter Bootstrap 2.3.2中使用input-block-level和input-prepend
我想知道如何使用twitter bootstrap 2.3.2中的输入前置图标和响应式布局来使输入字段填充可用宽度？
在bootstrap中有一个css样式输入块级别的巫婆工作正常,直到你用一个图标添加你的输入...如何获得与prependet输入相同的功能？
<div class="control-group">
<label class="control-label" for="inputIcon">Email address</label>
<div class="controls">
<div class="input-prepend ">
<span class="add-on"><i class="icon-envelope"></i></span>
<input class="span2" id="inputIcon" type="text" class="input-block-level">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password" class="input-block-level">
</div>
</div>
这里是说明此问题的代码示例:http://jsfiddle.net/r3CyL/
推荐指数
解决办法
查看次数
滑块工具提示的重叠部分以及他在bootstrap-slider插件中的位置
我在模态窗口中使用Twitter Bootstrap 2.3.2和bootstrap-slider插件.问题是滑块的工具提示的一部分重叠在模态窗口的标题后面并且位置错误.
我试图添加此规则,但它没有帮助.
.slider .tooltip{
z-index: 1151 !important;
}
我想提供正确的jsfiddle,但我无法找到bootstrap-slider插件cdn.这是jsfiddle,它不起作用,因为缺少bootstrap-slider插件源.
HTML
<a href="#options" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<div id="options" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Settings</h3>
</div>
<div class="modal-body">
Vertex size <input id="nodeSize" data-slider-id='nodeSizeSlider' type="text" data-slider-min="1" data-slider-max="50" data-slider-step="1" data-slider-value="20"/><br><br>
Edge size <input id="edgeSize" data-slider-id='edgeSizeSlider' type="text" data-slider-min="1" data-slider-max="50" data-slider-step="1" data-slider-value="20"/><br>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-primary" id="saveSettings">Save</button>
</div>
</div>
JavaScript的
$(document).ready(function () {
$('#nodeSize').slider({
formatter: function(value) {
return …css jquery twitter-bootstrap twitter-bootstrap-2 bootstrap-slider
推荐指数
解决办法
查看次数
Liferay中的Bootstrap模态
我使用与Tomcat捆绑在一起的Bootstrap 2.3.2和Liferay 6.2.我在Bootstrap 2.3.2中创建了一些具有复杂主体结构的模态窗口,我想在我的门户中使用它们.这里是说,Liferay的使用引导2.3.2 CSS,而不是自引导2.3.2 JavaScript和部件,如模态,工具提示,标签,......都包含在AlloyUI.
我包括Bootstrap 2.3.2 javascript并试图使用我的模态窗口,但如果我想显示模态窗口它不会出现.我想问一下,我怎样才能在Liferay中显示原生引导模态.
liferay liferay-6 twitter-bootstrap alloy-ui twitter-bootstrap-2
推荐指数
解决办法
查看次数
从Bootstrap中删除Glyphicons
如何从bootstrap 3中删除所有glyphicons实例？它看起来像是嵌入到.css文件中:(
我试图尽可能减小文件大小.
推荐指数
解决办法
查看次数
将V形字形放置在右侧-导航列表
您好，我正在尝试实现可在http://twitter.github.io/bootstrap/components.html#navs找到的导航列表。我已经查看了源代码，并尝试使用它们的代码和自己的代码：
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-tabs nav-stacked bs-docs-sidenav span8">
<li><a href="#Variabler"><b>Variabler</b><i class="icon-chevron-right"></i></a></li>
<li><a href="#Datatyper"><b>Datatyper</b><i class="icon-chevron-right"></i></a></li>
<li><a href="#Funktioner"><b>Metoder</b><i class="icon-chevron-right"></i></a></li>
<li><a href="#"><b>Arrays</b><i class="icon-chevron-right"></i></a></li>
<li><a href="#"><b>Klasser</b><i class="icon-chevron-right"></i></a></li>
<li><a href="#variables"><b>HTML5</b><i class="icon-chevron-right"></i></a></li>
<li><a href="#variables"><b>CSS3</b><i class="icon-chevron-right"></i></a></li>
<li><a href="#variables"><b>jQuery</b><i class="icon-chevron-right"></i></a></li>
<li><a href="#variables"><b>AJAX</b><i class="icon-chevron-right"></i></a></li>
<li><a href="#variables"><b>PHP</b><i class="icon-chevron-right"></i></a></li>
<li><a href="#variables"><b>MySQL</b><i class="icon-chevron-right"></i></a></li>
<li><a href="#variables"><b>Twitter Bootstrap</b><i class="icon-chevron-right"></i></a></li>
</ul>
</div>
我得到的结果是这样的：
如何将人字形摆在右边？尝试用偏移补偿，但是人字形的位置会根据弦的长度而有所不同。
推荐指数
解决办法
查看次数
bootstrap 2.3.2导航栏内部元素在Chrome移动后首次崩溃后变得不可见
我对bootstraps navbar 2.3.2有这个非常奇怪的问题.
这个问题也发生在他们的官方页面上:
http://getbootstrap.com/2.3.2/examples/starter-template.html
导航栏在桌面上运行良好.
在每个网络浏览器上的手机上,我检查过每件事似乎工作得很好.
问题只发生在chrome mobile上.
在第一次点击菜单时,每件事都会显示并且正常.
当它折叠回来然后再次点击突然看到菜单时,内部元素变得不可见.如果你突然转动手机,它们会再次出现.
再次,这只在chrome mobile上haapens,就像我在url中给出的例子一样.
这很奇怪,我不想将我的网站移动到bootstrap 3.
请帮助我必须有一些可以解决这个问题的CSS.
谢谢.
推荐指数
解决办法
查看次数
制作Twitter Bootstrap弹出模式幻灯片并粘贴到页面底部
我正在使用bootstrap 2.3,我有一个模式,几秒后从页面底部滑动,我希望它坚持到屏幕的底部.一切正常,除非你调整浏览器高度,模态不会粘在底部.请帮忙!
这就是弹出窗口的样子:https://www.dropbox.com/s/kn257b07hdle52i/Screenshot%202014-10-27%2016.09.12.png?dl=0
直到你调整窗口大小,然后这个:https://www.dropbox.com/s/r0x4mkpj9xvsu61/Screenshot%202014-10-27%2016.10.00.png?dl=0
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>pop-up</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<!-- Duplicated campaign styles -->
<link href="duplicate.css" rel="stylesheet" media="screen">
</head>
<body>
<!----------------- Pop-up timeout function------------------->
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$('#slide-bottom-popup').modal('show');
}, 1000); // milliseconds
});
</script>
<style>
/*------------------------------------Pop-up styles-------------------------------------*/
.modal.fade {
top: 100%;
-webkit-transition: opacity 0.3s linear, …推荐指数
解决办法
查看次数
标签 统计
css ×3
glyphicons ×2
alloy-ui ×1
badge ×1
html ×1
jquery ×1
liferay ×1
liferay-6 ×1
modal-dialog ×1
popup ×1
progress-bar ×1
sticky ×1