在这里是新的，对这个游戏也是新的.到目前为止，我在家里通过工作完成了几周的课程，我可能会补充一句，我喜欢它.但通过实践，我试图创建一个页面使用 bootstrap 样式等.我有一个手风琴在页面上，也有一个 carousel ，都不工作时，通过Git中心托管.另外，当导航栏缩小时，汉堡按钮也就不能点击了.两者在本地都运行得很好，在jsfiddle上也一样.try 了不同的CDN放置组合，但都不能正常工作.佩奇具有响应性，专栏似乎工作得很好.不确定下一步或我需要分享的内容等，我猜我的代码？也许我只是在这里浏览我的.html页面(&P)？提前谢谢！
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;">© Nik 2023 · <a href="#">Privacy</a> · <a href="#">Terms</a> ·
<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>
另请参阅以下内容:
@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;
}
没有任何设备工作正常