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 클래스 의 목적은 올바른 간격, 패딩 및 위치 지정을 제공하는 것입니다.
수직 막대
세로 막대(사이드바)도 웹 디자인에서 일반적입니다.
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-button 클래스는 막대의 링크 스타일을 지정하는 데 적합합니다 .
효과를 보려면 막대 항목 위로 마우스를 가져갑니다.
예시
<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>