英文:
page working fine locally and on jsfiddle but not through GitHub
问题
新手，也是第一次尝试。迄今为止，在工作中通过内部课程完成了数周的学习，我非常喜欢，我可以补充一下。但是通过实践，我尝试使用Bootstrap样式等创建了一个页面。我在页面上有一个手风琴和一个轮播，但在GitHub托管时，它们都无法正常工作。而且，当导航栏收缩时，汉堡按钮无法点击？在本地和jsfiddle上都能正常工作。我尝试了不同的CDN放置组合，但无法使任何东西正常工作。页面具有响应性，列似乎也正常工作。不确定下一步或需要共享什么，我猜测是我的代码？也许我只需复制并粘贴我的.html页面在这里？先谢谢了！
英文:
new here, and also new to the game. Weeks course done in house through work so far, loving it might i add. But through practice i have tried to create a page using bootstrap styling etc. I have an accordion on the page and also a carousel, neither work when hosted through git hub. Also when the navbar shrinks, the burger button is 'un-clickable'? Both work fine locally, and also on jsfiddle. Tried different combos of cdn placement but cant get anything working properly. Page has responsiveness, and columns seem to work fine. Not sure of next steps or what i need to share etc, im guessing my code? maybe i just c&p my .html page here? thanks in advance!
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport " content="width=device-width, initial-scale=1">
<title>Bootstrap & JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- My Style Sheet -->
<link href="styles/bootstrap_page.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="padding-left: 15%; padding-right: 15%;">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #EEF0EB;">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03"
aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a href="home.html"><img src="images/NE_logo (1).png" style="height: 70px; width: 70px;"></a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav me-auto mb-2 mb-lg-0" style="font-size: 30px;">
<li class="nav-item">
<a class="nav-link" href="home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="html.html">HTML</a>
</li>
<li class="nav-item">
<a class="nav-link" href="html+css.html">HTML&CSS</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">BS&JS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="boot_JS1.html">BS&JS1</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- header section -->
<div class="container" style="font-family: Dongle; color: #153243; text-align: center;">
<div class="page-header">
<h1 style="font-size: 80px;">Made using HTML, CSS, Bootstrap and JavaScript</h1>
</div>
<hr>
<p style="padding: 0; font-size: 40px;">This is a responsive webpage. Meaning that it will automatically adjust
for different screen sizes and viewports. Change your window size to see how it 'reponds'.</p>
</div>
<br>
<!-- accordian -->
<div class="accordion" id="bootsrap_accordion">
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne"
style="font-size: 50px; color: #153243; background-color: #B4B8AB;">
The Accordian
</button>
</h2>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
aria-labelledby="panelsStayOpen-headingOne" data-bs-parent="bootsrap_accordion">
<div class="accordion-body" style="font-size: 25px;">
<strong>This is the body of the accordian. This first accordian body is shown by default, unless specified
by
the stylesheet otherwise. </strong>
<p>The rest of the accordian can all be opened, and the window will remain open, until the header is clicked
again to close it. This is another button style added externally through Bootstraps CSS. Also, the blue
hue has been removed through CSS that is normally present (for accessibility reasons) when a header of an
accordian is clicked.
Removed on the external stylesheet: <br>
<kbd style="font-size: 14px; padding: 0; background-color: #153243;">: focus { <br>
outline: 0 !important; <br>
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important; <br>
}
</kbd>
</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"
aria-controls="panelsStayOpen-collapseTwo"
style="font-size: 50px; color: #153243; background-color: #B4B8AB; background-color: #B4B8AB;">
Paragraph Two
</button>
</h2>
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse"
aria-labelledby="panelsStayOpen-headingTwo" data-bs-parent="bootsrap_accordion">
<div class="accordion-body" style="font-size: 25px;">
Donec convallis nulla eget metus posuere, ut viverra turpis tristique. Ut volutpat est id sapien dignissim,
eu interdum ex ornare. Phasellus auctor posuere neque, eu lacinia felis dapibus ac. Nunc porttitor, lacus
nec condimentum rutrum, felis neque sollicitudin velit, sed pharetra massa mi quis massa. Morbi auctor felis
diam, id tincidunt mauris dignissim vitae. Sed tincidunt sit amet felis eget vulputate. Mauris bibendum
condimentum tincidunt. Pellentesque nulla ligula, porttitor in quam at, vehicula facilisis urna. Suspendisse
molestie, libero et hendrerit porta, risus libero vehicula turpis, at mollis massa nulla in velit. Quisque
ut gravida elit, molestie accumsan ante.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false"
aria-controls="panelsStayOpen-collapseThree"
style="font-size: 50px; color: #153243; background-color: #B4B8AB;">
Paragraph Three
</button>
</h2>
<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse"
aria-labelledby="panelsStayOpen-headingThree" data-bs-parent="bootsrap_accordion">
<div class="accordion-body" style="font-size: 25px;">
Sed eget arcu tristique felis venenatis convallis in non magna. Praesent justo felis, bibendum vel nisi
accumsan, venenatis cursus quam. Phasellus efficitur augue erat. Curabitur condimentum hendrerit quam non
maximus. In volutpat tellus vitae nisi vulputate efficitur. Duis sodales sagittis rutrum. In quis velit
posuere, rhoncus neque in, suscipit enim. Aliquam condimentum magna at euismod sollicitudin. Duis nulla
urna, bibendum et justo vel, ullamcorper pretium erat. Sed imperdiet, purus vitae vulputate maximus, est
diam malesuada nibh, non blandit nulla ante in dolor. Donec venenatis elit sed consectetur pellentesque.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseFour" aria-expanded="false"
aria-controls="panelsStayOpen-collapseFour"
style="font-size: 50px; color: #153243; background-color: #B4B8AB;">
Paragraph Four
</button>
</h2>
<div id="panelsStayOpen-collapseFour" class="accordion-collapse collapse"
aria-labelledby="panelsStayOpen-headingFour" data-bs-parent="bootsrap_accordion">
<div class="accordion-body" style="font-size: 25px;">
Nunc eu dolor dignissim, tristique turpis tristique, viverra arcu. Nulla scelerisque cursus ex, nec finibus
turpis scelerisque eget. In porta felis eget facilisis bibendum. Aliquam id mi consequat, porttitor velit
convallis, tincidunt urna. Quisque placerat tellus non mauris eleifend iaculis. Vivamus porttitor velit
nunc, id facilisis erat scelerisque eget. Nunc rutrum laoreet augue sed egestas. Phasellus eget est
fringilla odio finibus volutpat maximus ut mauris. Morbi sollicitudin semper nunc eget fringilla. Nam
gravida dictum urna, at ullamcorper quam sagittis convallis. Aenean consequat ipsum a arcu efficitur
ultricies. Sed gravida turpis in turpis posuere, sed faucibus mi consectetur.
</div>
</div>
</div>
<br>
<br>
<hr>
<br>
<!-- Feature section-->
<div class="container" style="font-family: Dongle; color: #153243; text-align: center;">
<p style="padding: 0; font-size: 40px;">This next section is a responsive 'Feature' section. It uses Bootstrap's
12 column grid system to re-size and maneuver the text and images depending on the screen width. </p>
</div>
<br><br>
<div class="row featurette" style="color: #153243; ">
<div class="row">
<div class="col-md-7 my-auto">
<h1 style="font-size: 60px;"">Fred Again..</h1>
<p style=" font-family: Dongle; color: #153243; font-size: 30px;">
Frederick John Philip Gibson, known professionally as Fred Again or simply Fred, is a British record
producer, singer, songwriter, multi-instrumentalist, and DJ.
</p>
</div>
<div class="col-md-5">
<img src="images/carousel/fred_again.jpg" class="featurette-image img-fluid mx-auto" width="500"
height="500" style="border-radius: 2.5%;" />
<rect width="100%" height="100%" fill="var(--bs-secondary-bg)" />
</svg>
</div>
</div>
</div>
<br>
<hr><br>
<!-- new feature -->
<div class="row featurette" style="color: #153243; font-family: Dongle;">
<div class="row">
<div class="col-md-7 order-md-2 my-auto">
<h1 style="font-size: 60px;">Bicep</h1>
<p style="font-family: Dongle; color: #284B63; font-size: 30px;">
Bicep are an electronic music production and DJ duo from Belfast, Northern Ireland, consisting of Andrew
Ferguson and Matthew McBriar. <br>
</p>
</div>
<div class="col-md-5 order-md-1">
<img src="images/carousel/bicep.jpg" class="featurette-image img-fluid mx-auto" width="500" height="500"
style="border-radius: 2.5%;" />
<rect width="100%" height="100%" fill="var(--bs-secondary-bg)" />
</div>
</div>
</div>
<br>
<hr>
<br>
<!-- new feature -->
<div class="row featurette" style="color: #153243; font-family: Dongle;">
<div class="row">
<div class="col-md-7 my-auto">
<h1 style="font-size: 60px;">Dave</h1>
<p style="font-family: Dongle; color: #284B63; font-size: 30px;">
David Orobosa Omoregie (born 5 June 1998), also known as Dave, is an English rapper. He has gained acclaim
for his socially conscious lyricism and wordplay.
</p>
</div>
<div class="col-md-5">
<img src="images/carousel/dave.jpeg" class="featurette-image img-fluid mx-auto" width="500" height="500"
style="border-radius: 2.5%;" />
<rect width="100%" height="100%" fill="var(--bs-secondary-bg)" />
</svg>
</div>
</div>
</div>
<br>
<br>
<hr>
<br>
<!-- carousel -->
<div class="container" style="font-family: Dongle; color: #153243; text-align: center;">
<p style="padding: 0; font-size: 40px;">A simple carousel with <kbd
style="font-size: 20px;">style="max-height...";</kbd> attributes to keep a consistant negative space from
outer edge throughout the page.</p>
</div>
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/carousel/1.jpg" class="d-block w-100" style="max-height: 749px;" alt="...">
</div>
<div class="carousel-item">
<img src="images/carousel/2.jpg" class="d-block w-100" style="max-height: 749px;" alt="...">
</div>
<div class="carousel-item">
<img src="images/carousel/3.jpg" class="d-block w-100" style="max-height: 749px;" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<br>
<!-- footer -->
<footer class="container-fluid bg-4"
style="font-family: Arial, Helvetica, sans-serif; color: #153243; font-size: 15px;">
<p style="float: right;"><a href="#">Back to top</a></p>
<p style="float: left;">&copy; Nik 2023 &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a> &middot;
<a href="you_had_to.html">DONT CLICK</a></p>
</footer>
<!-- scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
</body>
</html>
css:
@import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300&display=swap');
body {
font: 20px Dongle;
color: #EEF0EB;
background-color: #EEF0EB;
}
.navbar .navbar-brand {
display: inline-block;
padding: 5px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
display: flex;
}
.navbar-nav li a:hover {
color: #153243 !important;
font-size: 30px !important;
}
.navbar-brand img {
height: 55;
width: 55;
margin-right: 20px;
max-width: 50px;
max-height: 50px;
align-self: center !important;
margin-top: 22px !important;
}
hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, #B4B8AB, #153243, rgba(0, 0, 0, 0));
}
/* stops the accordian having a blue hue around clicked headers */
:focus {
outline: 0 !important;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
}
.footer {
color: inherit !important;
}
.featurette-divider {
margin: 80px 0; /* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */
.featurette-heading {
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
}
.featurette-heading {
font-size: 50px;
}
}
@media (min-width: 62em) {
.featurette-heading {
margin-top: 7rem;
}
nothing working correctly
答案1
得分: 0
popper.min.js 和 bootstrap.min.js 都包含在 bootstrap.bundle.min.js 中，因此您不需要单独的 popper.min.js。我还应该说一下，Bootstrap 不再需要 jQuery，因此也不再需要它。
而且，我猜 htmlpreview.github.io/ 适用于基本的纯HTML文件，因此请尝试在像Github Pages这样的适当服务器上托管它。
英文:
Both popper.min.js and bootstrap.min.js are included in bootstrap.bundle.min.js therefore you don't need individual popper.min.js. I should also say that Bootstrap no longer requires jQuery therefore this's not needed either.
And I guess htmlpreview.github.io/ is for basic and vanilla HTML files therefore try to host it on a proper server like Github Pages.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论