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 ...
随机推荐
- 玩转spring boot——结合阿里云持续交付
前言 在互联网项目中,项目测试.部署往往需要花费大量时间.传统方式是在本地打包.测试完毕程序,然后通过ftp上传至服务器,再把测试的配置文件修改为生产环境的配置文件,最后重新运行服务.这一过程如果交给 ...
- 【python基础】 Tkinter 之 几何管理器
Tkinter支持三种几何管理器:网格管理器,包管理器,位置管理器 提示:由于每个管理器都有自己放置小构件的风格,最好不要在同一个容器中的小构件使用多个管理器.可以使用框架作为子容器以获取期望的布局. ...
- Hadoop权威指南: 专有数据类型
Writable 和 WritableComparable接口 Writable接口 ** Writable接口的主要目的是,当数据在网络上传输或从硬盘读写时,提供数据的序列化和反序列化机智 ** * ...
- 源码(07) -- java.util.Iterator<E>
java.util.Iterator<E> 源码分析(JDK1.7) ----------------------------------------------------------- ...
- Swift2.0 UITextView 和 UITextFile 的使用
在Swift2.0中,UITextFile 和 UITextView 的使用总体上和在OC中是一样的,今天只是给大家一段代码,然后说UITextView里面的光标位置的问题.先看他们使用的简单的代码 ...
- java中静态代码块,构造代码块,以及构造方法的执行顺序
写了许久的代码,却把一些基础的东西都给忘了,今天无聊就顺手写了个,然后测试下,发现跟我记忆中的竟然有些出入,作为一个两年的开发,我感觉自己很失败啊. 父类pojo: public class Pojo ...
- SharePoint 2016 文档库的新功能简介
今天,重装了一下SharePoint 2016,想多了解了解,看到一些自己平时没注意的功能,或者新的功能,分享一下给大家. 1.界面上操作的变换,多了一排按钮,更像SharePoint Online了 ...
- c#导入excel 绑定数据 repeat为例子
先读取Excel文件并存到dataset public DataSet ExcelToDataTable(string filename, string strsheetname) { try { / ...
- MASMPlus编译出错:error LNK2001: unresolved external symbol _WinMainCRTStartup
初学汇编,感觉很多不懂.不过那也是,如果懂了的话就不用学了,从无到有学习一门编程语言果然不是那么容易的一件事. 学习汇编总得要有一款汇编软件才行,没理由只是使用Windows自带的DEBUG.于是上了 ...
- .net是最牛逼的开发平台没有之一
.net是最牛逼的开发平台没有之一 .net是最牛逼的开发平台没有之一 .net是最牛逼的开发平台没有之一 .net是最牛逼的开发平台没有之一 .net是最牛逼的开发平台没有之一 .net是最牛逼的开 ...