Блог

Главная - Вопросы по программированию - Карусель, Аккордеоны и оповещения с загрузкой

Карусель, Аккордеоны и оповещения с загрузкой

#html #css #bootstrapper

#HTML #css — код #загрузчик

Вопрос:

Мой учитель назначал моему классу эти тренинги с урока по Lynda.com (Тренинги по основам Bootstrap 4).

Я понятия не имею, что не так с моим кодом. Я скопировал это прямо с тренингов и не уверен, что произошло.

  • В карусель будут загружаться только изображения с активным классом
  • Аккордеон не будет отображать содержимое, если я не применю класс show
  • Предупреждение не исчезает, когда я нажимаю на «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">amp;times;</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>```

Ответ №1:

Замените последние 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>

И теперь все должно работать нормально, скорее всего, это была проблема с вашими тегами скрипта