我创建了一个网页,并将其链接到cnd bootstrap扩展,但是当我启动网页时,我的布局看起来很简单并且展开了.
这是该网站的链接
这是该网站的链接
kellito14.github.io
这是下面的代码：
<!DOCTYPE html> <html lang="en"> <head> <title>Home</title> <Meta charset="utf-8"> <Meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="source/slider.js"></script> <script src="//connect.soundcloud.com/sdk.js"></script> <script type="text/javascript"> function myradio(){ myWindow = window.open("radiopage.PHP","_blank","width=300,height=100"); document.getElementById('radioplayer').pause(); } </script> </head> <!--<body onload="javascript: myradio()" >--> <body> <header> <div class="container-fluid"> <div class="container"> <div class="row"> <div class="col-md-4"> <img src="" alt="my falcon logo" width="113" height="80"> </div> <div class="col-md-4" > </div> <div class="col-md-4"> </div> </div> </div> </header> <nav class="navbar"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <ul class="nav navbar-nav"> <li class="active" id="home"><a href="index.html">Home</a></li> <li ><a href="about.PHP">About</a></li> <li><a href="podcast.PHP">podcasts</a></li> <li><a href="video.PHP">Videos</a></li> <li><a href="subscribe.PHP">Subscribe</a></li> </ul> </div> </nav> <div class="container-fluid"> <div class="col-md-10"> <div id="myCarousel" class="carousel slide"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listBox"> <div class="item active"> <img src="images/mfrlogo.jpg" alt="slide1" width="460" height="345" style=" width: 60%;height:400px;"> </div> <div class="item"> <img src="images/enactusimg.jpg" alt="slide2" width="460" height="345" style=" width: 60%;height:400px;"> </div> <div class="item"> <img src="images/enactusslide.jpg" alt="slide3" width="460" height="345" style=" width: 60%;height:400px;"> </div> </div> <button id="btnslide" class="btn btn-md "><a href="subscribe.html">Contribute!<a/></button> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" role="button"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">PrevIoUs</span> </a> <a class="right carousel-control" href="#myCarousel" role="button"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <div class="row"> <div class="col-md-8"> <img src="images/fb.png" alt="facebook icon"> <img src="images/tw.png" alt=" twitter icon"> </div> </div> <div class="row-centered" style="padding-left: 5px;"> <div class="col-md-2 bg-3" style="min-width: 20%; padding: 5px;"> <p> Subscribe to keep up to date on the latests podcasts and videos!</p> <a href="subscribe.html"><button class="btn btn-color">Subscribe</button></a> </div> <div class="col-md-2 bg-3" style="min-width: 20%;padding: 5px;"> <p> The current list of podcasts!</p> <a href="podcasts.html"><button class="btn btn-color">podcasts</button></a> </div> <div class="col-md-2 bg-3" style="min-width: 20%;padding: 5px;"> <p> Current Videos </p> <a href="videos.html"><button class="btn btn-color">Videos</button></a> </div> <div class="col-md-2 bg-3" style="min-width: 20%;padding: 5px;"> <p>Learn more about us </p> <a href="about.html"><button onclick="myradio()"class="btn btn-color">About US</button></a> </div> </div> </div> <div class="col-md-2 sidenav" style="overflow:hidden;"> <button class="accordion">Section 1</button> <div class="panel"> <button onclick ="myradio()" class="btn btn-color"><span class="glyphicon glyphicon-play" aria-hidden="true"></span> Live Music</button> </div> <button class="accordion">Section 2</button> <div class="panel"> <div class="slideCon"> <div class= "sD"><img id= "img1" src="Images/image1.jpg" alt="" width="100" height="100" border="0" /></div> <div class= "sDTwo"><img id= "img2" src="Images/image2.jpg" alt="" width="100" height="100" border="0" /></div> <div class= "sDThree"><img id ="img3" src="Images/image3.jpg" alt="" width="100" height="100" border="0" /></div> </div> </div> </div> </div> </div> <footer class="container-fluid bg-4 text-center"> <div class="row"> <div class="col-md-4"> <p>Website created by: Kelly Anaya</p> </div> </div> <div class="row"> <div class="col-md-4"> <p>Please follow Us:</p> </div> </div> </footer > </body> <script> $('.carousel').carousel({interval: 10000}); </script> <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script type="text/javascript"> $(document).ready(function(){ //class of the divs containing slide One,Two,and Three var slideOne= $(".sD"),slideTwo= $(".sDTwo"),slideThree= $(".sDThree"); //ID's of images One,and Three. var imgOne = document.getElementById("img1"),imgTwo = document.getElementById("img2"),imgThree = document.getElementById("img3"); var adNum= 0; var ImgArray = new Array(); for(;adNum<=8; adNum++){ ImgArray[adNum]= new Image(); ImgArray[adNum].src= "Images/image"+(adNum+1)+".jpg"; } adNum= 0; $(".slideCon").delay(750).toggle(); startSlide(); function startSlide(){ slideOne.fadeIn(2500); slideTwo.fadeIn(2750); slideThree.fadeIn(3000); slideOne.fadeOut(2500); slideTwo.fadeOut(2750); slideThree.fadeOut(3000); setTimeout(function(){imgOne.src=ImgArray[adNum].src;},5500); setTimeout(function(){imgTwo.src=ImgArray[adNum+1].src;},5500); setTimeout(function(){ imgThree.src=ImgArray[adNum+2].src;},5500); if(adNum < 6 ){// 9 is number of images setTimeout(function(){adNum+=3;},5000); }//end if else{ setTimeout(function(){adNum=0;},5000); } setTimeout(function(){startSlide();},6500); }//end startSlide }); </script> <!-- for the accordion--> <script type="text/javascript"> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function(){ this.classList.toggle("active"); this.nextElementSibling.classList.toggle("show"); } } </script> </html>
解决方法
这是您收到的错误消息,
(index):7 Mixed Content: The page at 'https://kellito14.github.io/' was loaded over HTTPS,but requested an insecure stylesheet 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'. This request has been blocked; the content must be served over HTTPS. (index):1 Mixed Content: The page at 'https://kellito14.github.io/' was loaded over HTTPS,but requested an insecure script 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'. This request has been blocked; the content must be served over HTTPS.
所以问题是混合内容,解决这个问题的一种方法是改变指向https的链接,
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
或者如果你不确定http / https,那就这样：
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
浏览器将自动决定是通过http还是https加载它.
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
