bootstrap中的导航条

一、和导航的区别

  1. 导航条比导航多了一个条字

  2. 直接上图

导航:

导航条:

简单文字描述: 由两张图看出,导航内容比较简单,而导航条可以包含导航及其他元素,如表单,搜索框等,并且通常导航条会有一个区别于页面的背景色。

二、在页面中定义导航条

方法:

为父容器添加类名navbar navbar-defaultnavbar-default类用来规定导航条的颜色,可以更改为navbar-inverse来让导航条反色显示。bootstrap官网建议使用nav元素。但也常用div元素,建议用div元素时增加role="navigation" 属性,该属性对一些特殊的辅助设备友好。

结构:

标题或者logo放在类名为.navbar-header>.navbar-brand的容器中,其他条目可以放在类名为.nav navbar-nav的容器中

<div class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
  <a href="#" class="navbar-brand">MY WEBSITE</a>
 </div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">条目一</a></li>
<li><a href="#">条目二</a></li>
<li><a href="#">条目三</a></li>
<li><a href="#">条目四</a></li>
</ul>
</div>

包含元素:

  1. 表单:form 添加类名navbar-form
  2. 按钮:添加类名navbar-btn(需和类名为“navbar-nav”或"navbar-brand"的元素配合使用,且数量不能多)
  3. 文本:添加类名navbar-text(需和类名为“navbar-nav”或"navbar-brand"的元素配合使用,且数量不能多)
  4. 链接:添加类名navbar-link(需和类名为“navbar-nav”或"navbar-brand"的元素配合使用,且数量不能多)
    5.二级菜单:(见下面代码)
<div class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
  <a href="#" class="navbar-brand">MY WEBSITE</a>
 </div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">水果<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">苹果</a></li>
<li><a href="#">橘子</a></li>
<li ><a href="#">香蕉</a></li>
</ul>
</li>
<li><a href="##">蔬菜</a></li>
<li><a href="##">哈哈</a></li>
<li><a href="##">呵呵</a></li>
</ul>
</div>

位置样式:

  • 导航条内元素左浮动:左浮动的元素添加类名navbar-left
  • 导航条内元素右浮动:右浮动的元素添加类名navbar-right
  • 导航条固定在浏览器窗口顶部:导航条父容器添加类名navbar-fixed-top
  • 导航条固定在浏览器窗口底部:导航条父容器添加类名navbar-fixed-bottom

**注意:**让导航条固定在浏览器窗口顶部或底部会遮盖到页面顶部或底部的内容,解决办法为:给body设置合适的内边距(温馨提示:导航条默认高度为50px)。

三、响应式

目的: 让导航条内容比较多的时候,在窄屏幕设备上显示更加友好

表现: 宽屏正常显示,窄屏时隐藏一部分条目,并调整其排列方式为垂直排列,然后通过一个按钮单击显示

宽屏显示:

窄屏显示:

窄屏展开:

**方法: **

  1. 将想要被折叠的元素包裹在一个类名为"collapse navbar-collapse"的div中
  2. 定义想要显示的图标,可以将其放在类名为“navbar-header”的元素中
<button class="navbar-toggle" type="button" data-toggle="collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

完整代码:

<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".test">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">LOGO</a>
</div>
<div class="collapse navbar-collapse test">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">条目一</a></li>
<li><a href="#">条目二</a></li>
<li><a href="#">条目三</a></li>
<li><a href="#">条目四</a></li>
<li><a href="#">条目五</a></li>
</ul>
</div>
</div>
  1. 为隐藏元素的父标签添加一个class类名id名,然后让button的data-target链接到该元素:data-target=".class/#id"

响应式的临界点为768px,即当屏幕大于768px时原样显示,小于768px时改变样式

路径导航(面包屑导航)

<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>

样式:

bootstrap3- 导航条 - 慕课笔记的更多相关文章

  1. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  2. 1.bootstrap练习笔记-导航条

    bootstrap练习笔记 1.关于导航栏   官网链接:http://v3.bootcss.com/components/#nav 结构大概是这样的: nav标签标识导航栏 class为navbar ...

  3. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  4. bootstrap学习笔记之导航条基础

    导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个"条"字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背 ...

  5. amazeui学习笔记--css(常用组件10)--导航条Topbar

    amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...

  6. 【代码笔记】iOS-改变导航条标题的颜色为红色

    一,效果图. 二,代码. RootViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional se ...

  7. bootstrap学习笔记<十一>(导航条)

    基础导航条.样式:class="navbar navbar-default",属性:role="navigation" <div class=" ...

  8. Bootstrap3基础 navbar 导航条 简单示例

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  9. Bootstrap学习笔记(5)--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单

    实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...

随机推荐

  1. XSS——跨站脚本攻击

    跨站点脚本攻击:通过对网页注入恶意脚本,成功地被浏览器执行,来达到攻击的目的. 一.XSS攻击类型与原理1. 反射型XSS攻击非持久性攻击,黑客使用社交性的交互技巧诱导用户点击访问目标服务器的链接,但 ...

  2. 2019-6-23-WPF-托盘显示

    title author date CreateTime categories WPF 托盘显示 lindexi 2019-06-23 11:52:36 +0800 2018-11-21 11:19: ...

  3. 大哥带我走渗透8--CSRF的应用

    1.大哥给了一个CSRF实战视频,真的很简单,但是我今天晚上有点不在状态,很多简单的问题也没有想.所以做了一个多小时.这件事给我的启发就是,无论发生什么事,都不要影响自己的学习.先写点废话,真的真的, ...

  4. ed-tue-robotics

    https://github.com/tue-robotics/ed ubuntu16.04 安装libsdformat4-dev ,libsdformat4 1./usr/include/sdfor ...

  5. Linux学习笔记之目录配置

    一.目录配置 相关目录说明 /bin              二进制文件 /boot           系统启动文件(内核的初始化文件等) /dev            设备文件(硬盘等) /e ...

  6. "=="、equals、hashCode之间的区别

    1. "=="分为两种情况: (1) 基本数据类型,比较的是其对应的值是否相等: (2) 引用类型,比较的是他们在内存中存放的地址(或者说,是否指向同意对象). 2. equals ...

  7. 抽象类(abstract)与接口(interface)的区别

    如果一个类中包含抽象方法,那么这个类就是抽象类.abstract只能用来修饰类或者方法,不能用来修饰属性. 接口是指一个方法的集合,接口中的所有方法都没有方法体.接口通过关键字interface实现. ...

  8. day19 python模块 json模块 pickle模块

    day19 python   一.序列化模块     序列类型: 列表 字符串 元组 bytes     序列化: 特指字符串和bytes, 就是把其他的数据类型转化成序列的数据类型的过程 dic = ...

  9. Mysq修改引擎

    [数据库]Mysql更改默认引擎为Innodb的步骤方法   前言 InnoDB和MyISAM是许多人在使用MySQL时最常用的两个表类型,这两个表类型各有优劣,视具体应用而定. 基本的差别为:MyI ...

  10. Ubuntu下使用天河注意事项

    把下载的.cgi登陆文件用文本编辑器打开,修改端口 用管理员权限打开.cgi才能绑定端口 $ gksu nautilus # browse files as root $ gksu gedit /et ...