我想使用this bootstrap enabled timepicker ,但是当我单击按钮时无法显示下拉列表。我对网络开发非常陌生,所以我认为我错过了一个对其他人来说都很明显的步骤,甚至在the documentation中都没有提到。 .
This question提到需要将“相关 css 文件”放入 css/bootstrap
文件夹中。这是真的?它们是什么文件?
到目前为止,我已完成以下操作以在我的页面上安装此控件。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="bootstrap-2.3.2/css/bootstrap.css" media="screen">
<link type="stylesheet" href="bootstrap-timepicker/css/bootstrap-timepicker.min.css" />
<script src="jquery-2.0.3.js"></script>
<script src="bootstrap-2.3.2/js/bootstrap.js"></script>
<script type="text/javascript" src="bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script>
</head>
<body>
<div class="input-append bootstrap-timepicker">
<input id="timepicker1" type="text" class="input-small">
<span class="add-on"><i class="icon-time"></i></span>
</div>
<script type="text/javascript">
$('#timepicker1').timepicker();
$('#timepicker1').timepicker().on('show.timepicker', function(e) {
console.log('The time is ' + e.time.value);
console.log('The hour is ' + e.time.hour);
console.log('The minute is ' + e.time.minute);
console.log('The meridian is ' + e.time.meridian);
});
</script>
</body>
</html>
当我点击应该打开下拉列表的按钮时,我在 Chrome 中收到控制台日志消息,因此我知道它正在正确获取点击事件。
如果我查看 bootstrap-timepicker/css
文件夹,我会看到这个文件:
bootstrap-responsive.css
我需要对此文件执行某些操作吗? bootstrap-timepicker/assets
、bootstrap-timepicker/less
和其他一些文件夹中还有其他几个文件,但我不确定这些文件是否已编译稍后进入缩小的源代码,或者我也需要以某种方式安装它们。
最佳答案
这是您的错误:
<link rel="stylesheet" href="bootstrap-2.3.2/css/bootstrap.css" media="screen">
<link type="stylesheet" href="bootstrap-timepicker/css/bootstrap-timepicker.min.css" />
link
的属性 type
应该是"text/css"
和rel
应该是"stylesheet"
。更改它,它应该可以工作。
<link rel="stylesheet" type="text/css" href="bootstrap-2.3.2/css/bootstrap.css" media="screen">
<link rel="stylesheet" type="text/css" href="bootstrap-timepicker/css/bootstrap-timepicker.min.css" />
关于javascript - 使用启用 Bootstrap 的控件时是否存在额外文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20387868/