bootstrap2与bootstrap4组件的差异(持续更新)
作者：互联网
导航栏组件的差异
<!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="width: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>
标签：新闻,组件,首页,bootstrap4,导航,bootstrap2 来源： https://www.cnblogs.com/wkhzwmr/p/15140771.html