网页常用有网页的左右导航，其中用到了bootstap框架。
例子一、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 超大屏幕（Jumbotron）</title>
//必须引入下面的路径（这个是绝对路径 ）--博客园老牛大讲堂
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="col-md-3 col-sm-3 col-xs-3">
<ul id="main-nav" class="nav nav-tabs nav-stacked">
<li class="active">
<a>
<span><font size="4">标题一老牛大讲堂</font></span>
</a>
</li>
<li class="child" style="display: none;padding-left: 40px;">
<a target="other" href="../rightfunctionpage/scheduleEntry.html">
内容一
</a>
<a target="other" href="../rightfunctionpage/layoutQuery.html">
内容一
</a>
</li>
</ul>
<ul id="main-nav" class="nav nav-tabs nav-stacked">
<li class="active">
<a>
<span><font size="4">标题二老牛大讲堂</font></span>
</a>
</li>
<li class="child" style="display: none;padding-left: 40px;">
<a target="other" href="../rightfunctionpage/personnelInformation.html">
内容二
</a>
<a target="other" href="../rightfunctionpage/perfectLogin.html">
内容二
</a>
</li>
</ul>
<ul id="main-nav" class="nav nav-tabs nav-stacked">
<li class="active">
<a>
<span><font size="4">标题三老牛大讲堂</font></span>
</a>
</li>
<li class="child" style="display: none;padding-left: 40px;">
<a target="other" href="../rightfunctionpage/timeAttendance.html">
内容三
</a>
<a target="other" href=" ">
内容三
</a>
<a target="other" href=" ">
内容三
</a>
<a target="other" href="../rightfunctionpage/customQuery.html">
内容三
</a>
</li>
</ul>
<ul id="main-nav" class="nav nav-tabs nav-stacked">
<li class="active">
<a>
<span><font size="4">标题四老牛大讲堂</font></span>
</a>
</li>
<li class="child" style="display: none;padding-left: 40px;">
<a target="other" href="../staticpage/manageSystem.html">
内容四
</a>
<a target="other" href="../staticpage/grantSystem.html">
内容四
</a>
<a target="other" href="../staticpage/behaviorSystem.html">
内容四
</a>
</li>
</ul>
</div>
<div class="col-md-9 col-sm-9 col-xs-9" >
<iframe name="other" src="../staticpage/other.html" runat="server" width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe>
</div>
</div>
<script type="text/javascript">//博客园老牛大讲堂
$(function() {
$("#main-nav .active").click(function() {
if($(this).next().css('display') == "block") {
$(this).next("#main-nav .child").css("display", "none");
} else {
$(this).next("#main-nav .child").css("display", "block");
}
});
});
</script>
</body>
</html>
其中红色的就是改变伸缩。col-xs-9和col-xs-3去掉。也可以吧col-sm-3和col-sm-9去掉。去掉后效果可以试试。--博客园老牛大讲堂
效果图：
