Bootsrap模板中的导航栏颜色

时间：2015-10-09 20:31:32

标签： html css twitter-bootstrap navbar

我刚刚从startbootstrap.com下载了一个模板，我在CSS中查找导航栏属性时遇到了麻烦，当您查看页面部分时，该属性会改变颜色。以下是从网站下载的CSS代码：

/*!
 * Start Bootstrap - Freelancer Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    overflow-x: hidden;
}

p {
    font-size: 20px;
}

p.small {
    font-size: 16px;
}

a,
a:hover,
a:focus,
a:active,
a.active {
    outline: 0;
    color: #18bc9c;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
}

hr.star-light,
hr.star-primary {
    margin: 25px auto 30px;
    padding: 0;
    max-width: 250px;
    border: 0;
    border-top: solid 5px;
    text-align: center;
}

hr.star-light:after,
hr.star-primary:after {
    content: "\f005";
    display: inline-block;
    position: relative;
    top: -.8em;
    padding: 0 .25em;
    font-family: FontAwesome;
    font-size: 2em;
}

hr.star-light {
    border-color: #fff;
}

hr.star-light:after {
    color: #fff;
    background-color: #18bc9c;
}

hr.star-primary {
    border-color: #2c3e50;
}

hr.star-primary:after {
    color: #2c3e50;
    background-color: #fff;
}

.img-centered {
    margin: 0 auto;
}

header {
    text-align: center;
    color: #fff;
    background: #18bc9c;
}

header .container {
    padding-top: 100px;
    padding-bottom: 50px;
}

header img {
    display: block;
    margin: 0 auto 20px;
}

header .intro-text .name {
    display: block;
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 2em;
    font-weight: 700;
}

header .intro-text .skills {
    font-size: 1.25em;
    font-weight: 300;
}

@media(min-width:768px) {
    header .container {
        padding-top: 200px;
        padding-bottom: 100px;
    }

    header .intro-text .name {
        font-size: 4.75em;
    }

    header .intro-text .skills {
        font-size: 1.75em;
    }
}

@media(min-width:768px) {
    .navbar-fixed-top {
        padding: 25px 0;
        -webkit-transition: padding .3s;
        -moz-transition: padding .3s;
        transition: padding .3s;
    }

    .navbar-fixed-top .navbar-brand {
        font-size: 2em;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        transition: all .3s;
    }

    .navbar-fixed-top.navbar-shrink {
        padding: 10px 0;
    }

    .navbar-fixed-top.navbar-shrink .navbar-brand {
        font-size: 1.5em;
    }
}

.navbar {
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
}

.navbar a:focus {
    outline: 0;
}

.navbar .navbar-nav {
    letter-spacing: 1px;
}

.navbar .navbar-nav li a:focus {
    outline: 0;
}

.navbar-default,
.navbar-inverse {
    border: 0;
}

section {
    padding: 100px 0;
}

section h2 {
    margin: 0;
    font-size: 3em;
}

section.success {
    color: #fff;
    background: #18bc9c;
}

section.success a,
section.success a:hover,
section.success a:focus,
section.success a:active,
section.success a.active {
    outline: 0;
    color: #2c3e50;
}

@media(max-width:767px) {
    section {
        padding: 75px 0;
    }

    section.first {
        padding-top: 75px;
    }
}

#portfolio .portfolio-item {
    right: 0;
    margin: 0 0 15px;
}

#portfolio .portfolio-item .portfolio-link {
    display: block;
    position: relative;
    margin: 0 auto;
    max-width: 400px;
}

#portfolio .portfolio-item .portfolio-link .caption {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: rgba(24,188,156,.9);
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    transition: all ease .5s;
}

#portfolio .portfolio-item .portfolio-link .caption:hover {
    opacity: 1;
}

#portfolio .portfolio-item .portfolio-link .caption .caption-content {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 20px;
    margin-top: -12px;
    text-align: center;
    font-size: 20px;
    color: #fff;
}

#portfolio .portfolio-item .portfolio-link .caption .caption-content i {
    margin-top: -12px;
}

#portfolio .portfolio-item .portfolio-link .caption .caption-content h3,
#portfolio .portfolio-item .portfolio-link .caption .caption-content h4 {
    margin: 0;
}

#portfolio * {
    z-index: 2;
}

@media(min-width:767px) {
    #portfolio .portfolio-item {
        margin: 0 0 30px;
    }
}

.btn-outline {
    margin-top: 15px;
    border: solid 2px #fff;
    font-size: 20px;
    color: #fff;
    background: 0 0;
    transition: all .3s ease-in-out;
}

.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active,
.btn-outline.active {
    border: solid 2px #fff;
    color: #18bc9c;
    background: #fff;
}

.floating-label-form-group {
    position: relative;
    margin-bottom: 0;
    padding-bottom: .5em;
    border-bottom: 1px solid #eee;
}

.floating-label-form-group input,
.floating-label-form-group textarea {
    z-index: 1;
    position: relative;
    padding-right: 0;
    padding-left: 0;
    border: 0;
    border-radius: 0;
    font-size: 1.5em;
    background: 0 0;
    box-shadow: none!important;
    resize: none;
}

.floating-label-form-group label {
    display: block;
    z-index: 0;
    position: relative;
    top: 2em;
    margin: 0;
    font-size: .85em;
    line-height: 1.764705882em;
    vertical-align: middle;
    vertical-align: baseline;
    opacity: 0;
    -webkit-transition: top .3s ease,opacity .3s ease;
    -moz-transition: top .3s ease,opacity .3s ease;
    -ms-transition: top .3s ease,opacity .3s ease;
    transition: top .3s ease,opacity .3s ease;
}

.floating-label-form-group::not(:first-child) {
    padding-left: 14px;
    border-left: 1px solid #eee;
}

.floating-label-form-group-with-value label {
    top: 0;
    opacity: 1;
}

.floating-label-form-group-with-focus label {
    color: #18bc9c;
}

form .row:first-child .floating-label-form-group {
    border-top: 1px solid #eee;
}

footer {
    color: #fff;
}

footer h3 {
    margin-bottom: 30px;
}

footer .footer-above {
    padding-top: 50px;
    background-color: #2c3e50;
}

footer .footer-col {
    margin-bottom: 50px;
}

footer .footer-below {
    padding: 25px 0;
    background-color: #233140;
}

.btn-social {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 2px solid #fff;
    border-radius: 100%;
    text-align: center;
    font-size: 20px;
    line-height: 45px;
}

.btn:focus,
.btn:active,
.btn.active {
    outline: 0;
}

.scroll-top {
    z-index: 1049;
    position: fixed;
    right: 2%;
    bottom: 2%;
    width: 50px;
    height: 50px;
}

.scroll-top .btn {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    font-size: 20px;
    line-height: 28px;
}

.scroll-top .btn:focus {
    outline: 0;
}

.portfolio-modal .modal-content {
    padding: 100px 0;
    min-height: 100%;
    border: 0;
    border-radius: 0;
    text-align: center;
    background-clip: border-box;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.portfolio-modal .modal-content h2 {
    margin: 0;
    font-size: 3em;
}

.portfolio-modal .modal-content img {
    margin-bottom: 30px;
}

.portfolio-modal .modal-content .item-details {
    margin: 30px 0;
}

.portfolio-modal .close-modal {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 75px;
    height: 75px;
    background-color: transparent;
    cursor: pointer;
}

.portfolio-modal .close-modal:hover {
    opacity: .3;
}

.portfolio-modal .close-modal .lr {
    z-index: 1051;
    width: 1px;
    height: 75px;
    margin-left: 35px;
    background-color: #2c3e50;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.portfolio-modal .close-modal .lr .rl {
    z-index: 1052;
    width: 1px;
    height: 75px;
    background-color: #2c3e50;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.portfolio-modal .modal-backdrop {
    display: none;
    opacity: 0;
}

Here您可以找到我刚刚下载的模板的实时预览。

我搜索了代码的每一部分，但我找不到会改变这种颜色的部分。如果有人能帮助我，我会非常感激！

谢谢！

6 个答案:

答案 0 :(得分：0)

希望这会有所帮助：我从另一个线程中取出它。 

    .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #000;  /*Sets the text hover color on navbar*/
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >   
 a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: white; /*BACKGROUND color for active*/
background-color: #030033;
}

  .navbar-default {
    background-color: #0f006f;
    border-color: #030033;
}

  .dropdown-menu > li > a:hover,
   .dropdown-menu > li > a:focus {
    color: #262626;
   text-decoration: none;
  background-color: #66CCFF;  /*change color of links in drop down here*/
   }

 .nav > li > a:hover,
 .nav > li > a:focus {
    text-decoration: none;
    background-color: silver; /*Change rollover cell color here*/
  }


  .navbar-default .navbar-nav > li > a {
   color: white; /*Change active text color here*/
    }

答案 1 :(得分：0)

.navbar-default是整个导航栏本身的类，如果您希望活动按钮的颜色与.page-scroll.active类不同

答案 2 :(得分：0)

您需要将这些添加到freelancer.css滚动时查看示例或将活动类添加到nav li。

.navbar.navbar-default .navbar-nav > li > a:active {
  background-color: #8AC007;
  color: #ffffff;
}
.navbar.navbar-default .navbar-nav > .active,
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus {
  background-color: #f00;
  color: #FFF;
}


/*!
 * Start Bootstrap - Freelancer Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
  $('body').on('click', '.page-scroll a', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({
      scrollTop: $($anchor.attr('href')).offset().top
    }, 1500, 'easeInOutExpo');
    event.preventDefault();
  });
});

// Floating label headings for the contact form
$(function() {
  $("body").on("input propertychange", ".floating-label-form-group", function(e) {
    $(this).toggleClass("floating-label-form-group-with-value", !!$(e.target).val());
  }).on("focus", ".floating-label-form-group", function() {
    $(this).addClass("floating-label-form-group-with-focus");
  }).on("blur", ".floating-label-form-group", function() {
    $(this).removeClass("floating-label-form-group-with-focus");
  });
});

// Highlight the top nav as scrolling occurs
$('body').scrollspy({
  target: '.navbar-fixed-top'
})

// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
  $('.navbar-toggle:visible').click();
});
@media(min-width:768px) {
  .navbar-fixed-top {
    padding: 25px 0;
    -webkit-transition: padding .3s;
    -moz-transition: padding .3s;
    transition: padding .3s;
  }
  .navbar-fixed-top .navbar-brand {
    font-size: 2em;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
  }
  .navbar-fixed-top.navbar-shrink {
    padding: 10px 0;
  }
  .navbar-fixed-top.navbar-shrink .navbar-brand {
    font-size: 1.5em;
  }
}
.navbar {
  text-transform: uppercase;
  font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
}
.navbar a:focus {
  outline: 0;
}
.navbar .navbar-nav {
  letter-spacing: 1px;
}
.navbar .navbar-nav li a:focus {
  outline: 0;
}
.navbar-default,
.navbar-inverse {
  border: 0;
}
/***Link Background and Color Active State***/

