1.页头为一个默认式的导航栏；
2.页面第二、四部分是由巨幕搭建的框架；
3.为第三部分引入字体图标glyphicon。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>响应式导航栏</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="./模板css.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>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar">
<!--响应式导航栏-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">关于我们</a></li>
<li><a href="#service">服务</a></li>
<li><a href="#portfolio">环境</a></li>
</ul>
</div>
</nav>
<!--关于我们-->
<div class="jumbotron">
<div id="about" class="container-fluid">
<div class="row">
<div class="col-sm-8">
<h2>关于公司</h2>
<h4>提供各类前端学习方案</h4>
<h4>热爱编程者的学习天地</h4>
<!--btn-lg类 用于设定大号按钮-->
<button class="btn btn-default btn-lg">进入学习</button>
</div>
</div>
</div>
</div>
<!--服务-->
<div id="service" class="container-fluid text-center">
<h4>我们提供的</h4>
<br>
<div class="row">
<div class="col-sm-6">
<span class="glyphicon glyphicon-leaf"></span>
<h4>动力</h4>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="col-sm-6">
<span class="glyphicon glyphicon-leaf"></span>
<h4>爱好</h4>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<span class="glyphicon glyphicon-leaf"></span>
<h4>创造</h4>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="col-sm-6">
<span class="glyphicon glyphicon-leaf"></span>
<h4>认证</h4>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
</div>
<!--环境-->
<div class="jumbotron">
<div class="container-fluid" id="portfolio">
<h1>北京，南二环</h1>
<p>程序园</p>
<p>程序园</p>
<p>程序园</p>
</div>
</div>
</body>
CSS
.navbar-header a{
position: relative;
bottom: 10px;
margin-bottom: 0;
}
#about{
margin: 200px;
padding: 50px;
}
#portfolio{
padding: 50px;
margin: 100px;
text-align: center;
}
这里的监听是设置在导航栏上的，因此随着滚动条的滑动，导航栏的对应菜单会呈选中状态。需要注意的是字体图标glyphicon是不能与其他类共存的，且包裹glyphicon类的元素不能包含任何内容或子元素。
网友评论