0

TwitterBootstrapを使用して作成されたナビゲーションバーがあります。

<div class="navbar-inner navlinks">
    <ul class="nav">
        <li><a class="brand" href="#"><img src="img/logo.png" /></a></li>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Ouvrez</a></li>
        <li><a href="#">Decouvrir</a></li>
    </ul>
</div>

navlinkクラスの属性を変更することで、フォントの色やパディングなどを簡単に上書きできます。ただし、このようなナビゲーションバーリスト内のリンクには、TwitterBootstrapのデフォルトで大量のテキストシャドウイング/グラデーション属性があります。これらをオーバーライドして各属性をデフォルトレベルに設定する唯一の方法ですか、それともCSSに「通常の」設定を一挙に復元できるものがありますか？

4

2 に答える 2

5

あなたは次の方法でそれを行うことができます：

を作成しnew css file、bootstrap.cssファイルの後に配置して、使用したくないデフォルトのプロパティを上書きできるようにします。以下の例のように：-

   <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
   <link href="/css/style.css" rel="stylesheet">

ここで、またはとを削除するbackground box-shadowにborder propertyはborder-radius、ナビゲーションバーで次の操作を実行できます。

.navbar-inner{
 background:none;
 filter:none;
 box-shadow:none;
 border-radius:0px;
 border:none;
}

をカスタマイズするnavbar linksには、次のようにします（ここに値を設定するか、ここに新しいプロパティを設定すると、デフォルトが上書きされます）：

.navbar .nav > li > a{

    padding:5px;
text-shadow:none;
  }

カスタマイズhoverしてfocusスタイルを設定するには：

.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
     color: #333333;
     text-decoration: none;
     background-color: transparent;
 }

activeリンクのクラスをカスタマイズするには：

.navbar .nav .active > a{
color:#ccc;
background:none;
box-shadow:none;
   }

 .navbar .nav .active > a:hover{
background:none;
box-shadow:none;
   }
于 2013-02-23T03:42:11.280 に答える
1

これについてのビデオがあり（私は数日前にBootstrapについて知りました）、提供されたcssを変更せず、代わりに独自のスタイルシートのcssをオーバーライドすることを説明しました。彼らはまた、オーバーライドが機能するためにブートストラップスタイルシートが呼び出された後にこのスタイルシートが必要であると述べました。もちろん、オーバーライドで同じ名前を呼び出すことになります。ビデオはPluralsightにありました。

PS私は「再生中」の段階にあるため、メインのcssでnavbarのcssを変更することになりました。また、ブートストラップには、ページ全体の画像に適用される独自のcssがあるため、注意が必要です。

于 2013-02-22T16:28:20.547 に答える