Untitled

mail@pastecode.io avatar
unknown
plain_text
3 years ago
2.5 kB
3
Indexable
Never
<!DOCTYPE html>
<html>
    <head>
        <title>練習NavBar 導覽列</title>
        <meta charset="UTF-8">
        <!-- 響應式網站 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Boostrap5.0 導入程式 -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

        <!-- 連結CSS -->
        <link rel="stylesheet" href="navbar.css">
    </head>

    <body>

        <nav class="navbar navbar-expand-lg navbar-light">
          
            <div class="container-fluid">
                <!-- 品牌logo -->
                <a class="navbar-brand" href="#"><img width="50px" height="50px" src="images/cwc.png"></a>

                <!-- 第一部份：手機版 -->
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#linkbar">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <!-- 第二部份：桌上型電腦版 -->
                    
                <div class="collapse navbar-collapse" id="linkbar">
                    <!-- 列出內容 -->
                    <ul class="navbar-nav me-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">C w C Channel</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">關於我們</a>
                        </li>
                    </ul>
                    <!-- 列出到右邊 -->
                    <form style="width:300px;" class="input-group">
                        <input  class="form-control me-3" type="search" placeholder="搜尋">
                        <button  class="btn btn-success" type="submit">搜尋</button>

                    </form>
                 

                </div>
             
            

            </div>
        </nav>
   
    </body>

    
</html>