正文

bootstrap学习笔记<十一>（导航条）

IP云
IP云V管理员/2 阅读
09/14
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

基础导航条。样式：class="navbar navbar-default"，属性：role="navigation"

<div class="navbar navbar-default" role="navigation">
<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）带二级菜单，表单元素

<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">公司LOGO</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="##">CSS3</a></li>
<li><a href="##">JavaScript</a></li>
<li class="disabled"><a href="##">PHP</a></li>
</ul>
</li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">关于我们</a></li>
</ul>
<form action="##" class="navbar-form navbar-left" rol="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入关键词" />
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</div>

导航条标题： class="navbar-brand

二级菜单：class="dropdown-toggle"  data-toggle="dropdown"

带表单导航条：class="navbar-form"

导航条位置控制：class="navbar-left"

2）导航条中的按钮、文本和链接

1、导航条中的按钮：navbar-btn

2、导航条中的文本：navbar-text

3、导航条普通链接：navbar-link

但这三种样式在框架中使用时受到一定的限制，需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题。

3）固定导航条(固定页头页脚)

.navbar-fixed-top：导航条固定在浏览器窗口顶部

.navbar-fixed-bottom：导航条固定在浏览器窗口底部

使用注意：从运行效果中大家不难发现，页面主内容顶部和底部都被固定导航条给遮住了。为了避免固定导航条遮盖内容，我们需要在body上做一些处理：

解决方案<一>：

固定导航条默认高度是50px，我们一般设置padding-top和padding-bottom的值为70px，当然有的时候还是需要具体情况具体分析。

body {
padding-top: 70px;/*有顶部固定导航条时设置*/
padding-bottom: 70px;/*有底部固定导航条时设置*/
}

CSS

解决方案<二>：

其实除了这种解决方案之外，我们还有其他的解决方法，把固定导航条都放在页面内容前面。

<!--固定顶部-->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
…
</div>
<!--固定底部-->
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
…
</div>
<!--页面内容-->
<div class="content">我是内容</div>

HTML

例：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">LOGO</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="##">首页</a></li>
<li><a>页头</a></li>
</ul>
</div>
<div class="content">我是内容</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<ul class="nav navbar-nav">
<li><a href="##">主页</a></li>
<li><a href="##">刷新</a></li>
<li><a href="##">关于</a></li>
</ul>
</div>

例子

4）响应式导航

自适应屏幕显示导航

<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 确保无论是宽还是窄，navbar-brand都显示 -->
<a href="##" class="navbar-brand">LOGO</a>
</div>
<!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
<div class="collapse navbar-collapse navbar-responsive-collapse">
<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>
</div>

例子

窄屏导航图标

<button class="navbar-toggle" type="button" data-toggle="collapse">
<span class="sr-only"></span>
<!--横线图标-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<!--一个icon-bar代表一个横线-->
</button>

解析

bootstrap学习笔记<十一>（导航条）的更多相关文章

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

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

  2. Bootstrap 学习笔记5 进度条媒体对象和well组件

    代码: <ul class="media-list"> <li class="media"> <div class="m ...

  3. Bootstrap 我的学习记录3 导航条理解

    以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...

  4. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http&colon;&sol;&sol;www&period;imooc&period;com&sol;code&sol;3120

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

  5. bootstrap学习笔记之基础导航条 http&colon;&sol;&sol;www&period;imooc&period;com&sol;code&sol;3111

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

  6. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  7. Bootstrap学习笔记&lpar;二&rpar; 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  8. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

  9. python3&period;4学习笔记&lpar;十一&rpar; 列表、数组实例

    python3.4学习笔记(十一) 列表.数组实例 #python列表,数组类型要相同,python不需要指定数据类型,可以把各种类型打包进去#python列表可以包含整数,浮点数,字符串,对象#创建 ...

随机推荐

  1. juery 实现下拉框多选 jquery-multiselect

    效果: 除了jquery,需要引用的样式和js文件: <link rel="stylesheet" type="text/css" href=" ...

  2. 数据库SQLite在Qt5&plus;VS2012使用规则总结---中文乱码

    VS2012默认格式为 "GB2312-80",而有时我们用到字符串需要显示中文时,就会出现乱码.下面仅就Qt5和VS2012中使用数据库SQLite时,做一个简单的备忘录 #in ...

  3. linux 终端相关

    echo cd ~/桌面 >> .bashrc 将终端默认路径设为桌面 -/.bashrc./etc/bash.bashrc./etc/profile这几个文件.这些文件的的作用时机:/e ...

  4. Python3调用Hadoop的API

    前言: 上一篇文章 我学习使用pandas进行简单的数据分析,但是各位...... Pandas处理.分析不了TB级别数据的大数据,于是再看看Hadoop. 另附上人心不足蛇吞象 对故事一的感悟:   ...

  5. centos7下安装docker（12&period;5容器在单个host上的网络总结）

    单个host上的容器的网络:通过本章的学习,我们知道docker默认有三种网络,可以通过docker network ls查看: none:封闭的网络,通过--network=none来指定: hos ...

  6. HDU 5702 Solving Order

    http://acm.hdu.edu.cn/showproblem.php?pid=5702 Problem Description Welcome to HDU to take part in th ...

  7. mapReducer第一个例子WordCount

    mapreducer第一个例子,主要是统计一个目录下各个文件中各个单词出现的次数. mapper package com.mapreduce.wordCount; import java.io.IOE ...

  8. Spring配置&comma;事务使用

    1.spring redis session超时配置 <bean class="org.springframework.session.data.redis.config.annota ...

  9. Serializable java序列化

    Bean Serializable Interface 的接口让BEAN可以串行化,将其变成一个可保存为以后使用的二进制流.当一个BEAN被系列化到磁盘上或者其他任何地方,其状态被保存起来,其中的属性 ...

  10. 【题解】Matrix BZOJ 4128 矩阵求逆 离散对数 大步小步算法

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=4128 大水题一道 使用大步小步算法,把数字的运算换成矩阵的运算就好了 矩阵求逆?这么基础的线 ...