1

我正在使用 twitter 引导 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 按钮一样工作。

4

2 回答 2

2

它不是 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;
}

可能会有更多样式构成完整效果，但这应该可以帮助您入门。

于 2013-06-28T02:58:58.553 回答
0

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

不要使用内联样式来改变品牌的颜色，而是使用一个类

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

演示：小提琴

重要但我认为正确的解决方案是通过将属性更改为您想要的内容
来创建自定义版本的引导程序，而不是手动覆盖您的 css 文件中的样式@navbarBrandColor

于 2013-06-28T03:01:42.583 回答