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导航条例子相关推荐
- 鼠标点击出现下拉菜单html,Bootstrap导航条可点击和鼠标悬停显示下拉菜单
使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链 ...
- Bootstrap 导航条的组件
Bootstrap的导航条组件有站点名称.导航链接.表单.搜索表单.下拉菜单等,可以根据需要选择使用. 所有导航组件默认按照在HTML中定义的顺序,从左到右依次排列.如果需要,可以使用 .pull-l ...
- Bootstrap导航条鼠标悬停下拉菜单
Bootstrap导航条鼠标悬停下拉菜单 Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态,都是点击弹出下拉菜单,为了适应一般网站使用,我稍作了一些修改,鼠标hover时就弹 ...
- Bootstrap导航条学习使用(一)
本文实例为大家分享了Bootstrap导航条的具体代码,供大家参考,具体内容如下 navbar: 导航条的基础样式 nav navbar-nav :导航条里菜单的的固定样式组合的class navba ...
- bootstrap 导航条居中
记录一下bootstrap导航条里面的导航按钮居中,并响应小屏幕 1:.navbar-collapse 设置 文字居中 text-align: center; 2:导航容器 .navbar-nav,设 ...
- Bootstrap导航条中组件的排列
组件的排列 通过添加.navbar-left和.navbar-right工具类,可以让导航链接.表单.按钮或文本等对齐.两个类都会通过 CSS 设置特定方向的浮动样式.例如,导航条中包含两个导航链接, ...
- Bootstrap导航条所支持的组件
支持的组件 Bootstrap3的导航条中,可以包含站点名称.导航链接.表单.下拉菜单.文本.非导航链接等组件,可以根据需要选择使用. 1.站点名称 站点名称通过 .navbar-brand 的链接元 ...
- Bootstrap 导航条
导航条(navbar)是一个常用的组件,也是 Bootstrap 的特色功能.导航条一般包含站点名和几个导航链接.还可以对导航条加以扩展,添加表单控件和下拉菜单等. 基本导航条 基本导航条中包含站点名 ...
- Bootstrap导航条、分页导航
[导航条navbar] 在bootstrap中导航与导航条在外观方面差不多,但在实际应用时,导航条却要复杂的多. 导航条制作方法: 第一步:首先在制作导航的列表(<ul class=" ...
最新文章
- ubuntu 12.04 php升级,在 Ubuntu 12.04 LTS 中将 PHP 从 5.3 升级到 5.5
- MySQL 高级 函数
- 一念逍遥服务器维护,一念逍遥开服攻略 新手开荒技巧
- 问题三十六:ray tracing中的Inverse Mapping(1)——球面Inverse Mapping
- 《图论及其应用》期末复习汇总
- 计算机电脑密码设置程序,如何设置计算机开机密码和屏幕保护程序密码
- CS 1.6 服务器信息读取
- Laravel文档梳理5、HTTP请求
- 六个超大规模Hadoop部署案例-Hadoop
- 【脑洞大开】从哲学角度看人工智能:介绍徐英瑾的《心智、语言和机器》
- 西门子PLc程序,博途V16 V17版1200与多台G120变频器通过过modbus RTU485 通讯控制,模拟量转
- 使用Python来模拟鼠标的点击; 模拟键盘
- 接入科大讯飞语音听写,增加语音动画,类似京东语音搜索功能
- 自己收藏的两款夹娃娃PHP源码
- 逻辑地址 与物理地址的转换
- pcl怎么根据深度显示颜色_大麦和黄牛再惹众怒,PCL全明星上表现不佳
- 服务器维护lol3.23,LOL3月23日测试服更新公告 3月23日更新内容介绍
- php mysql留言板系统_PHP结合Mysql数据库实现留言板功能
- CSS中的EM属性之弹性布局
- 基于Python接口自动化测试框架(初级篇)附源码
热门文章
- airtest的强制等待\全局隐式等待\显示等待时间设置
- MJ优质博主清单;把ChatGPT调教为英语私教;绝美SD Prompt手册;AgentGPT体验全记录;2项AI工具最强更新 | ShowMeAI日报
- Godot Engine:用InterpolatedCamera实现第三人称游戏跟随摄像机
- 智慧社区平台建设应该从哪几个方面入手?
- MPAndroidChart的详细使用——BarChart条形图(一)
- 教程篇(7.0) 07. 诊断和故障排除 ❀ FortiClient EMS ❀ Fortinet 网络安全专家 NSE 5
- 视频剪辑app软件开发需要实现哪些功能
- 频域低通滤波器(数字图像处理与机器视觉P210-P220)
- mark:adb命令读取安卓手机文件安装apk获取运行日志
- 作好项目总结,提高项目管理能力