\

• bootstrap4 navbar 導覽列範例
> 2019-04-24 10:46 發布

由於每次建站導覽列都要重新建構非常麻煩，於是將已經建過的 bootstrap4 navbar 導覽列範例放在這裡，以利未來取用，本帖還會陸續新增：

 

黑色置頂導覽列：

 

程式碼如下:

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    
    <div class="container-fluid d-flex justify-content-between">

        <!-- brand -->
        <a href="index.php" class="navbar-brand d-flex align-items-center">
            <!-- icon -->
            <svg xmlns="https://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2">
				<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
				<circle cx="12" cy="13" r="4"></circle>
			</svg>
            
            <!-- title -->
            <strong>網站標題</strong>
        </a>
        
        <!-- RWD 三條線 -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- 主選單 -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                
                <li class="nav-item dropdown mr-2">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    下拉選單1
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="link1.php">link1</a>
                        <a class="dropdown-item" href="link2.php">link2</a>
                    </div>
                </li>
                <li class="nav-item dropdown mr-2">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    下拉選單2
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="link1.php">link1</a>
                        <a class="dropdown-item" href="link2.php">link2</a>
                    </div>
                </li>
               <li class="nav-item dropdown mr-2">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    下拉選單3
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="link1.php">link1</a>
                        <a class="dropdown-item" href="link2.php">link2</a>
                    </div>
                </li>

                <li class="nav-item mr-2">
                    <a href="login.php" class="nav-link">登入</a>
                </li>
                
            </ul>
            
       </div>
        
    </div><!--container d-flex justify-content-between-->
    
</nav>        

快速連結：

bootstrap 官網：bootstrap navbar 

MDB： 更多國外範本

 

標籤：bootstrap4,navbar,html 　|　人氣：167 　|　留言數：0 　|　最後更新：2019-04-24 10:46