您的位置:首页 - 教程 - Bootstrap - 正文
bootstrap做的导航
顶部导航:nav-tabs

左边导航:nav-list

响应式布局:div嵌套 ~ container、row、ol-lg-X

效果预览:
http://hovertree.com/texiao/bootstrap/9/

效果图:


源码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap制作各种菜单_何问起</title><base target="_blank" />
<link rel="stylesheet" href="http://hovertree.com/themes/bs/css/bootstrap.min.css" />
<link rel="stylesheet" href="dist/css/bootstrap-theme.css" />
</head>

<body>
<div class="container">
<!--顶部导航-->
<div class="row">
<div class="nav col-lg-12 navbar-brand">
<ul class="nav nav-tabs navbar-default ">
<li>
<a href="http://hovertree.com">首页</a>
</li>
<li class="active">
<a>水果</a>
</li>
<li>
<a href="http://hovertree.com/h/bjaf/hovertreeimg.htm">HovertreeImg</a>
</li>
<li>
<a href="http://hovertree.com/top/">HoverTreeTop</a>
</li>
</ul>
</div>
</div>
<br />
<!--内容-->
<div class="row">
<div class="col-lg-1">
<ul class="nav nav-list navbar-default nav-pills ">
<li>
<a href="http://hovertree.com/h/bjaf/l3c6nm7b.htm">键盘</a>
</li>
<li class="active">
<a>XXXX</a>
</li>
<li>
<a href="http://hovertree.com/h/bjaf/ati6k7yk.htm">jQuery</a>
</li>
<li>
<a href="http://keleyi.com">柯乐义</a>
</li>
<li>
<a href="http://hovertree.com/h/bjag/v8pdersy.htm">说明</a>
</li>
<li>
<a href="http://hovertree.com/menu/texiao/">特效</a>
</li>
</ul>
</div>
<div class="col-lg-11">
<table class="table table-hover">
<thead>
<tr class="alert-info active table-">
<td><b>名称</b></td>
<td><b>单价</b></td>
<td><b>库存</b></td>
</tr>
</thead>
<tbody>
<tr>
<td>番茄</td>
<td>1.1</td>
<td>3</td>
</tr>
<tr>
<td>苹果</td>
<td>2.5</td>
<td>10</td>
</tr>
<tr>
<td>哈密瓜</td>
<td>2.5</td>
<td>10</td>
</tr>
<tr>
<td>草莓</td>
<td>2.5</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="http://hovertree.com/themes/bs/js/bootstrap.min.js"></script>
</body>
</html>


评论: