bootstrap常用组件之头部导航实现代码


Posted in Javascript onApril 20, 2017

以下是头部导航的代码,我只简要的对个别常用属性进行解释

总效果如图所示:

bootstrap常用组件之头部导航实现代码

代码如下:

<nav class="navbar navbar-default navbar-inverse navbar-fixed-top"> 
//navbar-inverse 设置背景                                                        
//navbar-fixed-top 设置头部固定在顶部,因此需要给body设置顶部padding,一般设置为padding-top:60px
 <div class="Container-fluid"> 
//container-fluid设置导航条内容是否有一定的内间距,如果class="container-fluid"则没有内间距,内容紧贴左侧        
//如果设置class="container",则内容有一定的内间距,内容对称居中
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
   </button>   //这里是响应式的写法,在小屏幕上回显示三杆,无需改动
   <a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >某管理系统</a>
  </div>
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
   <ul class="nav navbar-nav">
    <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页 <span class="sr-only">(current)</span></a></li>
    <li class="dropdown">
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">功能 <span class="caret"></span></a>
     <ul class="dropdown-menu">
      <li class="dropdown-header" >业务功能</li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >信息建立</a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >信息查询</a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >信息管理</a></li>
      <li role="separator" class="divider"></li>
      <li class="dropdown-header" >系统功能</li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >设置</a></li>
      <li role="separator" class="divider"></li>
     </ul>
    </li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >帮助</a></li>
   </ul>
   <form class="navbar-form navbar-left pull-right">
    <div class="form-group">
     <input type="text" class="form-control" placeholder="username...">
     <input type="password" class="form-control" placeholder="password...">
    </div>
    <button type="submit" class="btn btn-default">Login</button>
   </form>
  </div><!-- /.navbar-collapse -->
 </div><!-- /.container-fluid -->
</nav>
Javascript 相关文章推荐
javascript编程起步(第六课)
Feb 27 Javascript
jQuery 开天辟地入门篇一
Dec 09 Javascript
原生js 秒表实现代码
Jul 24 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
js实现数组转换成json
Jun 26 Javascript
js实现无缝滚动图
Feb 22 Javascript
node.js实现微信JS-API封装接口的示例代码
Sep 06 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
vue+vue-router转场动画的实例代码
Sep 01 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
基于JavaScript实现活动倒计时效果
Apr 20 #Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 #Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 #jQuery
通过js修改input、select默认字体颜色
Apr 19 #Javascript
利用node.js本地搭建HTTP服务器
Apr 19 #Javascript
javascript 的变量、作用域和内存问题
Apr 19 #Javascript
javascript中json对象json数组json字符串互转及取值方法
Apr 19 #Javascript
You might like
PHP 处理图片的类实现代码
2009/10/23 PHP
PHP strtok()函数的优点分析
2010/03/02 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
python的即时标记项目练习笔记
2014/09/18 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
python SOCKET编程基础入门
2021/02/27 Python
全球度假村:Club Med
2017/11/27 全球购物
建材业务员岗位职责
2013/12/08 职场文书
课程改革实施方案
2014/03/16 职场文书
师范类求职信
2014/06/21 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL