bootstrap是一个前端开辟经常利用的HTML/CSS框架 ， 可以快捷的做出各类结果 ， 如弹窗、按钮、导航栏等 。 下面介绍bootstrap若何更改导航栏颜色 。
下图是代码运行的结果 ， 将以此导航为例 ， 讲解更改导航栏的颜色 。
文章插图
方式/
1bootstrap做的导航栏HTML页必需加载bootstrap.min.css、bootstrap.min.js才能实现导航的结果 。 下图是完整的代码及结果图 。
文章插图
文章插图
2【bootstrap如何更改导航栏颜色】改变导航布景颜色 ， 设置为黑色 。 给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如何更改导航栏颜色的内容啦 ， 希望对你有所帮助哦！
推荐阅读
- 163邮箱如何添加白名单邮箱账号
- 淘宝上如何找货源
- 肌肤防衰老 常喝糙米茶
- 冬季穿衣温度和时髦如何平衡？教科书级的穿搭小思路，优雅显气质
- 惠普笔记本bios如何设置一键u盘启动
- AE如何加快渲染视频的速度
- 双系统苹果电脑如何删除Windows系统
- 电脑上3D眼镜如何观看3D电影
- 女性手游市场潜力如何
- 魔兽世界7.0如何快速升1