Bootstrap的响应式导航栏

正在山路上

已于 2022-12-14 12:08:17 修改

阅读量3.2k

点赞数 8

于 2021-10-07 17:41:53 首次发布

本文链接：https://blog.csdn.net/LLLLLLZZZZZ/article/details/120638812

版权

css 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

html

3 篇文章 1 订阅

订阅专栏

Bootstrap

2 篇文章 0 订阅

订阅专栏

大屏幕时正常显示，小尺寸屏幕时为避免排版杂乱和为了提高展示效果而隐藏详细的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        @media (max-width: 768px) {
           .searchForm{
               display: none;
           }
           .myLogin{
               float: right;
               position: absolute;
               top: 0;
               left: 60%;
               margin-left: 6px;
           }
           .myLogin li{
               float: left;
           }
           .myLogin li a{
               font-size: 1em;
               padding: 10px 6px;
           }
        }
    </style>
</head>
<body>
    <header>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <a href="#" class="navbar-brand">
                        LOGO
                    </a>
                <!-- 缩小屏幕后显示出的按钮 -->
                    <button class="navbar-toggle navbar-right" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <!-- 屏幕小于768px时默认隐藏，点击按钮后打开 -->
                <div class="collapse navbar-collapse navbar-left">
                    <ul class="nav navbar-nav">
                        <li><a href="#">首页</a></li>
                        <li><a href="#">综艺</a></li>
                        <li><a href="#">电影</a></li>
                        <li><a href="#">动漫</a></li>
                    </ul>
                </div>
                
                <form class="navbar-form navbar-right searchForm" role="search">
                    <div class="form-group">
                    <input type="text" class="form-control" placeholder="请输入要搜索的内容"/>
                    </div>
                <button type="submit" class="btn btn-default">搜索</button>
                </form>
                <ul class="nav navbar-nav navbar-right myLogin">
                    <li><a href="#">登录</a></li>
                    <li><a href="#">注册</a></li>
                </ul>
            </div>
        </nav>
    </header>

<script src="js/jquery-1.12.4.js"></script>
<script src='js/bootstrap.min.js'></script>
</body>
</html>