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 相关文章推荐
JavaScript CSS 修改学习第四章 透明度设置
Feb 19 Javascript
jquery 多级下拉菜单核心代码
May 21 Javascript
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
node.js中的http.request方法使用说明
Dec 14 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 Javascript
koa源码中promise的解读
Nov 13 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 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
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
浅谈ThinkPHP的URL重写
2014/11/25 PHP
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
PHP7内核之Reference详解
2019/03/14 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
javascript RadioButtonList获取选中值
2009/04/09 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
JavaScript保留关键字汇总
2015/12/01 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
简单介绍Python中的JSON模块
2015/04/08 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
出国留学介绍信
2014/01/13 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
个人融资协议书
2014/10/02 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
2015年测量员工作总结
2015/05/23 职场文书
python xlwt模块的使用解析
2021/04/13 Python
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
2021/05/25 HTML / CSS
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js
Win11 22H2 2022怎么更新? 获得Win1122H22022版本升级技巧
2022/09/23 数码科技