BootStrap导航的创建2
2015-08-03 23:48
567 查看
摘自《极客学院》
1、效果图:
2、html代码:
1、效果图:
2、html代码:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" href="bootstrap.min.css"> <title>导航的创建2</title> </head> <body> <div class="container"> <!--class=nav-justified自动适应父控件--> <ul id="mynav" class="nav nav-pills nav-justified" role="tablist"> <li role="presentation" class="active"><a href="#">hello</a></li> <li role="presentation"><a href="#">haha</a></li> <li role="presentation" class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Wolrd <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> <li role="presentation"><a role="menuitem" href="#">555</a></li> <li role="presentation"><a role="menuitem" href="#">555</a></li> <li role="presentation"><a role="menuitem" href="#">555</a></li> </ul> </li> </ul> </div> <script src="jquery-2.1.1.min.js"></script> <script src="bootstrap.min.js"></script> <script> $("#mynav a").click(function(e){ e.preventDefault(); $(this).tab("show"); }) </script> </body> </html>
相关文章推荐
- bootstrap charisma 入门学习笔记
- BootStrap输入框组
- bootstrap组件
- Bootstrap学习--下拉菜单
- bootstrap实现Carousel旋转木马(焦点图)
- Java NIO框架Netty教程(四) – ServerBootStrap启动流程源码分析
- Bootstrap的表单
- 【细解】如何基于bootstrap创建一个响应式的导航条
- Bootstrap组件之列表组
- bootstrap基础01
- Bootstrap组件之进度条
- BootStrap按钮组
- Bootstrap组件之警告框
- BootStrap下拉按钮
- Bootstrap组件之页头、缩略图
- Bootstrap--组件之Glyphicons字体图标
- Bootstrap--全局css样式之图片
- Bootstrap组件之巨幕、徽章
- BootStrap 按钮
- bootstrap框架以及css一些常见问题