个人中心
gpt4 book ai didi

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

转载 作者：技术小花猫 更新时间：2023-10-29 12:05:43 25 4
gpt4 key购买 nike

我创建了一个网页并将其链接到 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, Two, 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 网页上不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38287901/

25 4 0
文章推荐： html - 文本一侧的 CSS 水平线
文章推荐： linux - RPM 使用专有安装程序打包 tarball
文章推荐： linux - perl 内存不足错误
文章推荐： linux - 拆分返回值后管道命令
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com