bootstrap实现垂直导航框架

<html>
<head>
<title>Bootstrap 实例 - 垂直的胶囊式导航菜单</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<p>垂直的胶囊式导航菜单</p>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<!-- 这里的active属性就是使得所在的li的背景色变为蓝色-->
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
</body>
</html>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

看一下显示的结果 
这里写图片描述 
这里的左侧是不是很类似我们之前用frameSet框架写的这一部分

<html>
<frameset cols="120,*">
<!--这里的cols="120.*"表示左侧的宽度固定为120px,而右侧会占满剩余的宽度-->
  <frame src="/example/html/html_contents.html">
  <frame src="/example/html/frame_a.html" name="showframe">
</frameset>
</html>

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

这里写图片描述

其实如果用frameSet来实现这种导航框架的话看起来还是有点麻烦的,从上面的代码可以看出这中导航框架其实是由多个html页面堆砌而成,按照所占的百分比,将多个Html的内容在一个html中显示,中间还有从一个html跳转到另一个target的繁琐。 
而bootstrap则省略了这些繁琐的过程。 
bootstap采用的上面所示的垂直的胶囊式导航菜单和栅格系统就是类似frameSet的cols=”120.*”从而实现完整的导航框架,看下图。 
这里写图片描述 
实现代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>我的帖子</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
</head>
<body>
    <div class="container" style="margin-top: 30px">
        <div class="row">
            <div class="col-xs-3">
                <ul class="nav nav-pills nav-stacked">
                    <li role="presentation"><a
                        href="#">资料修改</a></li>
                    <li role="presentation" class="active"><a
                        href="#">我的帖子</a></li>
                    <li role="presentation"><a href="#">申请记录</a></li>
                </ul>
            </div>

            <div class="col-md-9">
                <ul class="list-group">
                    <a class="list-group-item active"> 我的帖子 </a>
                    <div class="list-group-item">
                        <a href="#" style="color:grey">
                            <h4 class="list-group-item-heading" style="color:black">
                                主论坛标题</h4>帖子标题
                        </a> <a href="#" style="float: right">编辑</a> 
                        <a href="#" style="float: right">申请精华贴&nbsp;</a>
                        <p style="float: right;margin-right: 50px">
                            浏览量:&nbsp;评论量:&nbsp;发表日期:</p>
                    </div>
                </ul>
                </div>
        </div>
    </div>
</body>
</html>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
<div class="col-md-9">
<div class="col-md-9">
这俩个就是我上面所说的栅格系统
.col-xs-超小屏幕 手机 (<768px),.col-sm-小屏幕 平板 (≥768px),.col-md-中等屏幕 桌面显示器 (≥992px)(栅格参数).
不管在哪种屏幕上,栅格系统都会自动的分12列 col-xs-*和col-sm-* 和col-md-*后面跟的参数表示在当前的屏幕中 div占的宽度。例如 <div class="col-xs-6 col-md-3"> 这个div在屏幕中占的位置是:1在超小屏幕中占6列 也就是屏幕的一半(6/122.在中单屏幕中占3列也就是1/43/12)。 如果我们要在小屏幕上并排显示3div(12/3=4),在大屏幕上显示6个 则col-xs-4 col-md-2
这样我们就可以控制我们自己想要的什么排版了。
还有一种情况是 <div class="col-sm-10 col-md-8"> 后面跟的div中col-sm的参数如果为3 也就是
<div class="col-sm-10 col-md-8"></div>
<div class="col-sm-3 col-md-4"></div>
如果是这样 这两个div在小屏幕中会排2排 因为10+3>12 ,在中等屏幕中可以排同一排 8+4=12
根据上面的介绍我们可以得出无论是在xs,还是md中左侧所占的百分比都是3/12=1/4=1-9/12
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
上面代码中的<li role="presentation"><a role="menuitem" ></a>中role扮演角色是大同小异,即菜单列表单/项。
 
 
  • 1
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值