twitter-bootstrap – Bootstrap 4折叠导航栏背景颜色
发布时间:2020-12-17 21:30:06 所属栏目:安全 来源:网络整理
导读:我想在bootstrap 4 alpha v6中更改折叠导航栏的背景颜色.当然我想改变整个导航栏的背景颜色. 所以问题是任何负责导航栏崩溃的类?到目前为止,我发现的唯一div是#navbarSupportedContent,但它只是导航栏中ul的内容(所以它不会改变整个导航栏的颜色).我可以检
我想在bootstrap 4 alpha v6中更改折叠导航栏的背景颜色.当然我想改变整个导航栏的背景颜色.
所以问题是任何负责导航栏崩溃的类?到目前为止,我发现的唯一div是#navbarSupportedContent,但它只是导航栏中ul的内容(所以它不会改变整个导航栏的颜色).我可以检查jquery如果导航栏折叠然后更改背景颜色,但我想知道我是否可以在css中完成它. 除此之外,我想说导航栏的默认颜色是透明的,这就是为什么我想在折叠时改变它的颜色. 我还有下一个问题是什么是BS4中负责导航栏切换器图标的类?我问,因为我想改变图标的??颜色.我已经找到并尝试了以下内容: .navbar-toggler-icon { color:white !important; } 解决方法
也适用于v4.
这是一个Bootstrap 4 alpha6 CSS演练,涵盖.navbar本身,内部链接和汉堡按钮的修改(所有避免!重要,应该只用作最后的覆盖度假村): /* change navbar background */ nav.navbar { background: transparent; } /* change navbar-brand color */ .navbar a.navbar-brand { color: white; } /* change navbar-brand color on hover */ .navbar a.navbar-brand:hover { color: green; } /* change navbar li colors,also active one but not disabled one */ .navbar ul.navbar-nav li.nav-item a.nav-link { color: white; } /* change navbar-toggler inside lines color (stroke) */ .navbar-light span.navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='yellow' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); color: white; } /* change hamburger button border color */ button.navbar-toggler.navbar-toggler-right { border-color: yellow; } /* change navbar background on collapse */ @media (max-width: 768px) { nav.navbar { background: lightgray; } } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <nav class="navbar navbar-toggleable-md navbar-light"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> <ul class="navbar-nav mr-auto mt-2 mt-md-0"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |