Bootstrap常用导航条

最新推荐文章于 2021-04-09 11:30:58 发布

原创最新推荐文章于 2021-04-09 11:30:58 发布 · 361 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #导航 #class

java-web开发同时被 3 个专栏收录

121 篇文章

订阅专栏

html5+css3

50 篇文章

订阅专栏

bootstrap

18 篇文章

订阅专栏

本文提供了一个详细的网页导航设计实例，包括基本导航条、嵌入表单的导航条、固定导航条、反色导航条和分页导航条的设计代码。通过这些实例，读者可以了解不同类型的导航条如何应用于网页中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
    <!-- 设计页面导航条 -->
    <div class="container">
        <!-- 基本导航条 -->
        <div calss="navbar navbar-default">
            <div class="navbar-header">
                <a class="navbar-brand brand-img" href="javascript:void(0);">
                    <img alt="品牌" />
                </a>
            </div>
            <div class="nav navbar-nav">
                <li class="active"><a href="javascript:void(0);">网页</a></li>
                <li><a href="javascript:void(0);">音乐</a></li>
                <li><a href="javascript:void(0);">视频</a></li>
                <li><a href="javascript:void(0);">贴吧</a></li>
            </div>  
        </div>
        <!-- 嵌入表单 -->
        <div class="container">
            <div class="navbar navbar-default">
                <div class="navbar-header">
                    <a href="javascript:void(0);" class="navbar-brand">品牌</a>
                </div>
                <div class="nav navbar-nav" style="margin-right: 10%;">                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
                    <li class="active"><a href="javascript:void(0);">网页</a></li>
                    <li><a href="javascript:void(0);">音乐</a></li>
                    <li><a href="javascript:void(0);">视频</a></li>
                    <li><a href="javascript:void(0);">贴吧</a></li>
                </div>
                <div class="navbar-form">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="要搜索的内容" />
                    </div>
                    <button class="btn btn-default navbar-btn" type="button">搜索</button>
                </div>
            </div>
        </div>
        <!-- 固定导航条 -->
        <div class="container">
            <div class="navbar navbar-default navbar-fixed-bottom">
                <div class="navbar-header">
                    <a class='navbar-brand' href="javascript:void(0);">品牌</a>
                </div>
                <div class="nav navbar-nav">
                    <li><a href="javascript:void(0);">网页</a></li>
                    <li><a href="javascript:void(0);">音乐</a></li>
                    <li><a href="javascript:void(0);">视频</a></li>
                    <li><a href="javascript:void(0);">贴吧</a></li>
                </div>
            </div>
        </div>
        <!-- 反色导航条 -->
        <div class="container">
            <div class="navbar navbar-default navbar-inverse">
                <div class="navbar-header">
                    <a class="navbar-brand" href="javascript:void(0);">品牌</a>
                </div>
                <div class="nav navbar-nav">
                    <li><a href="javascript:void(0);">网页</a></li>
                    <li><a href="javascript:void(0);">音乐</a></li>
                    <li><a href="javascript:void(0);">视频</a></li>
                    <li><a href="javascript:void(0);">贴吧</a></li>
                </div>
                <div class="navbar-form">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="输入要搜索的内容" />
                    </div>
                    <button class='btn btn-default' type="button">搜索</button>
                </div>
            </div>
        </div>
        <!-- 分页导航条 -->
        <div class="container">
            <div class="pagination">
                <li><a href="javascript:void(0);">首页<span class="label label-success">11</span></a></li>
                <li><a href="javascript:void(0);">上一下<span class="badge badge-danger">12</span></a></li>
                <li><a href="javascript:void(0);">1</a></li>
                <li><a href="javascript:void(0);">2</a></li>
                <li><a href="javascript:void(0);">3</a></li>
                <li><a href="javascript:void(0);">...</a></li>
                <li><a href="javascript:void(0);">下一页</a></li>
                <li><a href="javascript:void(0);">尾页</a></li>
            </div>
        </div>
    </div>
</body>

这里写图片描述