bootstrap--小屏幕自动适应导航栏

最新推荐文章于 2023-12-18 23:41:14 发布

大2010鹏

最新推荐文章于 2023-12-18 23:41:14 发布

阅读量1.9k

点赞数

分类专栏： HTML/CSS/JAVASCRIPT

本文链接：https://blog.csdn.net/weixin_42143410/article/details/98207147

版权

HTML/CSS/JAVASCRIPT 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <title>bootstrap--小屏幕自动适应导航栏</title>
</head>

<body>
    <!-- nav导航栏，navbar-default默认导航条样式，navbar-fixed-top导航条固定在顶部不滚动 -->
    <div class="nav navbar-default navbar-fixed-top">
        <!-- navbar-header导航栏头部（小屏幕下独占一行，不和菜单混排） -->
        <div class="navbar-header">
            <!-- navbar-brand导航栏品牌（可用来显示logo和标题,默认左边） -->
            <div class="navbar-brand">小屏幕自动适应导航栏 </div>
                <!-- 小屏幕显示菜单按钮
                    class="navbar-toggle" 指定按钮样式 不影响功能实现
                    data-toggle="collapse"和data-target=".navbar-collapse"指定 操作 和 被操作对象 ，影响功能实现 不能缺少
                    注意data-target属性值里的小点 -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">···</button>
        </div>
        <!-- 主菜单，navbar-collapse表示可以被折叠和展开，与上面的data-target=".navbar-collapse"配合使用
        collapse表示默认折叠  -->
        <ul class="nav navbar-nav navbar-collapse collapse">
            <li class="active"><a href="#a1" data-toggle="tab">主页</a></li>
            <li><a href="#b1" data-toggle="tab">新闻</a></li>
            <li><a href="#c1" data-toggle="tab">头条</a></li>
        </ul>
        <!-- 副菜单，navbar-right表示向右对齐 其他与主菜单相同 -->
        <ul class="nav navbar-nav navbar-right navbar-collapse collapse">
            <li><a href="#">注册</a></li>
            <li><a href="#">登录</a></li>
        </ul>
    </div>

    <div class="tab-content" style="margin-top:60px;">
        <div class="tab-pane active" id="a1">主页</div>
        <div class="tab-pane" id="b1">新闻</div>
        <div class="tab-pane" id="c1">头条</div>
    </div>
    
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/bootstrap.js"></script>
</body>

</html>

大2010鹏

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
bootstrap--小屏幕自动适应导航栏

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="style...
复制链接

扫一扫