Question

我正在使用twitter bootstrap CSS建立一个网站，但我遇到了一个问题。

如果你看向最后，“Bootstrap”有点隐藏;鼠标悬停时它只会亮起（但默认情况下是黑色）。如何在我的网页中为按钮获取此功能？

这是我的导航栏：

<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
           <a href="./home.html" class="brand" color="black"></a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active">
                <a href="#">Home</a>
              </li>
              <li class="">
                <a href="./tutoring.html">Tutoring</a>
              </li>
              <li class="">
                <a href="./competitions.html">Competitions</a>
              </li>
              <li class="">
                <a href="./board.html">Board Members</a>
              </li>
              <li class="">
                <a href="./info.html">Info</a>
              </li>
              <li class="">
                <span class="span5"></span>
              </li>
              <li class="" id="algebrayall">
                <a class="brand pull-right" style="color:black" href="./index.html">It's just algebra, y'all</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
</div>

我希望<a class="brand pull-right" style="color:black" href="./index.html">It's just algebra, y'all</a>部分像他们的Bootstrap按钮一样工作。

Answer 1

它不是Bootstrap.css的一部分。它是twitter文档网站css（docs.css）的一部分。

这是基础brand样式：

body > .navbar .brand {
    padding-right: 0;
    padding-left: 0;
    margin-left: 20px;
    float: right;
    font-weight: bold;
    color: #000;
    text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125);
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    transition: all .2s linear;
}

悬停效果：

body > .navbar .brand:hover {
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.4);
}

.navbar-inverse .brand:hover, .navbar-inverse .nav > li > a:hover, .navbar-inverse .brand:focus, .navbar-inverse .nav > li > a:focus {
    color: #ffffff;
}

可能会有更多样式构成完整效果，但这应该让你开始。

Answer 2

问题是您使用内联样式覆盖品牌的文本颜色，该样式会覆盖引导样式

不使用内联样式来更改品牌的颜色，而是使用类

.navbar-inverse.navbar .brand {
    color: black;
}

演示：Fiddle

重要
但我认为正确的解决方案是通过将@navbarBrandColor属性更改为您想要的而不是手动覆盖css文件中的样式来创建custom version of bootstrap

如何使用twitter bootstrap使按钮亮起

2 个答案: