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 text,radio,checkbox,select操作实现代码
Jul 09 Javascript
理解JSON:3分钟课程
Oct 28 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
Vue.js实现表格渲染的方法
Sep 07 Javascript
利用JS响应式修改vue实现页面的input值
Sep 02 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连接mysql数据库代码
2009/03/10 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
PHP基于单例模式实现的mysql类
2016/01/09 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
jQuery 使用手册(七)
2009/09/23 Javascript
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
jquery animate图片模向滑动示例代码
2011/01/26 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
基python实现多线程网页爬虫
2015/09/06 Python
python flask实现分页效果
2017/06/27 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
办公室文书岗位职责
2013/12/16 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
总经理助理岗位职责
2015/01/31 职场文书
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python