Bootstrap-导航栏组件
2017-12-14 23:09
344 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"><!--下面的文字会被压到--> <div class="container"> <div class="navbar-header"><!--标题区域 多个标题可用--> <a href="#" class="navbar-brand">标题</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">首页</a></li> <li ><a href="#">资讯</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于</a></li> </ul> <form action="" class="navbar-form navbar-right"> <div class="input-group"> <input type="text" class="form-control" /> <div class="input-group-btn"> <button class="btn btn-default">提交</button> </div> </div> </form> <button class="btn btn-default navbar-btn navbar-right">按钮</button> <p class="navbar-text ">哈哈<a href="#" class="navbar-link">oo </a></p><!--需要和文本配合起来--> </div> </nav> <!--导航固定--> <p>1</p> <p>2</p> <p>1</p> <p>1</p> <p>0</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <!--静态导航:navbar-static-top/bottom:去掉圆角--> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
相关文章推荐
- Bootstrap 组件-导航栏
- Bootstrap响应式前端框架笔记十——导航栏相关组件
- JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)
- bootstrap中的dropdown组件改造click为hover
- 2016年5月30日下午(传智Bootstrap笔记八(Bootstrap 布局组件))
- Yii中单独为module加载Bootstrap或其他组件的4种方法
- Bootstrap组件之下拉菜单
- Bootstrap组件之按钮组
- Bootstrap--组件之Glyphicons字体图标
- Bootstrap组件之警告框
- Bootstrap 基于HTML,CSS,JAVASCRIPT的简洁灵活的流行前端框架及交互组件集
- JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐
- Bootstrap 组件
- BootStrap--CSS组件--输入框组(input-group)
- JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有)
- 第二百四十一节,Bootstrap进度条媒体对象和 Well 组件
- Bootstrap的常用类(CSS和布局组件)的总结
- C#进阶系列——一步一步封装自己的HtmlHelper组件:BootstrapHelper(三:附源码)
- 如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
- BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)