Question

这是我的codepen： 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>

以上链接正如我所愿。但是，当我导出文件并在本地打开它时，我得到的内容如下：

Image of local code

有谁知道如何获取它以便我的代码在本地运行？我直接从codepen导出文件，但没有改变任何内容。

Answer 1

更改本地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:在样式表网址中被遗忘。

JS和Bootstrap在Codepen中工作，但在本地打开时不能工作

1 个答案: