您现在的位置是:群英 > 开发技术 > web开发
bootstrap导航栏颜色是怎么更改的
Admin发表于 2022-06-20 16:58:281910 次浏览
关于“bootstrap导航栏颜色是怎么更改的”的知识点有一些人不是很理解,对此小编给大家总结了相关内容,文中的内容简单清晰,易于学习与理解,具有一定的参考学习价值,希望能对大家有所帮助,接下来就跟随小编一起学习一下“bootstrap导航栏颜色是怎么更改的”吧。

bootstrap更改导航栏颜色的方法:1、改变导航背景颜色,设置为黑色,给nav标签设置背景颜色为黑色;2、改变导航选中栏目颜色,改变类名active为newactive,并设置其背景颜色为红色。

本文操作环境:Windows7系统,bootstrapv4.4.1版本,Dell G3电脑。

推荐:bootstrap视频教程

bootstrap更改导航栏颜色的方法:

1、bootstrap做的导航栏HTML页必须加载bootstrap.min.cssbootstrap.min.js才能实现导航的效果。下图是完整的代码及效果图。

2、改变导航背景颜色,设置为黑色。给nav标签设置背景颜色为黑色,代码为background:#000。下面是代码及效果图。

3、改变导航选中栏目颜色,如“首页”设置为背景为红色。改变类名active为newactive,并设置其背景颜色为红色。

4、改变“菜单”下的二级栏目,鼠标放上去的颜色。设置类名为dropdown-menu下的a标签hover属性,设置放上去的颜色为黑色。

5、改变点击“菜单”,弹出二级栏目时的颜色。CSS代码是.navbar-default .navbar-nav>.open>a:focus {color: black;background-color: red;},即设置这个类下面a标签focus属性的颜色。

6、改变导航栏默认文字的颜色。设置类名navbar-default下面a标签的文字颜色为白色,代码是.navbar-default .navbar-nav>li>a {color: #fff;}



以上就是关于bootstrap导航栏颜色是怎么更改的的介绍,本文内容仅供参考,有需要的朋友可以借鉴了解看看,希望对大家学习或工作,想要了解更多欢迎关注群英网络,小编每天都会为大家更新不同的知识。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: bootstrap
相关信息推荐
2022-05-26 17:13:21 
摘要:本文实例为大家分享了angularjs实现多级下拉框的具体代码,供大家参考,具体内容如下<div ng-app="multidropdownapp" ng-controller="multidr
2022-05-16 17:45:28 
摘要:昨天和两个做开发的朋友聊天,对于我还在使用layui感到奇怪,我也没有多解释,毕竟layui对于做一些中小型的开发还是不错的,前端的框架中,熟悉了一个其他的也差之不多。但layui的资料不细致是个很大
2022-05-14 16:12:47 
摘要:给大家带来一篇关于Yii CGridView使用方法的相关教程文章,内容涉及到Yii、CGridView、Yii CGridView用法实例详解等相关内容,更多关于Yii CGridView用法实例详解的内容希望能够帮助到大家。
云活动
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部