У меня проблемы с переключением панели навигации. Я использую последнюю версию Bootstrap v5.1.3

новичок здесь и извините, если я действительно испортил, еще не совсем знаю, как это работает. Вот мой код, хотя, как я сказал, мой навигационный переключатель не будет всплывать и показывать мои ссылки, я надеюсь, что это имеет смысл, поскольку я все еще новичок в кодировании. Я пытался добавить старые источники скриптов и старые ссылки на начальную загрузку, но пока ничего не работает.

    <!DOCTYPE html>
<html>

<head>
  <meta charset = "utf-8">
  <title>TinDog</title>
  <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin = "anonymous">
  <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin = "anonymous"></script>
  <link rel = "stylesheet" href = "css/styles.css">
</head>

<body>

  <section id = "title">

    <!-- Nav Bar -->
    <nav class = "navbar navbar-expand-lg navbar-dark bg-dark">
      <a class = "navbar-brand" href = "">tindog</a>
      <button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#navbarTogglerDemo01" aria-controls = "navbarTogglerDemo01" aria-expanded = "false" aria-label = "Toggle navigation">
        <span class = "navbar-toggler-icon"></span>
      </button>
      <div class = "collapse navbar-collapse" id = "#navbarTogglerDemo0">
        <ul class = "navbar-nav ms-auto">
          <li class = "nav-item">
            <a class = "nav-link" href = "">Contact</a>
          </li>
          <li class = "nav-item">
            <a class = "nav-link" href = "">Pricing</a>
          </li>
          <li class = "nav-item">
            <a class = "nav-link" href = "">Download</a>
          </li>
        </ul>
      </div>
    </nav>



    <!-- Title -->

    <div>
      <h1>Meet new and interesting dogs nearby.</h1>
      <button type = "button">Download</button>
      <button type = "button">Download</button>
    </div>
    <div>
      <img src = "images/iphone6.png" alt = "iphone-mockup">
    </div>

  </section>


  <!-- Features -->

  <section id = "features">

    <h3>Easy to use.</h3>
    <p>So easy to use, even your dog could do it.</p>

    <h3>Elite Clientele</h3>
    <p>We have all the dogs, the greatest dogs.</p>

    <h3>Guaranteed to work.</h3>
    <p>Find the love of your dog's life or your money back.</p>

  </section>


  <!-- Testimonials -->

  <section id = "testimonials">

    <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
    <img src = "images/dog-img.jpg" alt = "dog-profile">
    <em>Pebbles, New York</em>

    <!-- <h2 class = "testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
    <img class = "testimonial-image" src = "images/lady-img.jpg" alt = "lady-profile">
    <em>Beverly, Illinois</em> -->

  </section>


  <!-- Press -->

  <section id = "press">
    <img src = "images/techcrunch.png" alt = "tc-logo">
    <img src = "images/tnw.png" alt = "tnw-logo">
    <img src = "images/bizinsider.png" alt = "biz-insider-logo">
    <img src = "images/mashable.png" alt = "mashable-logo">

  </section>


  <!-- Pricing -->

  <section id = "pricing">

    <h2>A Plan for Every Dog's Needs</h2>
    <p>Simple and affordable price plans for your and your dog.</p>


    <h3>Chihuahua</h3>
    <h2>Free</h2>
    <p>5 Matches Per Day</p>
    <p>10 Messages Per Day</p>
    <p>Unlimited App Usage</p>
    <button type = "button">Sign Up</button>


    <h3>Labrador</h3>
    <h2>$49 / mo</h2>
    <p>Unlimited Matches</p>
    <p>Unlimited Messages</p>
    <p>Unlimited App Usage</p>
    <button type = "button">Sign Up</button>


    <h3>Mastiff</h3>
    <h2>$99 / mo</h2>
    <p>Pirority Listing</p>
    <p>Unlimited Matches</p>
    <p>Unlimited Messages</p>
    <p>Unlimited App Usage</p>
    <button type = "button">Sign Up</button>

  </section>


  <!-- Call to Action -->

  <section id = "cta">

    <h3>Find the True Love of Your Dog's Life Today.</h3>
    <button type = "button">Download</button>
    <button type = "button">Download</button>

  </section>


  <!-- Footer -->

  <footer id = "footer">

    <p>© Copyright TinDog</p>

  </footer>

</body>

</html>

    
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
17
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете попробовать этот код, я думаю, проблема будет решена

<!DOCTYPE html>
<html>

