html – 为什么bootstrap在我的github网页上不起作用？_html-js-css

概述我创建了一个网页,并将其链接到cnd bootstrap扩展,但是当我启动网页时,我的布局看起来很简单并且展开了. 这是该网站的链接 kellito14.github.io 这是下面的代码： <!DOCTYPE html><html lang="en"><head> <title>Home</title> <meta charset="utf-8"> <meta name="vie 我创建了一个网页,并将其链接到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 >  <div >  <div >    <div >       <img src="" alt="my falcon logo" wIDth="113" height="80">  </div>      <div  >  </div>      <div >  </div>  </div> </div></header><nav >  <div >    <div >      <a  href="#">WebSitename</a>    </div>    <ul >    <li  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 >  <div ><div ID="myCarousel" >    <!-- Indicators -->    <ol >    <li data-target="#myCarousel" data-slIDe-to="0" ></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  role="ListBox">      <div >        <img src="images/mfrlogo.jpg" alt="slIDe1" wIDth="460" height="345" >      </div>      <div >        <img src="images/enactusimg.jpg" alt="slIDe2" wIDth="460" height="345" >      </div>      <div >        <img src="images/enactusslIDe.jpg" alt="slIDe3" wIDth="460" height="345" >      </div>    </div><button ID="btnslIDe" ><a href="subscribe.HTML">Contribute!<a/></button>    <!-- left and right controls -->    <a  href="#myCarousel" role="button">      <span  aria-hIDden="true"></span>      <span >PrevIoUs</span>    </a>    <a  href="#myCarousel" role="button">      <span  aria-hIDden="true"></span>      <span >Next</span>    </a>  </div>  <div >    <div >        <img src="images/fb.png" alt="facebook icon">        <img src="images/tw.png" alt=" twitter icon">      </div>  </div>   <div  >    <div  >      <p> Subscribe to keep up to date on the latests podcasts and vIDeos!</p>      <a href="subscribe.HTML"><button >Subscribe</button></a>    </div>    <div  >      <p> The current List of podcasts!</p>      <a href="podcasts.HTML"><button >podcasts</button></a>    </div>    <div  >      <p> Current VIDeos </p>      <a href="vIDeos.HTML"><button >VIDeos</button></a>    </div>    <div  >      <p>Learn more about us  </p>      <a href="about.HTML"><button onclick="myradio()">About US</button></a>    </div>  </div>  </div><div  >  <button >Section 1</button>     <div >  <button onclick ="myradio()" ><span  aria-hIDden="true"></span> live Music</button></div>  <button >Section 2</button> <div >        <div >    <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 ><div >    <div >      <p>Website created by: Kelly Anaya</p>    </div>  </div>  <div >      <div >      <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加载它.

总结

以上是内存溢出为你收集整理的html – 为什么bootstrap在我的github网页上不起作用？全部内容，希望文章能够帮你解决html – 为什么bootstrap在我的github网页上不起作用？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1068712.html