bootstrap - navbar
navbar被称为导航条,一般放到站点的页面头部,用来导航网站。如下展示了一个比较简单的导航条,其中仅有一个用来放置Logo或者站点名称的navbar-brand ,以及两个导航链接:
<nav class="navbar"><a class="navbar-brand" href="#">Logo</a><ul class="nav navbar-nav"><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li></ul>
</nav>
导航条一般可以放置到div或者nav标签内,并设置class为navbar。作为站点Logo的链接应该设置类navbar-brand。导航链接应该按分组放到class=为“nav navbar-nav”的ul标签内。
还记得之前提到的tab吗?它也是一个导航,并且class为"nav nav-tab"。这里的ul的class设置为“nav navbar-nav”,表明它们都是nav,但是第二级分类是不同的。
除了放置导航链接外,navbar内还可以放置dropdown、form等组件:
<nav class="navbar"><a class="navbar-brand" href="#">Logo</a><ul class="nav navbar-nav"><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action1</a></li><li><a href="#">Action2</a></li></ul></li></ul><form class="navbar-form"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button></form>
</nav>
这里的dropdown和别的地方出现的dropdown并没有什么特别之处。但是form是不同的,放置到navbar内的form,它的class应设置为navbar-form,从而可以把form纵向居中的显示出来。
适应较小屏幕
在小屏幕的情况下(比如手机),可以让导航链接等项目折叠,从而更好的利用空间。现在我们看这样的案例:
<nav class="navbar"><a class="navbar-brand" href="#">Logo</a><ul class="nav navbar-nav"><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a></li><li><a href="#">Link 4</a></li><li><a href="#">Link 5</a></li></ul>
</nav>
在一般的桌面显示器上,它可以按照横向排列链接。而在手机小屏幕下,它虽然按照纵向显示,但是布局并不漂亮。可以缩小桌面电脑的浏览器横向尺寸模拟小屏幕的显示效果。现在我们加入代码,让它可以折叠:
<nav class="navbar navbar-default"><div class="navbar-header"><a class="navbar-brand" href="#">Brand</a><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1">Toggle</button></div><div class="collapse navbar-collapse" id="navbar1"><ul class="nav navbar-nav"><li class="active"><a href="#">Link1 </a></li><li><a href="#">Link2</a></li></ul></div>
</nav>
在折叠状态下,只要显示Brand和一个切换折叠的按钮。当点击按钮时,切换显示两个导航链接;再次点击此按钮,则隐藏它们。当扩大浏览器宽度时,用于折叠的Toggle按钮消息,并且本来被折叠的导航链接会横向展开出来。
关于
作者:刘传君
创建过产品,创过业。不好动,读书机器。
可以通过 1000copy#gmail.com 联系到我
出品
http小书 http://www.ituring.com.cn/boo...
Git小书 http://www.ituring.com.cn/boo...
bootstrap - navbar相关推荐
- Bootstrap 3: 菜单居中 Center content in responsive bootstrap navbar
先看上面图片的效果,下面是代码: .navbar .navbar-nav {display: inline-block;float: none; }.navbar .navbar-collapse { ...
- 如何使用Angular JS设置bootstrap navbar活动类?
本文翻译自:How to set bootstrap navbar active class with Angular JS? If I have a navbar in bootstrap with ...
- 具有左,中或右对齐项的Bootstrap NavBar
本文翻译自:Bootstrap NavBar with left, center or right aligned items In Bootstrap , what is the most plat ...
- Bootstrap Navbar
用Bootstrap Navbar component 实现一个响应式导航 理解Bootstrap Navbar component是如何工作的(不包括collepse.js) 清楚自己添加一个规定的 ...
- Bootstrap Navbar应用及源码解析
https://www.cnblogs.com/LiveWithIt/p/5925194.html 目的: 用Bootstrap Navbar component 实现一个响应式导航 理解Bootst ...
- Tailwind Navbar
导航栏 navbar https://codepen.io/junchow/pen/WNrvLJR?editors=1000 PC导航栏仿Airbnb导航条 <div class="p ...
- rails使用devise验证
使用ruby on rails的好处之一就是有很多功能可以不用自己来实现,有很多开源的组件可以直接拿来用,达到项目的目的. 比如登陆安全验证,要让自己来写需要考虑很多: 1. session生命周期 ...
- 自定义OpenStack Horizon(Mitaka)
一.写在前面 这篇文章主要介绍了OpenStack Horizon官方介绍自定义配置,从而进行简单的翻译学习,这里主要基于目前最新的Mitaka来说明,提高自己在horizon组件开发方面的理解.因为 ...
- Bootstrap 4:如何使顶部固定的Navbar保持在容器中而不拉伸?
There are many ways to make a fixed navbar stay inside a parent's div container. We'll go over the m ...
最新文章
- 你真的了解javascript吗?(一)
- go预防CSRF攻击
- java hashmap遍历顺序_Java中HashMap遍历的两种方式
- 电机与拖动,直流发电机实验,江南大学物联网自动化
- 前端学习(2538):slice
- Oracle-Decode()函数和CASE语句的不同
- 带你读AI论文:SDMG-R结构化提取—无限版式小票场景应用
- python最基本的语句_Python的基本语句
- Sprite Kit 入门教程
- B00001 C语言动态存储分配空间作为数组
- win10无法打开超链接,组织策略阻止
- 用foxmail绑定邮箱提示用户名或密码错误
- 性能测试——结果量含义(系统吞吐量(TPS)、用户并发量)
- uniapp动态图片加载不出来
- dva 的一些特殊的写法
- 不用计算机怎么算根号二,根号怎么打 根号2或3等于多少?
- PMP-16项目整合管理-制定项目管理计划
- 学习基金(2)避坑-如何选择基金
- QT笔记——QDir,QFileInfo类
- 《区块链原理、设计与应用》 – 基于超级账本 Fabric 2.x(学习分享2.1-HyperLedger项目细分)