使用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