当前位置: 首页 >前端技术 > Bootstrap navbar使用

Bootstrap navbar使用

bootstrap 导航主要有三种:

  1. 胶囊式导航
  2. 面包屑导航
  3. 头部导航

胶囊式和面包屑的本质是列表.

胶囊式导航使用时在列表的基础上添加.nav .nav-pill类 若想使用纵向导航再加.nav-stacked

 例如:

<ul class="nav nav-pills nav-stacked">...</ul>

 

面包屑导航使用时在列表的基础上添加.breadcrumb类即可

 例如:

<ol class="breadcrumb">...</ol>

 

这儿主要记录一下头部导航 先上一个demo

先看一下效果

Bootstrap navbar使用 _ JavaClub全栈架构师技术笔记

这个是折叠后的:

Bootstrap navbar使用 _ JavaClub全栈架构师技术笔记

然后是完整代码:

<div class="navbar navbar-inverse navbar-static-top"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed"data-toggle="collapse" data-target="#navbar"aria-expanded="false" aria-controls="navbar"><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="#">SKYPE</a></div><div id="navbar" class="collapse navbar-collapse"><ul class="nav navbar-nav"><li class="active"><a href="index.html">Home</a> </li><li><a href="about.html">About</a> </li><li><a href="service.html">Service</a> </li><li><a href="blog.html">Blog</a> </li><li><a href="contact.html">Contact</a> </li></ul><ul class="nav navbar-nav navbar-sub  pull-right"><li><a href="#">Register</a> </li><li><a href="#">Login</a> </li></ul></div></div></div>

使用到的类的说明:

首先最外层

  • .navbar 生成一个长条
  • .navbar-inverse 设置长条的颜色为暗色 
  • .navbar-default  设置长条的颜色为白色
  • .nav-static-top 设置长条在顶部 并会随着翻页消失
  • .nav-fixed-top 设置长条固定在顶部 翻页并不会消失 (这样可能会遮挡部分页面内容 需要设置body{padding-top:70px 具体数值根据实际情况而定})
  • .nav-fixed-bottom 设置长条固定在底部 翻页不会消失

 然后是导航栏的头部:

  • .navbar-header 负责包裹brand和折叠按钮
  • .navbar-brand 一般指网页的名称 比如'博客园'
  • .navbar-toggle 负责按钮的样式
  • .data-toggle 指事件触发的类型
  • .data-target 指事件作用的对象
  • .sr-only 指屏幕阅读器读到的内容
  • .icon-bar 就是折叠按钮中的一条横线 (这儿有三个所以按钮有三条横线

  说明:这儿虽然button写在brand上面 但还是button在右边 brand在左边 这是由于类navbar-brand和navbar-toggle实现的.

最后就剩主体内容了:

  • .collapse 负责折叠时的隐藏和显示(小窗口)
  • .navbar-collapse 负责未折叠时的显示(大窗口)
  • .nav 负责设置垂直导航的样式(小窗口)
  • .navbar-nav 负责设置横版导航的样式大窗口)
  • .pull-right 设置导航条内元素向右对齐
  • .pull-left设置导航条内元素向左对齐

.  注意:pull-rightpull-left可以被navbar-rightnavbar-left替代  后者也是推荐的用法,但是我在实验的时候没有成功 所以我使用的前者.

参考博客:https://www.cnblogs.com/LiveWithIt/p/5925194.html

作者:狂澜688
来源链接:https://www.cnblogs.com/kkcoolest/p/11674231.html

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。





本文链接:https://www.javaclub.cn/front/117575.html

标签:Bootstrap
分享给朋友:

“Bootstrap navbar使用” 的相关文章

第一个jsp项目 2022年05月14日 10:38:13
HTML框架结构标签(frameset) 2022年06月06日 04:22:28
html a标签属性 rel='nofollow' 2022年06月14日 08:40:11
HTML从入门到精通 2022年06月14日 09:11:20
html中a标签href属性的一个坑(一) 2022年06月14日 11:45:46
HTML标签属性与CSS样式 2022年06月15日 08:36:13
img标签及属性 2022年06月15日 09:21:06