使用bootstrap制作导航条

参考链接：https://v3.bootcss.com/components/#navbar
项目结构
工具使用：
Bootstrap Button Generator
通过Bootstrap Button Generator，你只需输入你想指定给新按钮的样式的CSS类，并简单调整图标的颜色，即可获得新的图标，然后复制代码，粘贴在任意你想要的地方即可。
最终效果
中等屏幕桌面显示器 (≥992px) 、大屏幕大桌面显示器 (≥1200px)：

桌面显示器 (<992px)
超小屏幕手机 (<768px) 、小屏幕平板 (≥768px)：
代码

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入bootstrap核心样式文件（必须） --><link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"><link rel="stylesheet" href="css/index.css"><!-- 站点图标 --><link rel="shortcut icon" href="imgs/favicon.ico" type="image/x-icon">
</head><!-- 头部 --><header id="dw_header"><!-- 上半部分 --><div class="top-bar hidden-sm hidden-xs text-center text-muted"><div class="container"><div class="row"><div class="top-bar-1 col-md-2"><a href=""><i class="icon-phone"></i><span>关注微信号</span><span class="caret"></span><img src="imgs/ewm_xzh.jpg" alt="旋之华" width="130"></a></div><div class="top-bar-2 col-md-5"><i class="icon-tel"></i><span>8888-555-6666（服务时间：9:00-21:00）</span></div><div class="top-bar-3 col-md-2"><a href="" class="text-muted">校企合作</a><a href="" class="text-muted">培训师</a></div><div class="top-bar-4 col-md-3"><a class="btn btn-register" href="#" role="button">免费注册</a><a class="text-muted" href="#" role="button" style="margin-left: 10px;">立即登录</a></div></div></div></div><!-- 下半部分 --><nav class="navbar navbar-default navbar-static-top navbar-dw"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#dw_nav" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#"><img src="imgs/lk_logo_sm.png" alt="撩课" width="180"></a></div><div class="collapse navbar-collapse" id="dw_nav"><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><li><a href="#">联系我们</a></li></ul><ul class="nav navbar-nav navbar-right hidden-sm hidden-xs"><li><a href="#">个人中心</a></li></ul></div></div></nav></header><!-- /头部 --><!-- 轮播图 --><section id="dw_carousel"></section><!-- /轮播图 --><!-- 关于我们 --><section id="dw_about"></section><!-- /关于我们 --><!-- 产品特色 --><section id="dw_product"></section><!-- /产品特色 --><!-- 热门课程 --><section id="lk_hot"></section><!-- /热门课程 --><!-- 友情链接 --><section id="dw_link"></section><!-- /友情链接 --><!-- 尾部 --><footer id="dw_footer"></footer><!-- /尾部 -->
<body><script src="lib/jquery/jquery.js"></script><!-- 引入bootstrap核心脚本文件 --><script src="lib/bootstrap/js/bootstrap.js"></script><script src="js/index.js"></script>
</body></html>

index.css

