Bootstrap CSS——导航条
来源:互联网 发布:淘宝刷手是什么意思 编辑:程序博客网 时间:2024/03/28 21:44
http://v3.bootcss.com/components/#navbar
mark
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="bootstrap.min.css"></head><body><!--固定在底部,在nav标签的class中添加"navbar-fixed-bottom",相反则添加"navbar-fixed-top"--><!--更改导航条的颜色,更改navbar的样式,navbar-inverse等等--> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <!--品牌图标--> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">量投</a> </div> <!--默认样式的导航条--> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav" id="mytab"> <li class="active"><a href="#">Link</a> </li> <li><a href="#">Link</a> </li> <li><a href="#">Link</a> </li> </ul> <!--表单--> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="搜索"> </div> <!--按钮--> <button type="submit" class="btn btn-default">搜索</button> </form> <ul class="nav navbar-nav navbar-right"> <!--组件居右排布--> <li><a href="#">Link</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">点我<span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Hello1</a> </li> <li><a href="#">Hello2</a> </li> <li><a href="#">Hello3</a> </li> <li><a href="#">Hello4</a> </li> </ul> </li> </ul> </div> </div> <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> <ol class="breadcrumb"> <li><a href="">Home</a> </li> <li><a href="">Library</a> </li> <li><a href="">Data</a> </li> </ol> </nav> <!--路径导航--> </nav> <script src="jquery-2.1.4.min.js"></script> <script src="bootstrap.min.js"></script> <script> $("#mytab a").click(function(e){ e.preventDefault(); $(this).tab("show") }) </script></body></html>
0 0
- Bootstrap CSS——导航条
- 【17】Bootstrap — 导航条
- Bootstrap CSS——导航
- bootstrap组件——导航条
- Bootstrap笔记10—导航条
- BootStrap--CSS组件--导航条(navbar)
- Bootstrap学习笔记——导航条、分页导航
- bootstrap教程(二)——导航条
- bootstrap——组件(六、导航条)
- 导航条bootstrap
- BootStrap导航条
- Bootstrap 导航条
- Bootstrap之导航条
- bootstrap制作导航条
- BootStrap 导航条组件
- Bootstrap 导航条
- Bootstrap 导航条
- Bootstrap导航条
- 达内学习日志Day21:Java核心API(多线程基础)
- Bootstrap CSS——输入框组
- 32位与4G内存限制
- Bootstrap CSS——导航
- 抽象类与接口
- Bootstrap CSS——导航条
- Android常见分辨率及屏幕适配注意事项
- <PY>kNN
- 黑马程序员——4.继承(接口、多态、内部类、异常、包)
- JavaScript 模块
- sencha touch 在新版谷歌浏览器中painted事件无法触发解决方案以及carousel 控件、togglefield控件、滚动条失效
- C#学习之多线程开发技术(十)
- 一段好玩的程序
- 对某个Android应用的某一功能测试