有人说前端发展太快,框架太多,各有所需，各有所长。看看这幅图，估计都知道这些框架，但是大部分公司中实际要用到的也就那么几个。

发展再快,框架再多。还是得回到原点，不就是Html+Css+JavaScript吗，使用任何牛逼的框架之前你也得把这些东西玩熟练了。bootstrap上大一的时候学html的时候就听老师说过，接触也快一年多了，所以这里准备写一篇关于bootstrap如何自定义导航栏的文章，如有不足还希望能够提出宝贵的建议。

首先这种导航栏非常常见，也没有一个固定的专业名词，我暂且给他取个名字吧：渐变顶部固定自适应导航栏。随便找了一个网站,还是先来看一下整体的效果吧

首先我们引入

<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

这个是菜鸟的cdn,直接引入。直接复制菜鸟上面的一个响应式导航栏的代码懒得下载,

值得注意的是：刚开始接触bootstrap的时候会犯的一个错误，有时我们想写自己的样式来达到效果，直接改bootstrap里面的样式。这种做法是不值得提倡的。正确的做法应该是写一个class 覆盖掉原有的样式。

我直接贴代码了：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

	<meta charset="utf-8" />

    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style type="text/css">

        html, body {width:100%;height:100%;} /*非常重要的样式让背景图片100%适应整个屏幕*/

        .bg {display: table;width: 100%;height: 100%;padding: 100px 0;text-align: center;color: #fff;background: url(http://www.xiandanke.cn/Image/intro-bg.jpg) no-repeat bottom center;background-color: #000;background-size: cover;}

        .my-navbar {padding:20px 0;transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;}

        .my-navbar a{background:transparent !important;color:#fff !important}

        .my-navbar a:hover {color:#45bcf9 !important;background:transparent;outline:0}

        .my-navbar a {transition: color 0.5s ease-in-out;}/*-webkit-transition ;-moz-transition*/

        .top-nav {padding:0;background:#000;}

        button.navbar-toggle {background-color:#fbfbfb;}/*整个背景都是transparent透明的，会看不到，所以再次覆盖一下*/

        button.navbar-toggle > span.icon-bar {background-color:#dedede}

    </style>

</head>

<body>

    <nav class="navbar navbar-fixed-top my-navbar" role="navigation">

        <div class="container-fluid">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle" data-toggle="collapse"

                        data-target="#example-navbar-collapse">

                    <span class="sr-only">切换导航</span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

                <a class="navbar-brand" href="#">菜鸟教程</a>

            </div>

            <div class="collapse navbar-collapse" id="example-navbar-collapse">

                <ul class="nav navbar-nav">

                    <li class="active"><a href="#">iOS</a></li>

                    <li><a href="#">SVN</a></li>

                    <li>

                        <a href="#">Asp.Net</a>

                    </li>

                </ul>

            </div>

        </div>

    </nav>

     <div class="bg"></div>

    <br /><br /><br /><br /><br /><br /><br /><p><a href="www.xiandanke.com">闲蛋客</a></p>

    <script>

        $(window).scroll(function () {

            if ($(".navbar").offset().top > 50) {$(".navbar-fixed-top").addClass("top-nav");

            }else {$(".navbar-fixed-top").removeClass("top-nav");}

        })</script>

</body></html>

真的只用了9行代码，原理挺简单的，但是要注意以下几点

1.html,body{width:100%;height:100%} ,必须写这个样式，才能让html中的子元素100%占满整个屏幕，也就是要实现背景图片占满100%的整个屏幕

2.bootstrap中的类 nav-fixed-top的意义在于固定导航栏在顶部

3.添加scroll 事件，在切换class的时候实现动态的效果

4.整个效果的实现原理是使用了transition 属性,transition属性的使用方法是：

transition 属性是一个简写属性，用于设置四个过渡属性：

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

如果你想下载这个html，点这里 下载看看

实际效果图如下：

bootstrap自定义样式-bootstrap侧边导航栏的实现：http://blog.csdn.net/kebi007/article/details/76038251

作者：张林

标题:自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏 原文地址:http://blog.csdn.net/kebi007/article/details/54341994

转载随意注明出处

自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：带有字体图标的导航栏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. [置顶] bootstrap自定义样式-bootstrap侧边导航栏的实现

    前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单 ...

  3. [iOS微博项目 - 1.1] - 设置导航栏主题（统一样式）

    A.导航栏两侧文字按钮 1.需求: 所有导航栏两侧的文字式按钮统一样式 普通样式:橙色 高亮样式:红色 不可用样式:亮灰 阴影:不使用 字体大小:15   github: https://github ...

  4. CARDS主题 & 导航栏样式修改

    每个人对于主题样式的感觉是不一样的,譬如字体大小,间距,高宽,距离,颜色等,我们可以一定程度内很直观地去修改主题的某些样式. 首先,在浏览器中利用开发者工具进行调试,找到我们所要改动的那部分结构,写入 ...

  5. ShareSDK(iOS版)开发实践：自定义授权视图和分享视图导航栏

    最近很多人问ShareSDK的授权视图和分享视图的导航栏样式与应用风格不一致,能否修改导航栏的样式?那么这里我就2.6.1版本进行说明(还在使用1.x版本的朋友建议升级到2.x版本,在新版本中可定制的 ...

  6. [Xcode 实际操作]三、视图控制器-(6)UINavigationController导航栏样式

    目录:[Swift]Xcode实际操作 本文将演示对导航栏进行样式设置,以及更改导航顶部的提示区. 选择编辑第一个视图控制器文件. import UIKit class FirstSubViewCon ...

  7. 在CSS中定义【导航栏】超链接样式

    1.案例css代码 <style> .divcss5 a:link{ color:#F00}/* 链接默认为红色 */ .divcss5 a:hover{ color:#000}/* 鼠标 ...

  8. Bootstrap入门Demo——制作路径导航栏

    今天在在群里聊天的时候看到一仅仅程序猿发了一张用Bootstrap做的界面.感觉挺好看.然后去官网看了下组件.发现都挺美丽的,然后看到了路径导航栏,刚好要做这个东西,然后就下了Bootstrap的源代 ...

  9. DataGridView自定义行样式和行标题

    定义两个样式对象: //定义两种行样式 private DataGridViewCellStyle m_RowStyleNormal; private DataGridViewCellStyle m_ ...

随机推荐

  1. 使用ztree展示树形菜单结构

    官网:http://www.treejs.cn/v3/main.php#_zTreeInfo 一.功能简介 在权限系统中,实现给角色指定菜单权限的功能.主要包括以下几点: 读取全部菜单项,并以树形结构 ...

  2. 我的第一个python web开发框架（17）——产品管理

    这是后台管理系统最后一个功能,产品管理,它的接口与页面功能与上一章差不多. 获取产品列表接口 @get('/api/product/') def callback(): ""&qu ...

  3. linux文件、目录

    user用户 group用户组 others其他人用户信息保存在/etc/passwd [root@iZ25het8xn8Z ~]# ls -altotal 56dr-xr-x---. 3 root ...

  4. ionic3中 ion-datetime 全屏可点击问题解决方案

    废话不多说,能进来的都应该知道是个什么情况.我也是在网上找了一段时间,才在git上ionic官方团队的Issues中找到了问题解决方法. 第一,给外围包上一层ion-item,但是这有个问题,就是会让 ...

  5. DIV+CSS特殊符号的处理方法

    :    :;    ;<    <=    =>    >?    ?@    @^    ^_    _`    `{    {|    |}    }~    ~---  ...

  6. [全排列]--A Number Puzzle

    标签: ACM Lele 最近上课的时候都很无聊,所以他发明了一个数字游戏来打发时间. 这个游戏是这样的,首先,他拿出几张纸片,分别写上0到9之间的任意数字(可重复写某个数字),然后,他叫同学随便写两 ...

  7. 站在 Android 开发的角度，聊聊 Airbnb 的 Lottie！！！

    一.前言 你有没有遇上一些设计师,对一些酷炫的动画着迷,喜欢根据场景设计出可爱而流畅的动画.但是在实际工作中,哪怕开发人员也觉得这些动画非常的棒,可我们知道,越是定制化的动画,实现起来将会越麻烦和耗时 ...

  8. Linux多进程编程实例

    前言:编写多进程程序时,我们应该了解一下,创建一个子进程时,操作系统内核是怎样做的.当通过fork函数创建新的子进程时,内核将父进程的用户地址空间的内容复制给子进程,这样父子进程拥有各自独立的用户空间 ...

  9. java学习笔记之日期日历类

    java学习笔记之日期日历 Date日期类概述: 表示特定的瞬间,精确到毫秒 Date类的构造方法: 1.空参数构造方法 Date date = new Date(); 获取到当前操作系统中的时间和日 ...

  10. JAVA基础-----Maven项目的搭建

    Maven项目的搭建 一.前言 maven官网:http://maven.apache.org/, 文章简介:本文章从三个模块来了解Maven,分别是 Maven的基本概念~, Maven项目的安装和 ...