个人中心
gpt4 book ai didi

html - 无法更改引导导航栏的颜色

转载 作者：太空宇宙 更新时间：2023-11-03 21:20:04 25 4
gpt4 key购买 nike

我正在 Bootstrap 中创建一个登陆页面，所以我添加了固定导航栏我想更改导航栏的颜色(我试图通过使用背景颜色和 !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>

最佳答案

显然那里有背景图片，谁知道呢？

.navbar-default {
  background-color:blue;
  background-image:none;
  height:60px;
}

关于html - 无法更改引导导航栏的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38289146/

25 4 0
文章推荐： python - 如何解决读取虹膜数据时出现超时错误？
文章推荐： c# - 如何将数据表分组为单行数据
文章推荐： c# - Google Oauth 2.0 redirect_uri_mismatch - 端口在回调时更改
文章推荐： python - OpenCV Python 示例错误