javascript - 使用启用 Bootstrap 的控件时是否存在额外文件?

标签 javascript html twitter-bootstrap timepicker

我想使用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/assetsbootstrap-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/

相关文章:

html - 使用普通链接提交表单

javascript - 如何停止循环 HTML5 视频并让它播放到最后

javascript - 如何将值传递给 el-upload 中的请求操作 url?

html - 翻转 Bootstrap 缩略图时 div 的绝对定位

javascript - JavaScript 无法在 IE10 中运行

html - 如何对齐图标 Bootstrap 菜单(折叠状态)

javascript - Bootstrap Navbar Toggle 无法正确呈现

css - 如何完全防止内容出现 - 响应式网页设计

javascript - Jquery:无法将空格添加到 contenteditable div 的占位符

javascript - html5 bootstrap 中的光标交互式 360 度视频/图像背景