.navbar.navbar-default .navbar-nav > li > a:active {
  background-color: #8AC007;
  color: #ffffff;
}
.navbar.navbar-default .navbar-nav > .active,
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus {
  background-color: #f00;
  color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://ironsummitmedia.github.io/startbootstrap-freelancer/css/bootstrap.min.css" rel="stylesheet" />

<body id="page-top" class="index">
  <!-- Navigation -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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="#page-top">Start Bootstrap</a>

      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li class="hidden">
            <a href="#page-top"></a>

          </li>
          <li class="active"> <a href="#portfolio">Portfolio</a>

          </li>
          <li class="page-scroll"> <a href="#about">About</a>

          </li>
          <li class="page-scroll"> <a href="#contact">Contact</a>

          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>
  <!-- Header -->
  <header>
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <img class="img-responsive" src="img/profile.png" alt="">
          <div class="intro-text"> <span class="name">Start Bootstrap</span>

            <hr class="star-light"> <span class="skills">Web Developer - Graphic Artist - User Experience Designer</span>

          </div>
        </div>
      </div>
    </div>
  </header>
  <!-- Portfolio Grid Section -->
  <section id="portfolio">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h2>Portfolio</h2>

          <hr class="star-primary">
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4 portfolio-item">
          <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
            <div class="caption">
              <div class="caption-content">
                <i class="fa fa-search-plus fa-3x"></i>
              </div>
            </div>
            <img src="img/portfolio/cabin.png" class="img-responsive" alt="">
          </a>

        </div>
        <div class="col-sm-4 portfolio-item">
          <a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
            <div class="caption">
              <div class="caption-content">
                <i class="fa fa-search-plus fa-3x"></i>
              </div>
            </div>
            <img src="img/portfolio/cake.png" class="img-responsive" alt="">
          </a>

        </div>
        <div class="col-sm-4 portfolio-item">
          <a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
            <div class="caption">
              <div class="caption-content">
                <i class="fa fa-search-plus fa-3x"></i>
              </div>
            </div>
            <img src="img/portfolio/circus.png" class="img-responsive" alt="">
          </a>

        </div>
        <div class="col-sm-4 portfolio-item">
          <a href="#portfolioModal4" class="portfolio-link" data-toggle="modal">
            <div class="caption">
              <div class="caption-content">
                <i class="fa fa-search-plus fa-3x"></i>
              </div>
            </div>
            <img src="img/portfolio/game.png" class="img-responsive" alt="">
          </a>

        </div>
        <div class="col-sm-4 portfolio-item">
          <a href="#portfolioModal5" class="portfolio-link" data-toggle="modal">
            <div class="caption">
              <div class="caption-content">
                <i class="fa fa-search-plus fa-3x"></i>
              </div>
            </div>
            <img src="img/portfolio/safe.png" class="img-responsive" alt="">
          </a>

        </div>
        <div class="col-sm-4 portfolio-item">
          <a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
            <div class="caption">
              <div class="caption-content">
                <i class="fa fa-search-plus fa-3x"></i>
              </div>
            </div>
            <img src="img/portfolio/submarine.png" class="img-responsive" alt="">
          </a>

        </div>
      </div>
    </div>
  </section>
  <!-- About Section -->
  <section class="success" id="about">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h2>About</h2>

          <hr class="star-light">
        </div>
      </div>
      <div class="row">
        <div class="col-lg-4 col-lg-offset-2">
          <p>Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional LESS stylesheets for easy customization.</p>
        </div>
        <div class="col-lg-4">
          <p>Whether you're a student looking to showcase your work, a professional looking to attract clients, or a graphic artist looking to share your projects, this template is the perfect starting point!</p>
        </div>
        <div class="col-lg-8 col-lg-offset-2 text-center">
          <a href="#" class="btn btn-lg btn-outline">
            <i class="fa fa-download"></i> Download Theme
          </a>

        </div>
      </div>
    </div>
  </section>
  <!-- Contact Section -->
  <section id="contact">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h2>Contact Me</h2>

          <hr class="star-primary">
        </div>
      </div>
      <div class="row">
        <div class="col-lg-8 col-lg-offset-2">
          <!-- To configure the contact form email address, go to mail/contact_me.php and update the email address in the PHP file on line 19. -->
          <!-- The form should work on most web servers, but if the form is not working you may need to configure your web server differently. -->
          <form name="sentMessage" id="contactForm" novalidate>
            <div class="row control-group">
              <div class="form-group col-xs-12 floating-label-form-group controls">
                <label>Name</label>
                <input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
                <p class="help-block text-danger"></p>
              </div>
            </div>
            <div class="row control-group">
              <div class="form-group col-xs-12 floating-label-form-group controls">
                <label>Email Address</label>
                <input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
                <p class="help-block text-danger"></p>
              </div>
            </div>
            <div class="row control-group">
              <div class="form-group col-xs-12 floating-label-form-group controls">
                <label>Phone Number</label>
                <input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
                <p class="help-block text-danger"></p>
              </div>
            </div>
            <div class="row control-group">
              <div class="form-group col-xs-12 floating-label-form-group controls">
                <label>Message</label>
                <textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
                <p class="help-block text-danger"></p>
              </div>
            </div>
            <br>
            <div id="success"></div>
            <div class="row">
              <div class="form-group col-xs-12">
                <button type="submit" class="btn btn-success btn-lg">Send</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>
  <!-- Footer -->
  <footer class="text-center">
    <div class="footer-above">
      <div class="container">
        <div class="row">
          <div class="footer-col col-md-4">
            <h3>Location</h3>

            <p>3481 Melrose Place
              <br>Beverly Hills, CA 90210</p>
          </div>
          <div class="footer-col col-md-4">
            <h3>Around the Web</h3>

            <ul class="list-inline">
              <li> <a href="#" class="btn-social btn-outline"><i class="fa fa-fw fa-facebook"></i></a>

              </li>
              <li> <a href="#" class="btn-social btn-outline"><i class="fa fa-fw fa-google-plus"></i></a>

              </li>
              <li> <a href="#" class="btn-social btn-outline"><i class="fa fa-fw fa-twitter"></i></a>

              </li>
              <li> <a href="#" class="btn-social btn-outline"><i class="fa fa-fw fa-linkedin"></i></a>

              </li>
              <li> <a href="#" class="btn-social btn-outline"><i class="fa fa-fw fa-dribbble"></i></a>

              </li>
            </ul>
          </div>
          <div class="footer-col col-md-4">
            <h3>About Freelancer</h3>

            <p>Freelance is a free to use, open source Bootstrap theme created by <a href="http://startbootstrap.com">Start Bootstrap</a>.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="footer-below">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">Copyright &copy; Your Website 2014</div>
        </div>
      </div>
    </div>
  </footer>
  <!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
  <div class="scroll-top page-scroll visible-xs visible-sm">
    <a class="btn btn-primary" href="#page-top">
      <i class="fa fa-chevron-up"></i>
    </a>

  </div>
  <!-- Portfolio Modals -->
  <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
      <div class="close-modal" data-dismiss="modal">
        <div class="lr">
          <div class="rl"></div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-lg-8 col-lg-offset-2">
            <div class="modal-body">
              <h2>Project Title</h2>

              <hr class="star-primary">
              <img src="img/portfolio/cabin.png" class="img-responsive img-centered" alt="">
              <p>Use this area of the page to describe your project. The icon above is part of a free icon set by <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase
                the entire set with 146 icons for only $12!</p>
              <ul class="list-inline item-details">
                <li>Client: <strong><a href="http://startbootstrap.com">Start Bootstrap</a>
                                    </strong>

                </li>
                <li>Date: <strong><a href="http://startbootstrap.com">April 2014</a>
                                    </strong>

                </li>
                <li>Service: <strong><a href="http://startbootstrap.com">Web Development</a>
                                    </strong>

                </li>
              </ul>
              <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
      <div class="close-modal" data-dismiss="modal">
        <div class="lr">
          <div class="rl"></div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-lg-8 col-lg-offset-2">
            <div class="modal-body">
              <h2>Project Title</h2>

              <hr class="star-primary">
              <img src="img/portfolio/cake.png" class="img-responsive img-centered" alt="">
              <p>Use this area of the page to describe your project. The icon above is part of a free icon set by <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase
                the entire set with 146 icons for only $12!</p>
              <ul class="list-inline item-details">
                <li>Client: <strong><a href="http://startbootstrap.com">Start Bootstrap</a>
                                    </strong>

                </li>
                <li>Date: <strong><a href="http://startbootstrap.com">April 2014</a>
                                    </strong>

                </li>
                <li>Service: <strong><a href="http://startbootstrap.com">Web Development</a>
                                    </strong>

                </li>
              </ul>
              <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
      <div class="close-modal" data-dismiss="modal">
        <div class="lr">
          <div class="rl"></div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-lg-8 col-lg-offset-2">
            <div class="modal-body">
              <h2>Project Title</h2>

              <hr class="star-primary">
              <img src="img/portfolio/circus.png" class="img-responsive img-centered" alt="">
              <p>Use this area of the page to describe your project. The icon above is part of a free icon set by <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase
                the entire set with 146 icons for only $12!</p>
              <ul class="list-inline item-details">
                <li>Client: <strong><a href="http://startbootstrap.com">Start Bootstrap</a>
                                    </strong>

                </li>
                <li>Date: <strong><a href="http://startbootstrap.com">April 2014</a>
                                    </strong>

                </li>
                <li>Service: <strong><a href="http://startbootstrap.com">Web Development</a>
                                    </strong>

                </li>
              </ul>
              <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
      <div class="close-modal" data-dismiss="modal">
        <div class="lr">
          <div class="rl"></div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-lg-8 col-lg-offset-2">
            <div class="modal-body">
              <h2>Project Title</h2>

              <hr class="star-primary">
              <img src="img/portfolio/game.png" class="img-responsive img-centered" alt="">
              <p>Use this area of the page to describe your project. The icon above is part of a free icon set by <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase
                the entire set with 146 icons for only $12!</p>
              <ul class="list-inline item-details">
                <li>Client: <strong><a href="http://startbootstrap.com">Start Bootstrap</a>
                                    </strong>

                </li>
                <li>Date: <strong><a href="http://startbootstrap.com">April 2014</a>
                                    </strong>

                </li>
                <li>Service: <strong><a href="http://startbootstrap.com">Web Development</a>
                                    </strong>

                </li>
              </ul>
              <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
      <div class="close-modal" data-dismiss="modal">
        <div class="lr">
          <div class="rl"></div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-lg-8 col-lg-offset-2">
            <div class="modal-body">
              <h2>Project Title</h2>

              <hr class="star-primary">
              <img src="img/portfolio/safe.png" class="img-responsive img-centered" alt="">
              <p>Use this area of the page to describe your project. The icon above is part of a free icon set by <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase
                the entire set with 146 icons for only $12!</p>
              <ul class="list-inline item-details">
                <li>Client: <strong><a href="http://startbootstrap.com">Start Bootstrap</a>
                                    </strong>

                </li>
                <li>Date: <strong><a href="http://startbootstrap.com">April 2014</a>
                                    </strong>

                </li>
                <li>Service: <strong><a href="http://startbootstrap.com">Web Development</a>
                                    </strong>

                </li>
              </ul>
              <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
      <div class="close-modal" data-dismiss="modal">
        <div class="lr">
          <div class="rl"></div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-lg-8 col-lg-offset-2">
            <div class="modal-body">
              <h2>Project Title</h2>

              <hr class="star-primary">
              <img src="img/portfolio/submarine.png" class="img-responsive img-centered" alt="">
              <p>Use this area of the page to describe your project. The icon above is part of a free icon set by <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase
                the entire set with 146 icons for only $12!</p>
              <ul class="list-inline item-details">
                <li>Client: <strong><a href="http://startbootstrap.com">Start Bootstrap</a>
                                    </strong>

                </li>
                <li>Date: <strong><a href="http://startbootstrap.com">April 2014</a>
                                    </strong>

                </li>
                <li>Service: <strong><a href="http://startbootstrap.com">Web Development</a>
                                    </strong>

                </li>
              </ul>
              <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

答案 3 :(得分：0)

试试这个

.navbar-default {
background-color: green; //Change color of nav background
border-color: transparent;
}

.navbar-default .navbar-nav > li > a {
color: black; //Change color of nav links
}

编辑：我认为这是一个

.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
background-color: red; //Change color around link
color: #ffffff;
}

答案 4 :(得分：0)

下一条规则负责导航栏中的活动链接（基于您的实时预览）：

.navbar-default .navbar-nav>.active>a, 
.navbar-default .navbar-nav>.active>a:hover, 
.navbar-default .navbar-nav>.active>a:focus{
    color: #ffffff;
    background-color: #1a242f;
}

为了检查您的css，但是没有通过随机更改找到所需的规则，请使用浏览器页面检查器（现在几乎总是内置）。

答案 5 :(得分：0)

  1. navbar-default是整个导航栏的类

  2. 如果您希望活动按钮的颜色与.page-scroll.active类不同

    .navbar-default .navbar-nav＆gt; .active＆gt; a，.navbar-default .navbar-nav＆gt; .active＆gt;
     a：悬停，.navbar-default .navbar-nav＆gt; .active＆gt; a：焦点{ 白颜色; / 活动的背景颜色 / background-color：＃030033; }

    .navbar-default {     background-color：＃0f006f;     border-color：＃030033; }

    .dropdown-menu＆gt; li>答：悬停，    .dropdown-menu＆gt; li> a：焦点{     颜色：＃262626;    text-decoration：none;   background-color：＃66CCFF; / 更改此处下拉链接的颜色 /    }

    .nav＆gt; li>答：悬停，  .nav＆gt; li> a：焦点{     text-decoration：none;     背景色：银色; / 在此处更改翻转单元格颜色 /   }

相关问题
最新问题