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 相关文章推荐
表单(FORM)的一些实用效果代码
Mar 25 Javascript
JavaScript Event学习第五章 高级事件注册模型
Feb 07 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
vue配置font-awesome5的方法步骤
Jan 27 Javascript
JS实现的排列组合算法示例
Jul 16 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
3种平台下安装php4经验点滴
2006/10/09 PHP
global.php
2006/12/09 PHP
php桌面中心(三) 修改数据库
2007/03/11 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
javascript 函数参数限制说明
2010/11/19 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
Python中如何获取类属性的列表
2016/12/26 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
Pandas的Apply函数具体使用
2020/07/21 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
产品促销活动策划书
2014/01/15 职场文书
爱护公共设施标语
2014/06/24 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
使用CSS连接数据库的方式
2022/02/28 HTML / CSS
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电