/* 通用样式 start */
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #000;
}.btn-register {color: #FFFFFF;background-color: #0AB4F7;border-color: #F4F7F7;
}.btn-register:hover,
.btn-register:focus,
.btn-register:active,
.btn-register.active,
.open .dropdown-toggle.btn-register {color: #FFFFFF;background-color: #086DF2;border-color: #F4F7F7;
}.btn-register:active,
.btn-register.active,
.open .dropdown-toggle.btn-register {background-image: none;
}.btn-register.disabled,
.btn-register[disabled],
fieldset[disabled] .btn-register,
.btn-register.disabled:hover,
.btn-register[disabled]:hover,
fieldset[disabled] .btn-register:hover,
.btn-register.disabled:focus,
.btn-register[disabled]:focus,
fieldset[disabled] .btn-register:focus,
.btn-register.disabled:active,
.btn-register[disabled]:active,
fieldset[disabled] .btn-register:active,
.btn-register.disabled.active,
.btn-register[disabled].active,
fieldset[disabled] .btn-register.active {background-color: #0AB4F7;border-color: #F4F7F7;
}.btn-register .badge {color: #0AB4F7;background-color: #FFFFFF;
}@font-face {font-family: lk;src: url('../fonts/lk.eot') format('embedded-opentype'),url('../fonts/lk.svg') format('svg'),url('../fonts/lk.ttf') format('truetype'),url('../fonts/lk.woff') format('woff');
}[class^="icon-"],
[class*="icon-"]{font-family: lk;font-style: normal;
}/* 通用样式 end *//* 头部样式 start */
#dw_header .top-bar {height: 40px;line-height: 39px;border-bottom: 1px solid #e0e0e0;}/* 采用了：子代选择器、相邻兄弟选择器 */
#dw_header .top-bar .container .row > div + div {border-left: 1px solid #e0e0e0;
}#dw_header .top-bar .container .row .top-bar-1 a{position: relative;
}
#dw_header .top-bar .container .row .top-bar-1 a img{display: none;position: absolute;left: 50%;margin-left: -65px;margin-top:  -10px;z-index: 9999;
}
#dw_header .top-bar .container .row .top-bar-1 a:hover img{display: block;
}
.icon-phone::before{content: '\e958';font-size: 13px;
}
.icon-tel::before{content: '\e942';font-size: 13px;
}#dw_header .navbar-dw {background-color: #FFFFFF;
}
#dw_header .navbar-dw .navbar-brand {height: 70px;padding: 10px 15px;
}
#dw_header .navbar-dw .navbar-nav a {height: 70px;line-height: 40px;
}
#dw_header .navbar-dw .navbar-nav li.active a,
#dw_header .navbar-dw .navbar-nav li a:hover {background-color: transparent;border-bottom: 2px solid #0AB4F7;
}
#dw_header .navbar-dw .navbar-toggle {margin-top: 18px;
}
/* 头部样式 end */

四十五、使用bootstrap制作导航条相关推荐

bootstrap制作导航条案例
bootstrap制作导航条案例 <!DOCTYPE html> <html lang="en"> <head><meta charset ...
flask系列---模板的继承及Bootstrap实现导航条（四）
在建设一个网站的时候,不同的页面有很多元素是一样的,比如导航条.侧边栏等,我们可以使用模板的继承,避免重复编写html代码.现在我们打算实现一个在网页上方的导航条,并在所有的页面中继承这个导航条.导航 ...
服务器存储满了进不去系统,解决PC常见问题篇四十五：建议收藏！手贱升级进不去系统？两步简单恢复黑群晖！...
解决PC常见问题篇四十五:建议收藏!手贱升级进不去系统?两步简单恢复黑群晖! 2021-07-19 16:40:32 47点赞 302收藏 15评论创作立场声明:本文属于原创文章,无任何利益关系, ...
信息系统项目管理师必背核心考点（四十五）招标投标法
科科过为您带来软考信息系统项目管理师核心重点考点(四十五)招标投标法,内含思维导图+真题 [信息系统项目管理师核心考点]招标投标法转包的情形 1.中标人应当按照合同约定履行义务,完成中标项目 2.中 ...
android相册幻灯片功能,玩机教程篇四十五：「MIUI玩机技巧63」MIUI相册新增“幻灯片播放”功能...
玩机教程篇四十五:「MIUI玩机技巧63」MIUI相册新增"幻灯片播放"功能 2020-02-17 16:15:35 0点赞 0收藏 0评论本帖主要解决2大问题: 1) 功能科 ...
孤荷凌寒自学python第四十五天Python初学基础基本结束的下阶段预安装准备
孤荷凌寒自学python第四十五天Python初学基础基本结束的下阶段预安装准备 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) 今天本来应当继续学习Python的数据库操作,但根据过去我自学 ...
【正点原子STM32连载】第四十五章 SD卡实验摘自【正点原子】MiniPro STM32H750 开发指南_V1.1
1)实验平台:正点原子MiniPro H750开发板 2)平台购买地址:https://detail.tmall.com/item.htm?id=677017430560 3)全套实验源码+手册+视频 ...
计算机软件发展四十五年
计算机软件发展四十五年 2011年05月17日 09:00博览网原文链接我要评论(0) 摘要:通过对计算机软件发展的四十多年历史的回顾,详细论述其发展的三个不同阶段:开创阶段.稳定阶段以及发展阶段的过 ...
【Visual C++】游戏开发笔记四十五浅墨DirectX教程十三深度测试和Z缓存专场
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 文章链接: http://blog.csdn.net/zhmxy555/article/details/8607864 作者:毛星云(浅墨 ...

四十五、使用bootstrap制作导航条

使用bootstrap制作导航条

四十五、使用bootstrap制作导航条相关推荐

最新文章

热门文章