bootstrap導航欄學習

宋霸霸發表於2024-06-28
boot
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css" rel="stylesheet">
    
</head>
<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>

  <!-- 排版 -->
  <!-- 按鈕 -->
  <!-- 列表 -->
  <!-- 導航 -->



    <!-- 導航欄 -->
    <!-- navbar -->
    <!-- bg-light背景灰色 -->
    <!-- bg-dark背景顏色黑色 -->
    <!-- navber-light字型顏色，黑色 -->
    <!-- navbar-dark字型顏色，白色 -->

    <!-- navber-expard一行顯示 -->

    <!-- navber-expard-xl 1200px -->
    <!-- navber-expard-lg 992px-->
    <!-- navber-expard-md 768px-->
    <!-- -expard-sm 567px -->


 <nav class="navbar navbar-dark bg-dark navbar-expand "> 
    <!-- <a class="navbar-brand">小明明天下落不明</a> -->
    <!-- <span class="navbar-brand">小紅不愛看小紅書</span> -->
    <a class="navbar-brand">
        <img 
        width="30"
        height="30"
        src="新建資料夾\1.jpeg"/>
        老大
    </a>
    <!-- 進入手機頁面，不讓它3顯示導航按鈕，當點選一個按鈕時，才讓它顯示出來 -->
   
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbar" >
    <span class="navbar-toggler-icon"></span>
   </button>
    
   
   <div id="navbar" class="collapse navbar-collapse">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link">首頁</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link">商品</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link">關於我們</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link">招聘</a>
            </li>
            <!-- <li class="nav-item ">
                <a class="nav-link">註冊</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link">登入</a>
            </li> -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle " data-toggle="dropdown">個人中心</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item">賬戶資訊</a>
                    <a class="dropdown-item">訂單列表</a>
                    <hr/>
                    <a class="dropdown-item">退出</a>
                </div>
            </li>
       </ul>
    </div>
   
 </nav>
    
</body>
</html>

　　

相關文章