标签: css
BootStrap:未捕获TypeError:$(...).datetimepicker不是函数
我刚刚开始使用BootStrap,但是出现了
Uncaught TypeError: $(...).datetimepicker is not a function错误消息.有人能告诉我这段代码遗漏了什么吗？
从那以后,提到了多个类似的问题,但无济于事.
home_page.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Health Insurance</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="js/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<form role="form">
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="insuredName">Insured Name :</label>
<div class="col-sm-3">
<input class="form-control" type="text" id="insuredName" placeholder="Insured Name">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="rel_PolicyHolder">Relation with Policy Holder :</label>
<div class="col-sm-3">
<input class="form-control" type="text" id="rel_PolicyHolder" placeholder="Relation with Policy Holder"> <br …推荐指数
解决办法
查看次数
如何使用javascript从渐变百分比中获取颜色值？
我有一个固定的宽度div,使用css应用渐变.我想基于此渐变构建基于滑块的颜色选择器.
当我拖动滑块我计算百分比位置,我想得到基于此值的十六进制或rgb颜色代码.
我的想法是创建一个定义了开始/停止位置和颜色的数组,然后根据滑块位置从这个数组中找到两个值,然后以某种方式找到它之间的颜色:这是我无法前进的地方.
演示:http://jsfiddle.net/pdu8rpfv/
var gradient = [
[
0,
'ff0000'
],
[
28,
'008000'
],
[
72,
'0000ff'
],
[
100,
'ff0000'
]
];
$( "#slider" ).slider({
min: 1,
slide: function( event, ui ) {
var colorRange = []
$.each(gradient, function( index, value ) {
if(ui.value<=value[0]) {
colorRange = [index-1,index]
return false;
}
});
$('#result').css("background-color", 'red');
}
});
推荐指数
解决办法
查看次数
Angularjs覆盖ng-show ng-hide on:悬停
我在模板中显示了一系列"图标".
<div ng-repeat="data in items | orderBy:'-timestamp'">
<div class="icon">
<i>1</i>
<span>2</span>
</div>
</div>
我有以下css来显示span何时.icon盘旋并隐藏i.
.icon:hover i { display: none; }
.icon:hover span { display: block; }
但是,我也希望能够显示每个span时刻的实例$scope.options == true.所以我添加了以下内容:
<i ng-hide="options">1</i>
<span ng-show="options">2</span>
但是现在,我:hover已经破了,并没有最终表现出来span.
有没有办法覆盖它,ng-show以便我的CSS仍然display:block在它徘徊？
推荐指数
解决办法
查看次数
在Bootstrap UI Accordion中单击时如何删除轮廓
我正在尝试使用angular-ui bootstrap手风琴来保持标题内的引导表.当用户点击手风琴标题并打开时,会出现一个奇怪的轮廓.它看起来像这样("一些标题"周围的浅蓝色矩形):
我明白这是因为我使用了它<div>,但我怎样才能消除这种行为？
代码是:
<accordion close-others="true">
<accordion-group>
<accordion-heading>
<div>Some title</div>
</accordion-heading>
Text
</accordion-group>
<accordion-group>
<accordion-heading>
<div>Another title</div>
</accordion-heading>
</accordion-group>
</accordion>
推荐指数
解决办法
查看次数
jQuery animate()和CSS calc()
我尝试calc()使用jQuery animate 设置CSS ,例如:
$element.animate({
height: 'calc(100% - 30px)'
}, 500);
而且我注意到它calc()不适用于jQuery动画......
我希望有一种方法可以做到这一点,我不希望以类似的方式去做,替代或解决方法,我想设置calc()
这不可能吗？以任何方式？
如果有可能,请告诉我们如何？
推荐指数
解决办法
查看次数
为什么脚本在body标签的末尾
我知道这个问题被多次询问过,但我没有找到答案.那么为什么建议在body标签的末尾包含脚本以便更好地渲染？
来自Udacity课程https://www.udacity.com/course/ud884 - 在DOM和CSSOM准备就绪后开始渲染.JS是HTML解析阻塞,任何脚本在CSSOM准备好后启动.
所以,如果我们得到:
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>CRP</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- content -->
<script src="script.js"></script>
</body>
</html>
CRP将是:
CSSOM ready > JS execute > DOM ready > Rendering
如果脚本在头部:
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>CRP</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<!-- content -->
</body>
</html>
CRP将是相同的:
CSSOM ready > JS execute > DOM ready > Rendering
这个问题只是关于"同步"脚本(没有async/defer属性).
推荐指数
解决办法
查看次数
JavaFx:按钮边框和悬停
我使用的是Java 8.我有工具栏和按钮.
我想实现以下内容:
- 在工具栏上的通常状态(没有鼠标悬停)时,只能看到按钮标签(没有背景,也没有边框).
- 当用户鼠标悬停在按钮上时,必须看到常用按钮.
怎么做通过CSS？
推荐指数
解决办法
查看次数
使用<select>时文本会被删除
虽然我用两个相同的CSS <input>和<select>中,文本<select>被切断,而在输入文本是完美的.为什么会发生这种情况以及如何解决？
input,
select {
box-sizing: content-box;
width: 90%;
height: 23px;
padding: 10px;
font-family: TheBoldFont;
font-size: 27px;
color: #f26e7c;
border: 4px solid black;
border-radius: 12px;
}<input type="text" value="xxxxxxx">
<select>
<option selected value="xxxxxxxxx">xxxxxxxx</option>
</select>这是结果:
这就是在Google Chrome的开发者工具中悬停显示的内容:
推荐指数
解决办法
查看次数
如何在不使用margin-left的情况下集中5个div？
我想在a里面调整5个div div,就像这样:
有没有办法这样做而不使用margin-left？
我的意思是..如果我想消除其中一个中间div并且它们仍然是对齐的？例如..如果我删除div4,其他人将自动居中.像这样:
我找到了这样的解决方案:
#parent {
width: 615px;
border: solid 1px #aaa;
text-align: center;
font-size: 20px;
letter-spacing: 35px;
white-space: nowrap;
line-height: 12px;
overflow: hidden;
}
.child {
width: 100px;
weight: 100px;
border: solid 1px #ccc;
display: inline-block;
vertical-align: middle;
}
但问题是:第一个div和最后一个必须像浮左和向右浮动......而这个解决方案将每件事都集中在这样的事情上:
推荐指数
解决办法
查看次数
将按钮和链接放在particles.js脚本(Z-index)上
我正在尝试使用particles.js脚本,因此粒子将浮动整个页面(具有透明背景).我需要拉出粒子上方的一些链接和按钮,这样它们就可以点击了.
关于链接,我能在大"B"元素上放置大的"C"元素,而在大"C"元素上有小的"b"元素吗？
我所想的是相对意味着相对于其父亲的z-index,而如果我将所有元素设置为绝对,则显示小"b"超过大"C"是可能的,但事实并非如此.有谁可以帮我解释一下？
<div id="A">A<div id="a">a</div></div>
<div id="B">B<div id="b">b</div></div>
<div id="C">C<div id="c">c</div></div>
推荐指数
解决办法
查看次数