导航栏组件的差异
<!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">
<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
<script src="jquery-3.3.1.slim.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
<script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<body>
<!-- 导航条 -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header"> <!--Bootstrap提供的现成的导航栏组件nav -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example" aria-expanded="false"> <!--data-toggle指以什么事件触发，常用的如modal,popover,tooltips等，data-target指事件的目标,你这段代码的意思就是指将#signin-signup-tab这个Dom元素的内容以模态框的形式展示。-->
<span>导航栏</span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example">
<ul class="nav navbar-nav" style="100%;">
<li class="active nav-top">
<a href="#">首页</a>
</li>
<li class="dropdown nav-top"> <!--data-toggle="dropdown"以下拉菜单的方式触发-->
<a href="#" class="dropdown-toggle on" data-toggle="dropdown">
公司简介</a>
<ul class="dropdown-menu">
<li><a href="#">企业概况</a></li>
<li><a href="#">荣誉资质</a></li>
</ul>
</li>
<li class="dropdown nav-top">
<a href="#" class="dropdown-toggle on" data-toggle="dropdown">
新闻动态</a>
<ul class="dropdown-menu">
<li><a href="#">公司要闻</a></li>
<li><a href="#">行业新闻</a></li>
<li><a href="#">通知公告</a></li>
</ul>
</li>
<li class="dropdown nav-top">
<a href="#" class="dropdown-toggle on" data-toggle="dropdown">
产品中心</a>
<ul class="dropdown-menu">
<li><a href="#">
家用机器人</a></li>
<li><a href="#">
智能监控</a></li>
<li><a href="#">
人脸识别解决方案</a></li>
</ul>
</li>
<li class="dropdown nav-top">
<a href="#" class="dropdown-toggle on" data-toggle="dropdown">
服务支持</a>
<ul class="dropdown-menu">
<li><a href="#">
资料下载</a></li>
<li><a href="#">
人脸识别开放平台</a></li>
</ul>
</li>
<li class="nav-top">
<a href="#">科研基地</a>
</li>
<li class="dropdown nav-top">
<a href="#" class="dropdown-toggle on" data-toggle="dropdown">
人才招聘</a>
<ul class="dropdown-menu">
<li><a href="#">欢迎咨询</a></li>
<li><a href="#">加入恒达</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<span bg-default>上面的是用bootstrap2版本写的导航栏，和下方bootstrap4写的导航栏差距有点大</span>
<span bg-default>或者说bootstrap2已经不能在bootstrap4上运行，关于导航栏组件的，要么就要更改组件了</span>
<nav>
<ul class="nav nav-tabs"><!--nav-tabs 标签页导航-->
<li class="nav-item">
<a class="nav-link active" href="#">网站首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">新闻中心</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">模板展示</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">关于我们</a>
</li>
</ul>
</nav>
<br>
<br>
<nav>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">网站首页</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">新闻中心</a>
<div class="dropdown-menu">
<a class="dropdown-item active" href="#">新闻1</a>
<a class="dropdown-item" href="#">新闻2</a>
<a class="dropdown-item" href="#">新闻3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">模板展示</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">关于我们</a>
</li>
</ul>
</nav>
</body>
</body>
</html>
看代码中描述把
<!--b2并没有nav-item属性只有nav-top表示是导航栏组件 -->
<!--b2和b4相同的地方导航栏组件下拉菜单必须有dropdown-->
<li class="dropdown nav-top"> <!--data-toggle="dropdown"以下拉菜单的方式触发-->
<a href="#" class="dropdown-toggle on" data-toggle="dropdown">
公司简介</a>
<ul class="dropdown-menu"><!--b2和b4均是以dropdown-menu来定义下拉菜单的-->
<!--包含的li能使用class="dropdown-item"属性,li中包含的a标签当然也可以-->
<li class="dropdown-item"><a href="{% url 'aboutApp:survey' %}">企业概况</a></li>
<li class="dropdown-item"><a href="{% url 'aboutApp:honor' %}">荣誉资质</a></li>
</ul><!--不能采用上方的div包含,上面div包含的关键在于a标签采用了dropdown-item属性-->
<!--采用div包含的话由于有nav-top这个组件的css样式存在，所以2个li中的显示在同一行-->
</li>
下方的button按钮中的span元素显示在b2中是手机界面显示，而b4中直接显示了，所以就变成了手机下拉菜单似的
<!-- 导航条 -->
<!--这里的导航条属性很冗杂是真的，bootstrap4相对来说较清洁-->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header"> <!--Bootstrap提供的现成的导航栏组件nav -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example" aria-expanded="false"> <!--data-toggle指以什么事件触发，常用的如modal,popover,tooltips等，data-target指事件的目标,你这段代码的意思就是指将#signin-signup-tab这个Dom元素的内容以模态框的形式展示。-->
<span>导航栏</span> <!--bs-example是data-target触发的id号-->
<!--这里的导航栏是为手机界面显示的，但b4中它显示的就是手机界面了，下面所有导航栏组件被折叠-->
</button>
</div>
.....后面就是导航栏的内容了
</div>
</nav>