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 String 对象
Apr 25 Javascript
jquery的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
Apr 14 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
select标签设置默认选中的选项方法
Mar 02 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
基于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
非常好用的Zend Framework分页类
2014/06/25 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
微信支付开发维权通知实例
2016/07/12 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
Node.js 路由的实现方法
2019/06/05 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
Python编写一个闹钟功能
2017/07/11 Python
解读python logging模块的使用方法
2018/04/17 Python
Python实现的微信好友数据分析功能示例
2018/06/21 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
酒店副总岗位职责
2013/12/24 职场文书
满月酒答谢词
2014/01/14 职场文书
公司端午节活动方案
2014/02/04 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
学校献爱心活动总结
2014/07/08 职场文书
工作收入证明模板
2014/10/10 职场文书
国庆节主题班会
2015/08/15 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书