自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏
有人说前端发展太快,框架太多,各有所需,各有所长。看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个。
发展再快,框架再多。还是得回到原点,不就是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导航栏的更多相关文章
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):带有字体图标的导航栏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- [置顶]
bootstrap自定义样式-bootstrap侧边导航栏的实现
前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单 ...
- [iOS微博项目 - 1.1] - 设置导航栏主题(统一样式)
A.导航栏两侧文字按钮 1.需求: 所有导航栏两侧的文字式按钮统一样式 普通样式:橙色 高亮样式:红色 不可用样式:亮灰 阴影:不使用 字体大小:15 github: https://github ...
- CARDS主题 & 导航栏样式修改
每个人对于主题样式的感觉是不一样的,譬如字体大小,间距,高宽,距离,颜色等,我们可以一定程度内很直观地去修改主题的某些样式. 首先,在浏览器中利用开发者工具进行调试,找到我们所要改动的那部分结构,写入 ...
- ShareSDK(iOS版)开发实践:自定义授权视图和分享视图导航栏
最近很多人问ShareSDK的授权视图和分享视图的导航栏样式与应用风格不一致,能否修改导航栏的样式?那么这里我就2.6.1版本进行说明(还在使用1.x版本的朋友建议升级到2.x版本,在新版本中可定制的 ...
- [Xcode 实际操作]三、视图控制器-(6)UINavigationController导航栏样式
目录:[Swift]Xcode实际操作 本文将演示对导航栏进行样式设置,以及更改导航顶部的提示区. 选择编辑第一个视图控制器文件. import UIKit class FirstSubViewCon ...
- 在CSS中定义【导航栏】超链接样式
1.案例css代码 <style> .divcss5 a:link{ color:#F00}/* 链接默认为红色 */ .divcss5 a:hover{ color:#000}/* 鼠标 ...
- Bootstrap入门Demo——制作路径导航栏
今天在在群里聊天的时候看到一仅仅程序猿发了一张用Bootstrap做的界面.感觉挺好看.然后去官网看了下组件.发现都挺美丽的,然后看到了路径导航栏,刚好要做这个东西,然后就下了Bootstrap的源代 ...
- DataGridView自定义行样式和行标题
定义两个样式对象: //定义两种行样式 private DataGridViewCellStyle m_RowStyleNormal; private DataGridViewCellStyle m_ ...
随机推荐
- CentOS7 安装sentry(最新)
Sentry 是一款基于 Django实现的错误日志收集和聚合的平台,它是 Python 实现的,但是其日志监控功能却不局限于python,对诸如 Node.js, php,ruby, C#,ja ...
- 安卓自定义控件(五)触控基础MotionEvent
之前去面试,人家说,我这个事件拦截机制写得太少了,还有一个MotionEvent没写,这个确实也很重要,后来我考虑了一下,决定将这篇文章放到自己定义控件里. 先简单再提一下事件分发,事件分发和拦截主要 ...
- 杭电ACM——自我强化步骤
第一阶段:开始入门吧!(15天,53题) http://blog.csdn.net/always2015/article/details/44966019#t0 一.输入输出练习(2天,10题) 10 ...
- JavaScript各种继承方式和优缺点
好久没写博客啦,嘻嘻,这个月是2017年的最后一个月啦,大家应该都开始忙着写年终总结了吧,嘻嘻,小颖今天给大家分享下Javascript中的几种继承方式以及他们的优缺点. 1.借助构造函数实现继承 原 ...
- php加密字符串超时不可解密
<?php/** * 加密字符串在指定时间内解密有效 * @param [type] $string 明文字符串 * @param string $operation 解密值为DE ...
- 基于TCP协议的socket编程
什么是socket Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP协议族隐藏在Socket接口后面, ...
- Docker: 限制容器可用的内存
默认情况下容器使用的资源是不受限制的.也就是可以使用主机内核调度器所允许的最大资源.但是在容器的使用过程中,经常需要对容器可以使用的主机资源进行限制,本文介绍如何限制容器可以使用的主机内存. 为什么要 ...
- 通过Javascript调用微软认知服务情感检测接口的两种实现方式
这是今天在黑客松现场写的代码.我们的项目需要调用认知服务的情感识别接口.官方提供了一种方式,就是从一个远程图片进行识别.我另外写了一个从本地文件读取并上传进行识别的例子. 官方文档,请参考 https ...
- Python的字典
1. Python的字典 1.1. 字典的定义 在Python中,字典是一种key-value的数据类型,也是唯一的映射类型:字典还是另一种可变容器类型,且可存储任意类型对象,其中也可包括其他容器 ...
- 小tip:生成一组不重复的随机数(去重的方法)
var arr = []; for(var i=0;i<150;i++){ // num为0-100的随机数 var num = Math.round(Math.random()*100); v ...