使用BootStrap制作自使用的菜单（一）

最新推荐文章于 2024-06-03 20:31:46 发布

明扬.

最新推荐文章于 2024-06-03 20:31:46 发布

阅读量4.9k

点赞数 1

分类专栏： bootstrap 随手记

本文链接：https://blog.csdn.net/qq_37986384/article/details/82586040

版权

本文介绍了如何使用BootStrap创建响应式的导航菜单，包括设置导航栏样式、固定顶部、添加品牌标识以及实现汉堡菜单的切换效果。通过讲解不同类的作用，如navbar、navbar-toggle、navbar-collapse等，帮助读者理解BootStrap菜单的构建过程。

摘要由CSDN通过智能技术生成

先看图

这是大屏幕时

这是小屏幕时

这是小屏幕菜单展开时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 在移动端不缩放 -->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>04-导航条</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">

    </script>
    <style type="text/css">

    </style>
</head>
<body>
   <!-- 定义反白导航条 -->
    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <!-- 申明logo的容器

最低0.47元/天解锁文章

明扬.

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
使用BootStrap制作自使用的菜单（一）

先看图这是大屏幕时这是小屏幕时这是小屏幕菜单展开时&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;!-- 在移动端不缩放 --&gt; &lt;meta name="viewport&q
复制链接

扫一扫

专栏目录