導航欄元件演示

阿新 • • 發佈：2021-12-10

對於input的表單來說，.value即是表單中的值
meta http-equiv="X-UA-Compatible" content="IE=edge">
meta 中的name屬性設定了就容易被搜尋引擎搜到，提高SEO ;initial-scale=1用於表示頁面無縮放的展示在第一次被顯示的時候
meta http-equiv="X-UA-Compatible" content="IE=edge">!--對IE瀏覽器的操作

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap導航欄使用例項</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js">
    </script>
    <script src="js/bootstrap.min.js"></script>
</head>

<body>
    <nav class="navbar navbar-inverse"><!--黑色主題樣式;navbar-default為銀白色主題樣式-->
        <div class="container"> <!--導航欄頭部添加個container樣式用來限定寬度以支援響應式佈局-->
            <!--container-fluid佔滿全屏寬度-->
            <!-- 導航欄頭部 -->

            <div class="navbar-header"><!--navbar-header定義導航頭部；既然有了導航欄目，導航頭部有什麼作用麼
                        y應該是最左邊的商標之類的文字等，不過容易被顏色所覆蓋-->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example1"
                    aria-expanded="false"><!--data-toggle=按鈕指明需要摺疊的按鈕-->
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <!-- 導航欄目 -->
            <div class="collapse navbar-collapse" id="bs-example1"><!--navbar-collapse定義導航欄目表示可摺疊，id與前面的data-target屬性所對應-->
                <!--具體的導航欄目-->
                <ul class="nav navbar-nav"><!--navbar-nav定義-->
                    <li class="active">
                        <a href="#">連結1</a>
                    </li>
                    <li class="dropdown"> <!--dropdown可設定下拉選單-->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">下拉鍊接<span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu"><!--dropdown-menu代表下拉選單的選項-->
                            <li><a href="#">連結2</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">連結3</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right"><!--navbar-right定義最右邊導航欄-->
                    <li><a href="#">連結4</a></li>
                </ul>
            </div>
        </div>
    </nav>
</body>

努力拼搏吧，不要害怕，不要去規劃，不要迷茫。但你一定要在路上一直的走下去，儘管可能停滯不前，但也要走。