英文:
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 adjustfor 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 specifiedbythe stylesheet otherwise. </strong><p>The rest of the accordian can all be opened, and the window will remain open, until the header is clickedagain to close it. This is another button style added externally through Bootstraps CSS. Also, the bluehue has been removed through CSS that is normally present (for accessibility reasons) when a header of anaccordian 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, lacusnec condimentum rutrum, felis neque sollicitudin velit, sed pharetra massa mi quis massa. Morbi auctor felisdiam, id tincidunt mauris dignissim vitae. Sed tincidunt sit amet felis eget vulputate. Mauris bibendumcondimentum tincidunt. Pellentesque nulla ligula, porttitor in quam at, vehicula facilisis urna. Suspendissemolestie, libero et hendrerit porta, risus libero vehicula turpis, at mollis massa nulla in velit. Quisqueut 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 nisiaccumsan, venenatis cursus quam. Phasellus efficitur augue erat. Curabitur condimentum hendrerit quam nonmaximus. In volutpat tellus vitae nisi vulputate efficitur. Duis sodales sagittis rutrum. In quis velitposuere, rhoncus neque in, suscipit enim. Aliquam condimentum magna at euismod sollicitudin. Duis nullaurna, bibendum et justo vel, ullamcorper pretium erat. Sed imperdiet, purus vitae vulputate maximus, estdiam 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 finibusturpis scelerisque eget. In porta felis eget facilisis bibendum. Aliquam id mi consequat, porttitor velitconvallis, tincidunt urna. Quisque placerat tellus non mauris eleifend iaculis. Vivamus porttitor velitnunc, id facilisis erat scelerisque eget. Nunc rutrum laoreet augue sed egestas. Phasellus eget estfringilla odio finibus volutpat maximus ut mauris. Morbi sollicitudin semper nunc eget fringilla. Namgravida dictum urna, at ullamcorper quam sagittis convallis. Aenean consequat ipsum a arcu efficiturultricies. 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's12 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 recordproducer, 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 AndrewFerguson 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 acclaimfor 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 <kbdstyle="font-size: 20px;">style="max-height...";</kbd> attributes to keep a consistant negative space fromouter 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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论