为什么导航栏自定义样式不应用引导程序
[英]Why does the navbar-custom styles not apply bootstrap
问题描述
好吧我正在尝试使用自定义css文件自定义基本引导程序导航栏，该文件包含在引导程序cdn之后的html文件中。 其他应用的样式工作得很好，但我无法弄清楚为什么导航栏背景颜色没有改变。 这是我的代码。 提前致谢。
.navbar-custom{ background-color: #0e3572; } .jumbotron{ background-color: #15438e; text-align: center; } .jumbotron p{ color:white; font-family: "Bookman Old Style"; } .jumbotron h2{ color:white; font-family: "Bookman Old Style"; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta lang="en"> <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>PixelCoward Studios</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- custom css --> <link rel="stylesheet" type="text/css" href="main.css"> <!-- JQuery --> <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script> <!-- JQuery UI --> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </head> <body> <header> <nav class = "navbar navbar-default navbar-custom navbar-fixed-top" role = "navigation"> <div class="container-fluid"> <div class = "navbar-header"> <button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = "#example-navbar-collapse"> <span class = "sr-only">Toggle navigation</span> <span class = "icon-bar"></span> <span class = "icon-bar"></span> <span class = "icon-bar"></span> </button> <a class = "navbar-brand" href = "#">PixelCoward Studios</a> </div> <div class = "collapse navbar-collapse" id = "example-navbar-collapse"> <ul class = "nav navbar-nav navbar-right"> <li class = "active"><a href = "#">About Us</a></li> <li><a href = "#">Our Work</a></li> <li class = "dropdown"> <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"> Contact <b class = "caret"></b> </a> <ul class = "dropdown-menu"> <li><a href = "#">Team</a></li> <li><a href = "#">Credits</a></li> <li class = "divider"></li> <li><a href = "#">Email Us</a></li> </ul> </li> </ul> </div> </div> </nav> </header> <section> <div class="jumbotron"> <h2>Hello there!</h2> <p>We are an IT company specialized in developing mobile apps and websites</p> </div> </section> </body> </html>
1 个解决方案
解决方案1
0 2017-03-07 18:16:00
将所有自定义css添加到页面并将其命名为custom.css现在在标题中的Bootstrap css行下添加一个这样的新行
**<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles -->
<link href="css/custom.css" rel="stylesheet">**
在div上应用Bootstrap和Flat UI或复制所有样式以在导航栏上使用
[英]Apply Bootstrap & Flat UI on a div or copy all styles to use on the navbar
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.