無法更改引導導航欄的顏色
[英]Not able to change the color of bootstrap navbar
問題描述
我正在引導中創建登錄頁面，所以我添加了固定的導航欄，我想更改導航欄的顏色（我嘗試通過使用background-color和！important屬性來更改導航欄的顏色，但仍然沒有任何更改）解決這個問題
這是我的代碼
<html>
<head>
<title>MyLandingPage</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link rel="stylesheet" href="http://s.mlcdn.co/animate.css">
<style>
*{
margin: 0;
padding: 0;
}
.navbar.navbar-default{
background-color:blue;
height:60px;
}
#bodycontainer{
background-image:url(wood.jpg);
width:100%;
background-size:cover;
}
form{
position:relative;
top:-50px;
}
#myheader h1{
font-size: 60px;
color:white;
font-weight:bold;
text-align:center;
margin-top:250px;
font-family: 'Pacifico', cursive;
}
#txt1{
text-align:center;
color:black;
font-weight:bold;
}
#txt2{
text-align:center;
color:black;
font-weight:bold;
}
#txt3{
text-align:center;
color:black;
font-weight:bold;
}
#txt4{
text-align:center;
color:black;
font-weight:bold;
}
#txt5{
text-align:center;
color:black;
}
.mybutton{
margin-left:250px;
}
.apple{
text-align:center;
width:250px;
}
#txt6{
text-align:center;
color:black;
}
#txt7{
text-align:center;
color:black;
}
#footer{
background-color:#B0D1FB;
width:100%;
}
</style>
</head>
<body>
<div class="container">
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-brand navbar-header">
My@PP
</div>
<div class="collapse navbar-collapse" id="navbar-example">
<ul class="nav nav-pills">
<li class="active"><a href="">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
<form class="navbar-form navbar-right" id="myform">
<input type="email" placeholder="username@abc.com" class="form-control"/>
<input type="password" placeholder="*********" class="form-control"/>
<button type="button" class="btn btn-info">Log-In</button>
</form>
</div>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div class="container bodycontainer" id="bodycontainer">
<div class="row">
<div class="col-md-6 col-md-offset-3" id="myheader">
<h1 class="animated ZoomIn infinite ">MY APPLICATION</h1>
<p class="lead" id="txt1">This Why You Should Download The App</p>
<p id="txt2">For more Information about the app please scroll down the more to access the information you can get the idea about it</p>
<p id="txt3">If u are intrested please join our maling list</p>
<br/> <br/> <br/>
<form class="">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
</form>
<button type="button" class="btn btn-info btn-lg mybutton">Submit</button>
</div>
</div>
</div>
<div class="container bodycontainer">
<div class="row">
<h1 id="txt4">Why this app is Osome...?</h1>
<p id="txt5">Summery of my application</p>
</div>
<div class="row">
<div class="col-md-4">
<h2><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>Header</h2>
Lorem ipsum dolor sit amet, ius case moderatius no, eu posse phaedrum laboramus nec. Modo eius altera in vel, constituam reformidans at sea. Cu laoreet expetenda iracundia cum, vel an persius feugiat forensibus, at altera similique deterruisset has. Nam doctus viderer
cu, aliquid prodesset constituam no eum. An nam veritus oportere, qui tritani sanctus et.Et aeterno adversarium mea, mei dicant consul eu. Eum ut sapientem intellegam consectetuer, cum ut stet esse numquam, erant intellegam disputando te mea. Ei quaeque liberavisse nam.
Ferri nobis suavitate eam at, movet quaestio no has, usu et nibh molestiae posidonium.Usu porro eligendi ea. Ad quo aliquam hendrerit, nam omnis necessitatibus ut. Qui probo propriae delicatissimi et. Id reque aliquam reprehendunt nec, dicunt rationibus at sea, ex vim sint suscipit gloriatur.
Ea graece partiendo sea.<br/>
<button class="btn btn-info btn-lg">Sign-Up</button>
</div>
<div class="row">
<div class="col-md-4">
<h2><span class="glyphicon glyphicon-home" aria-hidden="true"></span>Header</h2>
Lorem ipsum dolor sit amet, ius case moderatius no, eu posse phaedrum laboramus nec. Modo eius altera in vel, constituam reformidans at sea. Cu laoreet expetenda iracundia cum, vel an persius feugiat forensibus, at altera similique deterruisset has. Nam doctus viderer
cu, aliquid prodesset constituam no eum. An nam veritus oportere, qui tritani sanctus et.Et aeterno adversarium mea, mei dicant consul eu. Eum ut sapientem intellegam consectetuer, cum ut stet esse numquam, erant intellegam disputando te mea. Ei quaeque liberavisse nam.
Ferri nobis suavitate eam at, movet quaestio no has, usu et nibh molestiae posidonium.Usu porro eligendi ea. Ad quo aliquam hendrerit, nam omnis necessitatibus ut. Qui probo propriae delicatissimi et. Id reque aliquam reprehendunt nec, dicunt rationibus at sea, ex vim sint suscipit gloriatur.
Ea graece partiendo sea.<br/>
<button class="btn btn-info btn-lg">Sign-Up</button>
</div>
<div class="row">
<div class="col-md-4">
<h2><span class="glyphicon glyphicon-star" aria-hidden="true"></span>Header</h2>
Lorem ipsum dolor sit amet, ius case moderatius no, eu posse phaedrum laboramus nec. Modo eius altera in vel, constituam reformidans at sea. Cu laoreet expetenda iracundia cum, vel an persius feugiat forensibus, at altera similique deterruisset has. Nam doctus viderer
cu, aliquid prodesset constituam no eum. An nam veritus oportere, qui tritani sanctus et.Et aeterno adversarium mea, mei dicant consul eu. Eum ut sapientem intellegam consectetuer, cum ut stet esse numquam, erant intellegam disputando te mea. Ei quaeque liberavisse nam.
Ferri nobis suavitate eam at, movet quaestio no has, usu et nibh molestiae posidonium.Usu porro eligendi ea. Ad quo aliquam hendrerit, nam omnis necessitatibus ut. Qui probo propriae delicatissimi et. Id reque aliquam reprehendunt nec, dicunt rationibus at sea, ex vim sint suscipit gloriatur.
Ea graece partiendo sea.<br/>
<button class="btn btn-info btn-lg">Sign-Up</button>
</div>
</div>
</div>
<div class=" bodycontainer" id="footer">
<div class="">
<h1 id="txt6">Download the App</h1>
<p class="lead" id="txt7">Realy why should i download this?</p>
<p><center><img src="applelogo.jpg" class="apple"></center></p>
</div>
</div>
<script>
$(".bodycontainer").css("min-height",$(window).height());
</script>
</body>
</html>
2 個解決方案
解決方案1
2 已采納 2016-07-10 06:17:36
顯然那里有背景圖片，誰知道呢？
.navbar-default {
background-color:blue;
background-image:none;
height:60px;
}
解決方案2
2 2016-07-10 06:40:37
引導程序主題css中有預定義的背景圖像屬性
background-image: linear-gradient(to bottom,#fff 0,#f8f8f8 100%)
這會阻止您應用背景色。
因此，添加background-image:none; 到.navbar.navbar-default 。
更改導航欄引導程序的文本顏色
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.