bootstrap datetimepicker样式未正确应用
Osu*_*boy 17 css jquery datepicker twitter-bootstrap
我在使用这个bootstrap datetimepicker工作时遇到了一些麻烦:
http://eonasdan.github.io/bootstrap-datetimepicker/
我做了一个非常基本的页面,这里是代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;" />
<title>Test page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet" src="css/bootstrap-datetimepicker.min.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/moment-with-locales.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#datetimepicker1').datetimepicker();
});
</script>
</head>
<body>
<div class='col-sm-2'>
<div class='input-group' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</body>
</html>
现在,它不像插件不起作用,更像是某些样式未正确应用.这是一张更好地说明我的意思的图片.左边是我的,右边是我真正想要的东西:
正如你所看到的,一切都是左对齐而不是居中而且事情更窄.此外,当我在日历上运行鼠标并且当前日期没有正确概述时,没有悬停效果.谁能告诉我我做错了什么？
Kyl*_*Mit 27
从截图中看,您似乎没有进入bootstrap-datetimepicker.css库.查看您的控制台并确保您没有任何错误,并且该库存在于它正在查找的文件夹中,并具有所有适当的内容.
没有额外的css,它看起来不会很糟糕,因为bootstrap正在完成大部分繁重的工作,插件通常只是利用Bootstrap的类并添加一些自己的类来将它全部装箱.
随着图书馆 - 工作
$(function() {
$('#datetimepicker1').datetimepicker();
});<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<div class='col-xs-4'>
<div class='input-group' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>没有图书馆 - 破碎
$(function() {
$('#datetimepicker1').datetimepicker();
});<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<div class='col-xs-4'>
<div class='input-group' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>PS - 它很难调试,因为我们无法知道文件在本地
/js/文件夹中的样子.将来,我建议将CDN用于在线样本,以便更容易与其他人分享您正在查看的内容.您可以在此处使用cdnjs获取可分发的静态文件:
Osu*_*boy 13
谢谢凯尔,你是对的,我没有拉动CSS样式.虽然不是因为我没有把它包括在内......而是我的包含声明中的错误.这就是我所拥有的:
<link rel="stylesheet" src="css/bootstrap-datetimepicker.min.css">
我不小心把'src'而不是'href',所以这就是我应该放的东西:
<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">
谢谢你指出我正确的方向:)