带 Bootstrap 的旋转木马、手风琴和警报
Carousel, Accordions, & Alerts w/ Bootstrap
我的老师一直在 class 布置我的 Lynda.com class 这些培训（Bootstrap 4 个基本培训）。
我不知道我的代码有什么问题。我直接从培训中复制了它，但我不确定发生了什么。
- 轮播将仅加载具有活动 class
的图像
- 手风琴不会显示内容，除非我应用该节目class
- 当我单击 'x'
时，警报没有消失
在一份文档中，我复制了代码并进行了更改以符合分配给我的作业的要求。另一方面，我直接从完成的文件 中复制粘贴了元素，当我 运行 它们 时，它们可以正常工作。这些文件都无法正常运行（这些文件用于与 Lynda 培训文件分开的作业）：
<html lang="en">
<head>
<title>Worksheet 8</title>
<!--
Author: Crab
Date: 11/20/2020
Filename: worksheet8.html
-->
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<header>
<h1 class="p-3 text-left text-light bg-dark d-md-none d-sm-block">Chapter 8 Worksheet</h1>
</header>
<header class="jumbotron jumbotron-fluid p-4 bg-dark d-none d-md-block">
<h1 class="display-1 mb-4 text-center text-light">Chapter 8 Worksheet</h1>
</header>
<div class="container">
<h2>Carousel</h2>
<div class="row">
<section class="col-12">
<div class="carousel slide" id="featured" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#feature" data-slide-to="0"></li>
<li data-target="#feature" data-slide-to="1"></li>
<li data-target="#feature" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item">
<img class="d-nlock w-100" src="images/image1.JPG" alt="Lifestyle Photo">
</div>
<div class="carousel-item">
<img class="d-nlock w-100" src="images/image2.JPG" alt="Mission">
<div class="carousel-caption d-none d-md-block">
<h3>Pete, owner of McAllister</h3>
<p>"Wisdom Pet Medicine is the only clinic around that will even book pet fish for appointments."</p>
</div>
</div>
<div class="carousel-item active">
<div><img class="d-nlock w-100" src="images/image3.JPG" alt="Vaccinations"></div>
</div>
</div>
<a class="carousel-control-prev" href="#featured" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true">
<span class="sr-only">Previous</span>
</span>
</a>
<a class="carousel-control-next" href="#featured" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true">
<span class="sr-only">Next</span>
</span>
</a>
</div>
<h2>Our Mission</h2>
<p>Wisdom Pet Medicine strives to blend the best in traditional and alternative medicine in the diagnosis and treatment of companion animals including dogs, cats, birds, reptiles, rodents, and fish. We apply the wisdom garnered in the centuries old tradition of veterinary medicine, to find the safest treatments and cures.</p>
<p>We strive to be your pet's medical experts from youth through the senior years. We build preventative health care plans for each and every one of our patients, based on breed, age, and sex, so that your pet receives the most appropriate care at crucial milestones. We want to give your pet a long and healthy life.</p>
</section>
</div><!-- row -->
<h2 class="pt-4">Accordion</h2>
<div class="accordion" id="servicesaccordion">
<div class="card">
<div class="card-header" id="groomingheading">
<h5 class="mb-0">
<a href="#grooming" data-toggle="collapse" aria-expanded="true" aria-controls="grooming">
Grooming
</a>
</h5>
</div><!-- card header -->
<div id="grooming" class="collapse show" data-parent="#servicesaccordion" aria-labelledby="groomingheading">
<div class="card-body">
<p>Our therapeutic grooming treatments help battle fleas, allergic dermatitis, and other challenging skin conditions.</p>
</div>
</div><!-- collapse -->
</div><!-- card -->
<div class="card">
<div class="card-header" id="generalhealthheading">
<h5 class="mb-0">
<a href="#generalhealth"
class="collapsed"
data-toggle="collapse"
aria-expanded="false"
aria-controls="generalhealth"
>General Health</a>
</h5>
</div><!-- card header -->
<div id="generalhealth" class="collapse" data-parent="#servicesaccordion" aria-labelledby="generalhealthheading">
<div class="card-body">
<p>Wellness and senior exams, ultrasound, x-ray, and dental cleanings are just a few of our general health services.</p>
</div>
</div><!-- card collapse -->
</div><!-- card -->
<div class="card">
<div class="card-header" id="nutritionheading">
<h5 class="mb-0">
<a href="#nutrition" class="collapsed" data-toggle="collapse"
aria-expanded="false">
Nutrition
</a>
</h5>
</div><!-- card header -->
<div id="nutrition" class="collapse" data-parent="#servicesaccordion" aria-labelledby="nutritionheading">
<div class="card-body">
<p>Let our nutrition experts review your pet's diet and prescribe a custom nutrition plan for optimum health and disease prevention.</p>
</div>
</div><!-- collapse -->
</div><!-- card -->
</div><!-- accordion -->
<h2 class="pt-4">Alert</h2>
<div class="alert alert-info alert-dismissable fade show">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="alert-heading">Standard Checkups</h4>
<p class="mb-2">Our standard checkups offer ultrasounds, x-rays and dental cleanings.</p>
<a href="#">More Info</a>
</div>
</div><!-- container -->
<script src="js/jquery.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>```
用这些替换最后 3 个
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
现在应该可以正常工作了，很可能是你的脚本标签有问题
我的老师一直在 class 布置我的 Lynda.com class 这些培训（Bootstrap 4 个基本培训）。
我不知道我的代码有什么问题。我直接从培训中复制了它，但我不确定发生了什么。
- 轮播将仅加载具有活动 class 的图像
- 手风琴不会显示内容，除非我应用该节目class
- 当我单击 'x' 时，警报没有消失
在一份文档中，我复制了代码并进行了更改以符合分配给我的作业的要求。另一方面，我直接从完成的文件 中复制粘贴了元素，当我 运行 它们 时，它们可以正常工作。这些文件都无法正常运行（这些文件用于与 Lynda 培训文件分开的作业）：
<html lang="en">
<head>
<title>Worksheet 8</title>
<!--
Author: Crab
Date: 11/20/2020
Filename: worksheet8.html
-->
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<header>
<h1 class="p-3 text-left text-light bg-dark d-md-none d-sm-block">Chapter 8 Worksheet</h1>
</header>
<header class="jumbotron jumbotron-fluid p-4 bg-dark d-none d-md-block">
<h1 class="display-1 mb-4 text-center text-light">Chapter 8 Worksheet</h1>
</header>
<div class="container">
<h2>Carousel</h2>
<div class="row">
<section class="col-12">
<div class="carousel slide" id="featured" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#feature" data-slide-to="0"></li>
<li data-target="#feature" data-slide-to="1"></li>
<li data-target="#feature" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item">
<img class="d-nlock w-100" src="images/image1.JPG" alt="Lifestyle Photo">
</div>
<div class="carousel-item">
<img class="d-nlock w-100" src="images/image2.JPG" alt="Mission">
<div class="carousel-caption d-none d-md-block">
<h3>Pete, owner of McAllister</h3>
<p>"Wisdom Pet Medicine is the only clinic around that will even book pet fish for appointments."</p>
</div>
</div>
<div class="carousel-item active">
<div><img class="d-nlock w-100" src="images/image3.JPG" alt="Vaccinations"></div>
</div>
</div>
<a class="carousel-control-prev" href="#featured" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true">
<span class="sr-only">Previous</span>
</span>
</a>
<a class="carousel-control-next" href="#featured" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true">
<span class="sr-only">Next</span>
</span>
</a>
</div>
<h2>Our Mission</h2>
<p>Wisdom Pet Medicine strives to blend the best in traditional and alternative medicine in the diagnosis and treatment of companion animals including dogs, cats, birds, reptiles, rodents, and fish. We apply the wisdom garnered in the centuries old tradition of veterinary medicine, to find the safest treatments and cures.</p>
<p>We strive to be your pet's medical experts from youth through the senior years. We build preventative health care plans for each and every one of our patients, based on breed, age, and sex, so that your pet receives the most appropriate care at crucial milestones. We want to give your pet a long and healthy life.</p>
</section>
</div><!-- row -->
<h2 class="pt-4">Accordion</h2>
<div class="accordion" id="servicesaccordion">
<div class="card">
<div class="card-header" id="groomingheading">
<h5 class="mb-0">
<a href="#grooming" data-toggle="collapse" aria-expanded="true" aria-controls="grooming">
Grooming
</a>
</h5>
</div><!-- card header -->
<div id="grooming" class="collapse show" data-parent="#servicesaccordion" aria-labelledby="groomingheading">
<div class="card-body">
<p>Our therapeutic grooming treatments help battle fleas, allergic dermatitis, and other challenging skin conditions.</p>
</div>
</div><!-- collapse -->
</div><!-- card -->
<div class="card">
<div class="card-header" id="generalhealthheading">
<h5 class="mb-0">
<a href="#generalhealth"
class="collapsed"
data-toggle="collapse"
aria-expanded="false"
aria-controls="generalhealth"
>General Health</a>
</h5>
</div><!-- card header -->
<div id="generalhealth" class="collapse" data-parent="#servicesaccordion" aria-labelledby="generalhealthheading">
<div class="card-body">
<p>Wellness and senior exams, ultrasound, x-ray, and dental cleanings are just a few of our general health services.</p>
</div>
</div><!-- card collapse -->
</div><!-- card -->
<div class="card">
<div class="card-header" id="nutritionheading">
<h5 class="mb-0">
<a href="#nutrition" class="collapsed" data-toggle="collapse"
aria-expanded="false">
Nutrition
</a>
</h5>
</div><!-- card header -->
<div id="nutrition" class="collapse" data-parent="#servicesaccordion" aria-labelledby="nutritionheading">
<div class="card-body">
<p>Let our nutrition experts review your pet's diet and prescribe a custom nutrition plan for optimum health and disease prevention.</p>
</div>
</div><!-- collapse -->
</div><!-- card -->
</div><!-- accordion -->
<h2 class="pt-4">Alert</h2>
<div class="alert alert-info alert-dismissable fade show">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="alert-heading">Standard Checkups</h4>
<p class="mb-2">Our standard checkups offer ultrasounds, x-rays and dental cleanings.</p>
<a href="#">More Info</a>
</div>
</div><!-- container -->
<script src="js/jquery.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>```
用这些替换最后 3 个
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
现在应该可以正常工作了，很可能是你的脚本标签有问题