BootStrap学习笔记之nav导航栏和面包屑导航


Posted in Javascript onJanuary 03, 2017

nav导航栏

<nav role="navigation" class="navbar navbar-default">
  <div class="container-fluid"></div>
  <div class="navbar-header">
    <a href="#" class="navbar-brand"> 大大的logo </a>
  </div>
  <div >
    <ul class="nav navbar-nav">
      <li> <a href="#" > 分类 </a> </li>
      <li> <a href="#" > 分类 </a> </li>
      <li> <a href="#" > 分类 <span class="caret"/> </a> </li>
    </ul>
  </div>
</nav>

响应式的导航栏

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle" data-toggle="collapse" data-target="#one">
        <span class="sr-only">切换导航</span>
        <span class="icon-bar"/>
        <span class="icon-bar"/>
        <span class="icon-bar"/>
      </button>
      <a href="#" class="navbar-brand"> BigLogo </a>
    </div>
    <div class="collapse navbar-collapse" id="one">
      <ul class="nav navbar-nav">
        <li> <a href="#"> 分类1 </a> </li>
        <li> <a href="#"> 分类2 </a> </li>
        <li> <a href="#"> 分类3 </a> </li>
        <li> <a href="#"> 分类4 </a> </li>
      </ul>
    </div>
  </div>
</nav>

具有不同对齐风格和固定的导航栏

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <a href="#" class="navbar-brand"> 前端万岁 </a>
    </div>
    <div>
      <ul class="nav navbar-nav navbar-right">
        <li> <a href="#" > <span class="glyphicon glyphicon-user"/>注册</a></li>
        <li> <a href="#" > <span class="glyphicon glyphicon-log-in"/>登录</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-left">
        <li> <a href="#" > <span class="glyphicon glyphicon-user"/>注册</a></li>
        <li> <a href="#" > <span class="glyphicon glyphicon-log-in"/>登录</a></li>
      </ul>
    </div>
  </div>
</nav>

面包屑导航(BreadCrumb)

<ol class="breadcrumb">
  <li> <a href='#' > 首页 </a> </li>
  <li> <a hef="#" > Java </a> </li>
  <li class=active"> <a href="#"> Xxx文章 </a> </li>
</ol>

层次导航,让我想起UC的极速模式的 X 级页面

以上所述是小编给大家介绍的BootStrap学习笔记之nav导航栏和面包屑导航,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 图片预加载 自动等比例缩放插件
Dec 25 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 Javascript
javascript实现计时器的简单方法
Feb 21 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
vue select组件的使用与禁用实现代码
Apr 10 Javascript
使用JavaScript实现node.js中的path.join方法
Aug 12 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
详解vue使用$http服务端收不到参数
Apr 19 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
vue+element实现图片上传及裁剪功能
Jun 29 Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 Javascript
原生JS实现在线问卷调查投票特效
Jan 03 #Javascript
详解angular中如何监控dom渲染完毕
Jan 03 #Javascript
Node.js学习入门
Jan 03 #Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 #Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 #Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 #Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 #Javascript
You might like
Php Cookie的一个使用注意点
2008/11/08 PHP
php中smarty区域循环的方法
2015/06/11 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
PHP反射API示例分享
2016/10/08 PHP
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
图片上传插件jquery.uploadify详解
2013/11/15 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
[33:23]Secret vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
Python中方法链的使用方法
2016/02/23 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
python递归下载文件夹下所有文件
2019/08/31 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
Silk’n激光脱毛器官网:silkn.com
2016/10/06 全球购物
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
党校培训思想汇报
2013/12/30 职场文书
优秀实习生感言
2014/03/01 职场文书
关于保护环境的建议书
2014/05/13 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
2019同学聚会主持词
2019/05/06 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript