我的博客一直用的Bootstap默认的灰色来作为背景色。
当我想改成别的色彩,又不破坏bootstap原来的机制,我只好做个样式类 navbar-custom
修改之前
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<nav class="navbar navbar-expand-lg navbar-custom">
navbar-custom 在我自定义的css里的代码
.navbar-custom { background-color: green; } /* 自定义brand和文字颜色 */ .navbar-custom .navbar-brand, .navbar-custom .navbar-text { color: rgba(255,255,255,.8); } /* 自定义链接颜色 */ .navbar-custom .navbar-nav .nav-link { color: rgba(255,255,255,.5); } /* 自定义激活或者悬停的链接颜色 */ .navbar-custom .nav-item.active .nav-link, .navbar-custom .nav-item:hover .nav-link { color: #ffffff; } /* 自定义折叠按钮 */ .navbar-custom .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } /* 下拉菜单的样式 */ .navbar-custom .dropdown-menu{ background-color:#D6F5D6; }