使用Bootstrap製做導航欄

時間 2020-01-18
原文原文鏈接
廢話很少說，直接上代碼。javascript
<body ><!--若採用浮動，則須要加style="padding-top: 60px;"-->
    <nav class="navbar navbar-default navbar-static-top">
    <!--navbar navbar-default:首先聲明是一個導航欄，而後聲明用導航欄的default樣式
        能夠經過navbar-default、navbar-inverse，navbar-collapse等爲導航欄設置總體樣式
        navbar-fixed-top,將導航欄浮動 navbar-static-top，將導航欄固定
        更多搭配，自行配置！
    -->
        <div class="container">
            <a href="#" class="navbar-brand"><img src="img/logo.png" style="width: 50px; height: 30px;"></a>
            <!-- logo位置，href是網站首頁的地址 -->
            <div class="navbar-header"><!-- 設置爲 頭部文件-->
                <button class="navbar-toggle" data-toggle= "collapse" data-tatget"#zhankai-btn">
                    <!--navbar-toggle:首先聲明一個，摺疊按鈕.
                        data-toggle:聲明打開對象
                        collapse：聲明打開方法：摺疊
                        data-tatget:聲明目標對象，這裏根據id作關聯 
                        該摺疊功能，存在js版本，js加載的順序，瀏覽器等緣由，點擊失效的問題
                    -->
                    <span>>>></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="zhankai-btn">
            <!-- collapse navbar-collapse：定義一個根據不一樣屏幕能夠摺疊的導航欄
                將能夠摺疊的內容，放於摺疊容器中
            -->
                <ul class="nav navbar-nav">
                    <!--nav navbar-nav:首先聲明是一個導航內容，而後聲明該內容屬於navbar -->
                    <li class="active"><a href="#">首頁</a></li><!--active爲當前激活狀態 -->
                    <li><a href="#">視頻</a></li>
                    <li><a href="#">圖片</a></li>
                    <li><a href="#">文章</a></li>
                    <li><a href="#">教程</a></li>
                    <li><a href="#">關於</a></li>
                    <li><a href="#">下載</a></li>
                    <li><a href="#">家園</a></li>
                </ul>
                <form class="navbar-form navbar-left" name="" action="" onsubmit="return XXXX">
                <!-- 按照現實中的狀況製做一個搜索框
                    navbar-form:聲明這是一個導航欄中的form表單,navbar-left左對齊
                -->
                    <input type="text" placeholder="請輸入查找的內容" class="form-control"/>
                    <button type="submit">
                        <span class="glyphicon glyphicon-search"></span>
                        <!--glyphicon glyphicon-search:先聲明使用Bootstrap圖標，而後聲明使用搜索圖標 -->
                    </button>
                </form>
                <a href="#" class="btn navbar-btn btn-primary btn-xs navbar-right">如今報名</a>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">登陸</a></li>
                    <li><a href="#">註冊</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container alert-danger"><!--alert-danger給該div一個醒目色塊-->
        <h3>網站內容能夠柵格佈局</h3>
        <p>
            如下爲測試內容，僅作佔位使用！如下爲測試內容，僅作佔位使用！
            如下爲測試內容，僅作佔位使用！如下爲測試內容，僅作佔位使用！
            如下爲測試內容，僅作佔位使用！如下爲測試內容，僅作佔位使用！
            如下爲測試內容，僅作佔位使用！如下爲測試內容，僅作佔位使用！
            如下爲測試內容，僅作佔位使用！如下爲測試內容，僅作佔位使用！
        </p>    
    </div>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
</body>
演示效果：
java
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。