W3.CSSバー
鉄棒
横棒は一般的なウェブデザイン要素です。
w3-barクラスは、水平バーのスタイルを設定するために使用されます。
例
<div class="w3-bar w3-green">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
w3-bar-itemクラスの目的は、正しい間隔、パディング、および配置を提供することです。
垂直バー
垂直バー（サイドバー）もWebデザインで一般的です。
w3-bar-blockクラスは、垂直バーのスタイルを設定するために使用されます。
例
<div class="w3-bar-block w3-green">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
バーの色
バーのスタイルを設定するには、任意の色を使用できます。
例
<div class="w3-bar w3-black">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
ホバーカラー
任意のホバーカラーを使用して、バーのスタイルを設定できます。
バーアイテムの上にマウスを置くと、効果が表示されます。
例
<div class="w3-bar w3-black">
<div class="w3-bar-item w3-hover-red">London</div>
<div class="w3-bar-item w3-hover-green">Paris</div>
<div class="w3-bar-item w3-hover-blue">Tokyo</div>
</div>
バーリンク
ナビゲーションの提供は、バーの一般的な使用法です。
例
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-hover-green">London</a>
<a href="#" class="w3-bar-item w3-hover-green">Paris</a>
<a href="#" class="w3-bar-item w3-hover-green">Tokyo</a>
</div>
バーボタン
w3ボタンクラスは、バーのリンクをスタイリングするのに最適です。
バーアイテムの上にマウスを置くと、効果が表示されます。
例
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">London</a>
<a href="#" class="w3-bar-item w3-button">Paris</a>
<a href="#" class="w3-bar-item w3-button">Tokyo</a>
</div>
レスポンシブバー
w3-mobileクラスは、バーアイテムをレスポンシブにするのに最適です。
ウィンドウのサイズを変更して、効果を確認します。
例
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">London</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Paris</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Tokyo</a>
</div>
右揃えのバーアイテム
w3-rightクラスは、バーアイテムを右揃えにするのに最適です。
例
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">London</a>
<a href="#" class="w3-bar-item w3-button">Paris</a>
<a href="#" class="w3-bar-item w3-button w3-right">Tokyo</a>
</div>