![4fcdfbc8a9cef635a760c1af367de96f.png](https://i-blog.csdnimg.cn/blog_migrate/510e622c074d5f2d841af2e8ea312937.jpeg)
当我们用Bootstrap框架来制作网页的时候,有时候会想要改变一些框架样式中单调的颜色,让网页变得与众不同,但是当我们自己link css的时候会不会遇到这样一个问题:明明link了默认的Bootstrap样式,也link了自己写的样式,但是网页并没有按我们想象的做出变化。
html渲染的时候是自上而下的,后面的样式会覆盖前面的样式。所以我们需要把自己的样式在最后引入,这样就可以覆盖bootstrap的默认样式了。
![11780694920fcf99bc6247c44a227fe6.png](https://i-blog.csdnimg.cn/blog_migrate/3869c6393ff3702ee4436f6a43a282e6.jpeg)
Bootstrap框架的默认样式还是比较单调的,但是给人一种大气,简约的感觉,符合大部分人的审美要求。
对于改变导航栏的颜色,我无意间发现了一个很有用的网站,可以根据自己的喜好定制导航栏颜色:https://work.smarchal.com/twbscolor/css/
![3c974276727b1804dd248821b082d9e2.png](https://i-blog.csdnimg.cn/blog_migrate/63dd77703c94bab8e53d4e698f0a3399.jpeg)
记得要看一下自己电脑上的Bootstrap是什么版本,现在大部分应该用的是3.3.7版本,最新的是4.0.0版本。
![556ef233db48c0443a99627637fc664a.png](https://i-blog.csdnimg.cn/blog_migrate/ec0dcc7fc4f7f0176fdba26596f1e3ce.jpeg)
Select your colors部分有四个不同模块分别去选他们对应的颜色,下面的导航栏为效果展示。
![1e7a88c25ddc57b90c9facdca2b5fc40.png](https://i-blog.csdnimg.cn/blog_migrate/e1a482cb07c9b20070d5839eeefe1041.jpeg)
网页最后自动生成了我们选择的颜色的css代码,我们只需要把他复制到css文件中去,就可以巧妙的得到我们想要的导航栏(注意引入css样式的顺序,已经在文章开头提过)
效果图如下: