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 ...
随机推荐
- Oak Seeds 网站项目回顾
项目是一个教育类网站,先给出网站网址:http://www.oakseeds.cn/ Oak Seeds原本的名字叫做American School,后来更给为Oak Seeds,意为橡木子.网站是为 ...
- WebForm 三级联动
三级联动 数据库根据父级代号条件写查询 返回list<>集合 方法一: 创建三个下拉列表: ※AutoPostBack:否发生自动回传到服务器的操作.如果把该属性设置为 TRUE,则启用自 ...
- 浅谈时间复杂度- 算法衡量标准Big O
写在前面: 今天有一场考试,考到了Big-O的知识点,考到了一道原题,原题的答案我记住了,但实际题目有一些改动导致答案有所改动,为此作者决定重新整理一下复杂度相关知识点 Efficiency and ...
- 从C#到TypeScript - 接口
总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...
- Mrc.EOF
Mrc 是我们定义的一个变量,用来存放数据等同于 ADODB.Recordset而eof 是mrc也就是recordset的一个属性. 通常我们在程序中编写代码来检验BOF与EOF属性,从而得知目前指 ...
- Python之字符串详解1
1. 查看类型 name = 'allen' print(type(name)) #查看类型 <class 'str'> #类型为str age = 19 print(type(name) ...
- matlab中小技巧
关于matlab中可能遇到的小知识点 一.字符串的比较 不能使用“==”,需要使用函数strcmp() %matlab中字符串的比较 %字符串比较要用strcmp.相同则返回1,不相同则返回0. cl ...
- Tinyshell: 一个简易的shell命令解释器
这是自己最近学习Linux系统编程之后写的一个练手的小程序,能很好地复习系统编程中的进程管理.信号.管道.文件等内容. 通过回顾写的过程中遇到的问题的形式记录程序的关键点,最后给出完整程序代码. 0. ...
- Android反编译工具
1:先安装androidfby工具 2:安装jdk并设置环境变量 3:下载一个apk数据包 4:打开反编译工具页面,点击"浏览"找到所要测试的apk包 5:反编译成功之后,会生成相 ...
- 《你不知道的JavaScript》整理(六)——强制类型转换
JavaScript中通常分为两种类型转换,"隐式强制类型转换"(implicit coercion)和"显式强制类型转换"(explicit coercion ...