基础导航条

在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多。我们先来看导航条中最基础的一个——基础导航条。

使用方法:

在制作一个基础导航条时,主要分以下几步:

第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”

第二步:在列表外部添加一个容器(div),并且使用类名“navbar”和“navbar-default”

示例查看右侧代码编辑(10-19行)。

“.navbar”样式的主要功能就是设置左右padding和圆角等效果,但他和颜色相关的样式没有进行任何的设置。其主要源码如下:

/*源码查看bootstrap.css文件第3642行~第3647行*/

.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}

原理分析:

而导航条的颜色都是通过“.navbar-default”来进行控制:

/*源码查看bootstrap.css文件第3940行~第3943行*/

.navbar-default {
background-color: #f8f8f8;
border-color: #e7e7e7;
}

navbar-nav样式是在导航.nav的基础上重新调整了菜单项的浮动与内外边距。同时也不包括颜色等样式设置,源码请查看bootstrap.css文件第3785行~第3830行,我们把代码节选出来放入右侧bootstrap.css中。

而颜色和其他样式是通过配合父容器“navbar-default”来一起实现:

/*源码请查看bootstrap.css文件第3955行~第3974行*/

.navbar-default .navbar-nav> li > a {
color: #777;
}
.navbar-default .navbar-nav> li >a:hover,
.navbar-default .navbar-nav> li >a:focus {
color: #333;
background-color: transparent;
}
.navbar-default .navbar-nav> .active > a,
.navbar-default .navbar-nav> .active >a:hover,
.navbar-default .navbar-nav> .active >a:focus {
color: #555;
background-color: #e7e7e7;
}
.navbar-default .navbar-nav> .disabled > a,
.navbar-default .navbar-nav> .disabled >a:hover,
.navbar-default .navbar-nav> .disabled >a:focus {
color: #ccc;
background-color: transparent;
}


站内地址:
站外地址:bootstrap学习笔记之基础导航条  http://www.imooc.com/code/3111

bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111的更多相关文章

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

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

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

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

  3. Bootstrap 学习笔记13 附加导航插件

    附加导航代码: <style> a:focus { outline: none; } .nav-pills { width: 150px; } .nav-pills.affix { top ...

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

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

  5. Bootstrap系列 -- 38. 基础导航条

    在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个容器(div), ...

  6. Bootstrap每天必学之导航条

    http://www.jb51.net/article/75534.htm Bootstrap每天必学之导航条,本文向大家讲解了多种多样的导航条,以及导航条中元素的实现方法,感兴趣的小伙伴们可以参考一 ...

  7. Bootstrap~学习笔记索引

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

  8. Bootstrap学习笔记(二) 表单

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

  9. MyBatis:学习笔记(1)——基础知识

    MyBatis:学习笔记(1)--基础知识 引入MyBatis JDBC编程的问题及解决设想 ☐ 数据库连接使用时创建,不使用时就释放,频繁开启和关闭,造成数据库资源浪费,影响数据库性能. ☐ 使用数 ...

随机推荐

  1. 【转】HTML5 API --- 页面可见性改变(visibilitychange)事件

    [摘要:[本文属本创,若有转载,请说明出处http://blog.csdn.net/yl02520/article/] visibilitychange事情是扫瞄器新增加的一个事情,当扫瞄器的某个标签 ...

  2. Python第一天接触心得

    最近想学Python,就开始看教程下载,官网是https://www.python.org/downloads/,最新版本是3.6.1, 注意:x86-64表示适用于windows 64位系统:x86 ...

  3. Android自定义ListView的Item无法响应OnItemClick的解决办法(转)

    原文链接:http://www.linuxidc.com/Linux/2011-09/43205.htm 如果你的自定义ListViewItem中有Button或者Checkable的子类控件的话,那 ...

  4. 某直播App问题分析

    某直播App问题分析 一. 出现问题 观看自己开播的直播间,经常出现卡顿,而且画面一卡6,7s,重新播放时会出现跳帧,卡顿频率也较高,导致该App可用性极低. 二. 分析 1. 直播架构分析 根据lo ...

  5. mock.js-无需等待,随机产生数据,让前端独立于后端进行开发

    mock.js所做的 基于 数据模板 生成模拟数据. 基于 HTML模板 生成模拟数据. 拦截并模拟 ajax 请求. Mock.js官方网址:http://mockjs.com/ 1.Mock.js ...

  6. matlab实现可调节占空比的方波

    我大概讲一下实现的原理:正弦波移相φ,当使得大于sin(φ)的值为1,其他值为-1,占空比就跟这个φ值之间有联系. 占空比原理图如下所示. 结果上图,可以实现调节占空比,方波频率,方波个数. 下面是函 ...

  7. Java 静态代理与动态代理

    代理模式 设想你的项目依赖第三方,但是你需要对其接口做一些数据检验.性能数据记录.异常处理等,合适的方法就是使用设计模式里的代理模式. 代理模式是常用的java设计模式,代理类与委托类有同样的接口,代 ...

  8. oracle定时执行一个存储过程

    首先需要新建存储过程 一 存储过程: create or replace procedure Insertdata is begin INSERT INTO tab_dayta select * fr ...

  9. 【Tomcat源码学习】-5.请求处理

    前四章节,主要对Tomcat启动过程中,容器加载.应用加载.连接器初始化进行了相关的原理和代码流程进行了学习.接下来开始进行接受网络请求后的相关处理学习.   一.整体流程      基于上一节图示进 ...

  10. 【转】JDBC学习笔记(7)——事务的隔离级别&批量处理

    转自:http://www.cnblogs.com/ysw-go/ 数据库事务的隔离级别 对于同时运行的多个事务, 当这些事务访问数据库中相同的数据时, 如果没有采取必要的隔离机制, 就会导致各种并发 ...