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. MQTT DockerFile

    Link: https://blog.csdn.net/russle/article/details/80469942 https://blog.csdn.net/qq_23937195/articl ...

  2. shell 脚本规范

    shell 脚本规范 一.背景 1.使用哪一种shell? 必须使用bash shell 2.什么时候使用shell? 数量相对较少的操作 脚本文件少于100行 3.脚本文件扩展名是什么? shell ...

  3. Css3-文字

    一.text-overflow   text-overflow用来设置是否使用一个省略标记(...)标示对象内文本的溢出. 语法:text-overflow:clip(默认属性,表示剪切) | ell ...

  4. Oracle 存储过程--01

    1.简单的例子 /* 1.求圆的面积 */ create or replace procedure proc_1 is pi constant number(9,7):=3.1415927; radi ...

  5. Java的GC机制及算法

    GC的阶段  对每个对象而言,垃圾回收分为两个阶段:finalization和reclamation.  finalization: 指运行这个对象的finalize的方法. reclamation: ...

  6. java Arrays工具类的操作

    package java08; /* java.util.Arrays是一个与数组相关的工具类,里面提供了大量的静态方法,用来实现数组常见的操作 public static String toStri ...

  7. Elastic Search快速入门

    https://blog.csdn.net/weixin_42633131/article/details/82902812 通过这个篇文章可以快速入门,快速搭建一个elastic search de ...

  8. Java基本数据类型及所占字节大小

    一.Java基本数据类型 基本数据类型有8种:byte.short.int.long.float.double.boolean.char 分为4类:整数型.浮点型.布尔型.字符型. 整数型:byte. ...

  9. mobx学习笔记01——什么是mobx?

    mobx是什么? js框架 官方定义:Simple,scalable state management(简单.可扩展的状态管理) mobx与redux相比: 语义丰富.响应式编程,开发难度低.学习成本 ...

  10. linux学习-用户组与权限管理

    一.用户与组 1.用户 管理员:root,UID为0 普通用户:1-60000 自动分配 系统用户:1-499,1-999(Centos7),对守护进程分配获取资源进行权限分配 登录用户:500+,1 ...