JS 和 Bootstrap 在 Codepen 中工作,但在本地打开时不工作
JS and Bootstrap work in Codepen but not when opened locally
这是我的代码笔:
https://codepen.io/ldrumsl/pen/ZxdZwa
这是JS:
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
这是下载的 index.html 文件:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>A Pen by L</title>
<script src="https://code.jquery.com/jquery-2.1.0.min.js"
integrity="sha256-8oQ1OnzE2X9v4gpRVRMb1DWHoPHJilbur1LP9ykQ9H0="
crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-
theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script
src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> .
</script>
<link rel='stylesheet prefetch'
href='https://cdn.rawgit.com/Eonasdan/bootstrapdatetimepicker/
a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-
datetimepicker.css'>
</head>
<body>
<div class="container" style="margin-top: 20vh">
<div class="row">
<div class="col-12 text-center" style="height:4em"></div>
<div class="col-12 text-center" style="font-size: 4em;">
REQUEST EDIT
</div>
<div class="col-12 text-center" style="height:4em"></div>
</div>
<div class="form-group row">
<label for="colFormLabelLg" class="col-sm-2 col-form-label col- form-label-lg">Start Date & Time</label>
<div class="col-sm-10">
<div class="form-group">
<div class="input-group date" id="datetimepicker2">
<input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">End Date & Time</label>
<div class="col-sm-10">
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Notes / Reason</label>
<div class="col-sm-10">
<div class="form-group">
<div>
<input type="text" class="form-control" />
</div>
</div>
</div>
</div>
</div>
<div class="row" style="height: 3rem;"></div>
<div class="row" style="height: 3rem;">
<button type="button" class="btn btn-secondary btn-lg btn-block" style="width: 50%; margin-left: 25%;background-color: grey;">LOGIN</button>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js'> .
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js'></script>
<script src='https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js'></script>
<script src="js/index.js"></script>
</body>
</html>
上面的link如我所愿。但是,当我导出文件并在本地打开它时,我得到如下内容:
Image of local code
有谁知道如何获取它以便我的代码在本地运行?我直接从 codepen 导出了文件,没有做任何更改。
在本地更改这些行 html :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
https:
在样式表 url 中被遗忘。
这是我的代码笔: https://codepen.io/ldrumsl/pen/ZxdZwa
这是JS:
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
这是下载的 index.html 文件:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>A Pen by L</title>
<script src="https://code.jquery.com/jquery-2.1.0.min.js"
integrity="sha256-8oQ1OnzE2X9v4gpRVRMb1DWHoPHJilbur1LP9ykQ9H0="
crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-
theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script
src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> .
</script>
<link rel='stylesheet prefetch'
href='https://cdn.rawgit.com/Eonasdan/bootstrapdatetimepicker/
a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-
datetimepicker.css'>
</head>
<body>
<div class="container" style="margin-top: 20vh">
<div class="row">
<div class="col-12 text-center" style="height:4em"></div>
<div class="col-12 text-center" style="font-size: 4em;">
REQUEST EDIT
</div>
<div class="col-12 text-center" style="height:4em"></div>
</div>
<div class="form-group row">
<label for="colFormLabelLg" class="col-sm-2 col-form-label col- form-label-lg">Start Date & Time</label>
<div class="col-sm-10">
<div class="form-group">
<div class="input-group date" id="datetimepicker2">
<input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">End Date & Time</label>
<div class="col-sm-10">
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Notes / Reason</label>
<div class="col-sm-10">
<div class="form-group">
<div>
<input type="text" class="form-control" />
</div>
</div>
</div>
</div>
</div>
<div class="row" style="height: 3rem;"></div>
<div class="row" style="height: 3rem;">
<button type="button" class="btn btn-secondary btn-lg btn-block" style="width: 50%; margin-left: 25%;background-color: grey;">LOGIN</button>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js'> .
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js'></script>
<script src='https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js'></script>
<script src="js/index.js"></script>
</body>
</html>
上面的link如我所愿。但是,当我导出文件并在本地打开它时,我得到如下内容:
Image of local code
有谁知道如何获取它以便我的代码在本地运行?我直接从 codepen 导出了文件,没有做任何更改。
在本地更改这些行 html :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
https:
在样式表 url 中被遗忘。