BootStrap2学习日记14----导航
2024-10-18 22:36:54
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Logo</a>
<div class="nav-collapse collapse navbar-inverse-collapse">
<ul class="nav">
<li class="active"><a href="#">标题1</a></li>
<li><a href="#">标题2</a></li>
<li><a href="#">标题3</a></li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉1 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">选项1</a></li>
<li><a href="#">选项2</a></li>
<li><a href="#">选项3</a></li>
<li class="divider"></li><!--分割线-->
<li class="nav-header">选项4</li>
<li><a href="#">选项5</a></li>
<li><a href="#">选项6</a></li>
</ul>
</li>
</ul><!--结束nav-->
<!--搜索-->
<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="搜索">
</form>
<!--靠右浮动的nav-->
<ul class="nav pull-right">
<li><a href="#">标题1</a></li>
<li class="divider-vertical"></li><!--分割线-->
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉2 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">选项</a></li>
<li><a href="#">选项</a></li>
<li><a href="#">选项</a></li>
<li class="divider"></li>
<li><a href="#">选项</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
</div>
<!-- /navbar-inner -->
上述代码的效果如下:
去掉<div class="navbar navbar-inverse navbar-fixed-top">中的“ navbar-fixed-top”效果如下:
若要将导航变成响应式的导航直接在代码
<div class="container">与<a class="brand" href="#">Logo</a>之间 下面加上如下代码
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
效果如图:
最新文章
- Redis 学习(二)
- hdu 4107
- 模拟n步一维随机游走的情况。
- ubuntu 的 apt-get update 出现404错误时,ubuntu 版本也 end of life 了的解决方案
- 【转】java静态代码块和构造方法执行顺序
- c++ 拷贝构造练习
- 百度知道的php爬虫
- cocos2d-x3.2中map的基本操作和使用
- mongoDB文档操作
- 原生js设置rem
- 路由器数据统计SQL脚本
- 实战--使用lvs实现四层负载均衡,转发到后端nginx
- python第六十天-----RabbitMQ
- ZOJ 3432 Find the Lost Sock (异或的运用)
- MySql ERROR 1045 (28000): Access denied 错误
- BETA预发布演示视频
- 认识Excel并创建一个excel(网址:http://poi.apache.org/)
- winform 公共控件 ListView
- 用到UdpClient的一点经验
- OpenCV Machine Learning 之 正态贝叶斯分类器 (Normal Bayes Classifier)