2013-06-28 41 views
1

我正在建立一個使用twitter引導CSS的網站,但我遇到了問題。如何讓按鈕點亮與推動引導懸停

nav bar example

如果接近年底看,「引導」是那種隱藏;它只在你將鼠標懸停時點亮(但默認情況下爲黑色)。我如何在我的網頁中獲得按鈕的功能?

這裏是我的導航欄:

<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>一部分,就像他們的引導按鈕的工作。

+0

沒有這樣的屬性'color =「black」' –

回答

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; 
} 

可能有一些更多的造型,構成了完整的效果,但應該讓你開始。

0

的問題是你使用它覆蓋引導風格

而不是使用內嵌樣式改變的品牌顏色的內嵌樣式覆蓋的品牌文字顏色,使用類

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

演示:Fiddle

重要
但我認爲正確的解決方案將是建立一個custom version of bootstrap通過更改@navbarBrandColor財產,以任何你想要的,而不是手動覆蓋你的CSS文件中的樣式

+0

這與SimonC上面發佈的內容大致相同認爲它會完成同樣的操作,除了拉右 - 我想我可以添加class =「pull-right」來解決這個問題)。謝謝! – royhowie