Bootstrap 组件之 Navbar
一、简介
Navbar 指导航条,它在移动设备上显示为折叠状态,在宽屏幕上水平展开。这里 是一个线上例子。
{提示} 响应式导航条依赖 collapse 插件,定制 Bootstrap 时务必要包含。
{设备的可访问性}
务必使用<nav>
元素;如果使用<div>
元素,需要设置属性role="navigation"
。这样能让辅助设备道这是一个导航条。
一个典型导航条的结构如下:
nav.navbar.navbar-default
.container
.nav-header
a.nav-brand
使用 .nav-brand
的标签一般是 <a>
,也可以是 <span>
或者 <div>
等标签。
二、简单的导航条
这里 是在线例子。
2.1 针对导航条位置
2.1.1 固定在顶部
添加 .navbar-fixed-top
。
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">
GoodPress
</a>
</div>
</div>
</nav>
2.1.2 固定在底部
添加 .navbar-fixed-bottom
。
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">
GoodPress
</a>
</div>
</div>
</nav>
2.1.3 静态的顶部导航条
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">
GoodPress
</a>
</div>
</div>
</nav>
静态顶部导航条与固定在顶部的导航条的区别,两处:
- 静态顶部导航条的位置不是固定在页面顶部的,会随页面下拉消失。
- 静态顶部导航条没有左、右和顶部边框,看起来更适合放在页面顶部。
2.2 针对 .navbar-brand
的内容
2.2.1 文本
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">
GoodPress
</a>
</div>
</div>
</nav>
2.2.2 图片
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">
<img alt="Brand" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/780908/profile/profile-80_2.jpg" height="20" height="20">
</a>
</div>
</div>
</nav>
图片的宽高都要指定为 20
,这是最佳排版大小。
2.3 针对 .navbar-brand
同级内容
2.3.1 按钮
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">Brand</a>
</div>
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
</div>
</nav>
.navbar-btn
让按钮在导航条中居中显示。
2.3.2 表单
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">Brand</a>
</div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
表单必须添加 .navbar-form
,让表单在导航条中水平、居中显示。
.navbar-left
是可选的,表示将表单放置在导航栏左边;还有对应的 .navbar-right
,表示将表单放置在导航栏右边。
2.3.3 文本
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">Brand</a>
</div>
<p class="navbar-text">Signed in as Mark Otto</p>
</div>
</nav>
右对齐文本——添加 .navbar-right
。
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">Brand</a>
</div>
<p class="navbar-text navbar-right">Signed in as Mark Otto</p>
</div>
</nav>
三、复杂导航条
<nav class="navbar navbar-default">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</nav>
四、参考链接
http://getbootstrap.com/components/#navbar
(完)
Bootstrap 组件之 Navbar的更多相关文章
- bootstrap 组件
bootstrap 组件 1下拉菜单(dropdown) 下拉菜单切换(dropdown-toggle) 下拉菜单对齐(dropdown-menu-right-右对齐) 下拉菜单分割线(di ...
- Bootstrap组件
1.Bootstrap组件——Glyphicons图标字体 图标字体:可以表示的文字不是abcd或1234,而是一个又一个图形符号,比直接使用图片好处:可以任意放大不会失真:所有能使用文字的地方都可以 ...
- ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件
阅读目录 Bootstrap 导航条 列表组 徽章 媒体对象 页头 路径导航 分页 输入框组 按钮式下拉菜单 警告框 进度条 小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...
- bootstrap组件 2
bootstrap组件2 <!DOCTYPE html> <html lang="zh-cn"> <head > <meta charse ...
- bootstrap组件学习
转自http://v3.bootcss.com/components/ bootstrap组件学习 矢量图标的用法<span class="glyphicon glyphicon-se ...
- python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)
一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...
- Bootstrap之Bootstrap组件
一 文本居中 col-xx-offset-xx:水平居中 center-block:使用于不涉及float标签的水平居中,也不涉及列的居中,让哪里居中就写到哪里,本质是:margin:0 auto. ...
- JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)
前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...
- bootstrap学习笔记--bootstrap组件
前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 B ...
随机推荐
- 图论——Dijkstra算法
图论其实是比较难的一种题型,但是一些模板题,是没有什么太大难度的! 这里给大家带来的是迪杰斯特拉(Dijkstra)算法. 迪杰斯特拉算法是由荷兰计算机科学家狄克斯特拉于1959 年提出的,因此又叫狄 ...
- look look C#7
vs2017也rc好几个版本了,本想跟进看看c#7加入了什么内容,去搜索c#7,确实找到了不少文章,无奈很多特性ide根本不让编译啊...所以今天主要列出已经确定了的c#7特性(一般来说rc后也不会加 ...
- ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字
有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS样式和JS. 如果是webform 开发,可以用下列方法: 流程是首先从数据中或者xml读取数据 ...
- 基于canvas和jsp的头像剪辑上传
最近在做项目时候需要一个头像长传功能,但是现在照片动不动就几兆的,都是流量的浪费. 我只是简单想要上传一个头像而已... 经过几天发愤图强..总算是略有所获.. 基本思路: 1.html部分,图片剪辑 ...
- Redis 学习数据类型
该文使用centos6.5 64位 redis-3.2.8 [root@localhost bin]# netstat -tunpl |grep 6379 查看redis 是否启动成功 一.Stri ...
- 如何居中div?如何居中一个浮动元素?
如何居中div? 给div设置一个宽度,然后添加margin:0 auto属性 div{ width:200px; margin:0 auto; } 如何居中一个浮动元素? <!DOCTYPE ...
- APC注入
0X01 注入原理 当线程被唤醒时APC中的注册函数会被执行的机制,并依此去调用我们的DLL加载代码,进而完成注入的目的 具体的流程: 1 当EXE里的某个线程执行到sleepEX(),或者waitF ...
- .CN根域名被攻击至瘫痪,谁之过?
2013-10-08 09:19 佚名 新浪科技 2013年8月25日凌晨,.CN域名凌晨出现大范围解析故障,经分析.CN的根域授权DNS全线故障,导致大面积.CN域名无法解析.事故造成大量以.cn和 ...
- pl/sql 导出oracle表结构
tools->export tables 是导出表结构还有数据 tools->export user objects是导出表结构 可以用tools->export tables ...
- .Net程序员学用Oracle系列(19):我知道的导出和导入
1.传统的导出/导入工具 1.1.EXP 命令详解 1.2.IMP 命令详解 1.3.EXP/IMP 使用技巧 2.新的导出/导入工具 2.1.EXPDP/IMPDP 参数说明 2.2.EXPDP/I ...