bootstrap 4导航栏折叠不起作用(使用jQuery-popper-bootstrap

萨亚法耶斯

美好的一天。

学习网络开发并尝试创建一个按钮以折叠导航栏。检查了以前类似问题中的答案,但没有找到对我有帮助的答案。

我必须提供数据目标的ID,并在脚本中有正确的顺序(JQuery-Popper-Bootstrap),并按照我学习视频课程中的示例进行设置。保存-单击切换图标按钮,但没有任何反应。

这是我的代码。我哪里错了?

<!DOCTYPE html>
<html lang="en">

<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>Ristorante Con Fusion</title>
</head>

<body>
<nav class="navbar navbar-dark navbar-expand-sm bg-primary fixed-top">
    <div class="container">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand mr-auto" href="#">Ristorante Con Fusion</a>
        <div class="collapse navbar-collapse" id="#Navbar">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

<header class="jumbotron">
    <div class="container">
        <div class="row-header">
            <div class="col-12 col-sm-6">
                <h1>Ristorante con Fusion</h1>
                <p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
            </div>
            <div class="col-12 col-sm">
            </div>
        </div>
    </div>
</header>

<div class="container">
    <div class="row row-content align-items-center">
        <div class="col-12 col-sm-4 order-sm-last col-md-3">
            <h3>Our Lipsmacking Culinary Creations</h3>
        </div>
        <div class="col col-sm order-sm-first col-md">
            <h2>Uthappizza</h2>
            <p>A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.</p>
        </div>
    </div>


    <div class="row row-content align-items-center">
        <div class="col-12 col-sm-4 col-md-3">
            <h3>This Month's Promotions</h3>
        </div>
        <div class="col col-sm col-md">
            <h2>Weekend Grand Buffet</h2>
            <p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person </p>
        </div>
    </div>

    <div class="row row-content align-items-center">
        <div class="col-12 col-sm-4 order-sm-last col-md-3">
            <h3>Meet our Culinary Specialists</h3>
        </div>
        <div class="col col-sm order-sm-first col-md">
            <h2>Alberto Somayya</h2>
            <h4>Executive Chef</h4>
            <p>Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. </p>
        </div>
    </div>
</div>

<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

拉菲·谢克(Rafee Shaik)

请在中删除“#”

<div class="collapse navbar-collapse" id="#Navbar">

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章