5

アプリで basecamp navbar のような効果を再現しようとしています。

取り決めは、ナビゲーションバーがボディの背景色と同じ色になり、境界線などがないことで、「すべて同じものだ」と感じました....

これを行う良い方法を知っている人はいますか？PS:.lessファイルを使用しているので、変数を簡単に編集できます。

前もって感謝します

編集:言うのを忘れましたが、ブートストラップの固定トップと応答性の動作も必要です..アプリで既に tw ブートストラップを使用しているので、本当に使用したいと思います。

4

4 に答える 4

12

ええと、これは純粋な CSS で簡単に実行できます。これには Bootstrap も、その CSS クラスも必要ありません。

HTML:

    <ul class="navigation">
      <li><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>

CSS:

​.navigation li {
    display: inline;
    padding-left: 5px;
    padding-right: 5px;
}

もちろん、リンクのスタイルを設定して、テキスト装飾などを削除する必要があります。

編集： 

.navbar-inner {
  background: none !important; 
  border: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

.navbar-inverse .nav .active > a {
  background: 0 !important; 
  color: #333 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

.navbar-inverse .nav > li > a {
  color: #333 !important;
  text-shadow: none !important;
}

.navbar-inverse .nav > li > a:hover {
  color: #333 !important;
}

デモ: http://codepen.io/anon/pen/vJsfz

すべての色、境界線、および影を削除するために、CSS を使用していくつかの単純な「リセット」行を作成しました (少なくとも Webkit ブラウザーの場合)。たぶん、もう少し修正する必要があります。</p>

于 2012-10-25T12:45:05.077 に答える
3 
/*  clear bootstrap header colors */
.navbar-default {
    background-color: white;
    border-color: white;
}
于 2014-02-09T09:19:41.113 に答える
2

多分私は何かを理解していないかもしれませんが、これに対処したばかりです。最も簡単な方法は、デフォルトのナビゲーションバーの色をアルファチャンネルの完全に透明な色で上書きすることです...

.navbar-default {
    background: rgba(255, 255, 255, 0);
}

rgba を使用する場合、最初の 3 つの数字は赤、緑、青を 0 ～ 255 のスケールで表し、最後の数字はアルファ チャンネルで、0 は完全に透明、1 は完全に不透明です。

背景がたまたま白の場合は、白に設定しても機能しますが、この方法では背景が何であるかは問題ではありません。

于 2014-12-19T05:25:05.277 に答える