<head>
    <meta charset = "utf-8">
    <title>TinDog</title>
    <link rel = "stylesheet" href = "css/styles.css">
    <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"
        integrity = "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin = "anonymous">
</head>

<body>
    <section id = "title">
        <!-- Nav Bar -->
        <nav class = "navbar navbar-expand-lg navbar-light bg-light">
            <div class = "container-fluid">
                <a class = "navbar-brand" href = "#">Navbar</a>
                <button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse"
                    data-bs-target = "#navbarNavAltMarkup" aria-controls = "navbarNavAltMarkup" aria-expanded = "false"
                    aria-label = "Toggle navigation">
                    <span class = "navbar-toggler-icon"></span>
                </button>
                <div class = "collapse navbar-collapse" id = "navbarNavAltMarkup">
                    <div class = "navbar-nav">
                        <a class = "nav-link active" aria-current = "page" href = "#">Home</a>
                        <a class = "nav-link" href = "#">Contact</a>
                        <a class = "nav-link" href = "#">Pricing</a>
                        <a class = "nav-link disabled">Download</a>
                    </div>
                </div>
            </div>
        </nav>
        <!-- Title -->
        <div>
            <h1>Meet new and interesting dogs nearby.</h1>
            <button type = "button">Download</button>
            <button type = "button">Download</button>
        </div>
        <div>
            <img src = "images/iphone6.png" alt = "iphone-mockup">
        </div>
    </section>
    <!-- Features -->
    <section id = "features">

        <h3>Easy to use.</h3>
        <p>So easy to use, even your dog could do it.</p>

        <h3>Elite Clientele</h3>
        <p>We have all the dogs, the greatest dogs.</p>

        <h3>Guaranteed to work.</h3>
        <p>Find the love of your dog's life or your money back.</p>
    </section>
    <!-- Testimonials -->
    <section id = "testimonials">
        <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
        <img src = "images/dog-img.jpg" alt = "dog-profile">
        <em>Pebbles, New York</em>

        <!-- <h2 class = "testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
    <img class = "testimonial-image" src = "images/lady-img.jpg" alt = "lady-profile">
    <em>Beverly, Illinois</em> -->
    </section>
    <!-- Press -->
    <section id = "press">
        <img src = "images/techcrunch.png" alt = "tc-logo">
        <img src = "images/tnw.png" alt = "tnw-logo">
        <img src = "images/bizinsider.png" alt = "biz-insider-logo">
        <img src = "images/mashable.png" alt = "mashable-logo">

    </section>
    <!-- Pricing -->
    <section id = "pricing">
        <h2>A Plan for Every Dog's Needs</h2>
        <p>Simple and affordable price plans for your and your dog.</p>

        <h3>Chihuahua</h3>
        <h2>Free</h2>
        <p>5 Matches Per Day</p>
        <p>10 Messages Per Day</p>
        <p>Unlimited App Usage</p>
        <button type = "button">Sign Up</button>

        <h3>Labrador</h3>
        <h2>$49 / mo</h2>
        <p>Unlimited Matches</p>
        <p>Unlimited Messages</p>
        <p>Unlimited App Usage</p>
        <button type = "button">Sign Up</button>

        <h3>Mastiff</h3>
        <h2>$99 / mo</h2>
        <p>Pirority Listing</p>
        <p>Unlimited Matches</p>
        <p>Unlimited Messages</p>
        <p>Unlimited App Usage</p>
        <button type = "button">Sign Up</button>

    </section>

    <!-- Call to Action -->

    <section id = "cta">

        <h3>Find the True Love of Your Dog's Life Today.</h3>
        <button type = "button">Download</button>
        <button type = "button">Download</button>

    </section>

    <!-- Footer -->
    <footer id = "footer">
        <p>© Copyright TinDog</p>
    </footer>
    <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity = "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin = "anonymous"></script>
</body>

</html>

Эй, парень, ты легенда! оно работает! Не могли бы вы объяснить мне, как вы это исправили? Вам не обязательно, поскольку вы уже спасли меня здесь, но я хотел бы знать, как я могу исправить это в следующий раз.

BadSkywalka 07.05.2022 22:20

Перейдите по этой ссылке для js и css cdn link: getbootstrap.com/docs/5.1/начало работы/введение

Kamrul Hasan 08.05.2022 09:47

Попробуйте понять навигационную панель начальной загрузки отсюда: getbootstrap.com/docs/5.1/components/навигационная панель

Kamrul Hasan 08.05.2022 09:47

Другие вопросы по теме