Bootstrap实例2---导航栏的实现

最新推荐文章于 2024-04-15 07:57:18 发布

听雨眠_sun

最新推荐文章于 2024-04-15 07:57:18 发布

阅读量1.7k

点赞数

分类专栏：前端相关文章标签： bootstrap 实例

本文链接：https://blog.csdn.net/baidu_31492511/article/details/77414974

版权

前端相关专栏收录该内容

2 篇文章 0 订阅

订阅专栏

bootstrap为我们提供了很方便的导航栏实现类，只需要知道其中的相关类就可以
轻松实现一个漂亮的导航栏，首先看效果图如下:

导航栏效果
下面是具体的实现源码:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<title>现代浏览器博物馆</title>
<style>
    body{
        padding-top:50px ;
        padding-bottom: 50px;
    }
</style>
</head>

<body>
 <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
 <!--其中上面的navbar-fixed-top将导航栏固定在顶部-->
        <div class="container">
         <!--container类会将包含的内容固定宽度，而container-fluid不会固定宽度-->
            <div class="navbar-header">
                <button class="navbar-toggle collapsed"data-toggle="collapse" data-target="#sun">
                <!--此button的作用是bootstrap响应式布局的体现，是当屏幕宽度很小时，顶部的菜单栏会变成一个按钮，注意的是data-target所对应的一定要是下面id的名称-->
                    <span class="sr-only"> Toggle navigation</span>
                    <!--sr-only的意思是screen read only，为了机器在读取只含有图标的模块时提供类似文本提示的功能-->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">现代浏览器博物馆</a>
            </div>
            <div class="collapse navbar-collapse" id="sun">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">综述</a></li>
                    <li><a href="#">简述</a></li>
                    <li class="dropdown"> 
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">特点
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#tablist" data-tab="tab-chrome">Charome</a></li>
                            <li><a href="#tablist" data-tab="tab-firefox">Firefox</a></li>
                            <li><a href="#tablist" data-tab="tab-safari">Safari</a></li>
                            <li><a href="#tablist" data-tab="tab-opera">Opera</a></li>
                            <li class="divider"></li>
                        </ul>
                    </li>
                    <li> <a href="#" data-toggle="modal" data-target="#modaldialog">关于</a></li>
                    <!--此步对应的是一个模态框，在这一步还没有实现，心急的伙伴可以在文章结尾点击链接下载整个项目文件-->
                </ul>
            </div>
        </div>
    </nav>
    <!--注意在引入bootstrap的js文件之前一定要先引入jQuery文件-->
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>