W3.CSS 酒吧
单杠
水平线是常见的网页设计元素：
这 w3-栏 该类用于设置水平条的样式：
例子
<div class="w3-bar w3-green">
<div class="w3-bar-item">伦敦</div>
<div class="w3-bar-item">巴黎</div>
<div class="w3-bar-item">东京</div>
</div>
的目的 w3-栏目 类是为了提供正确的间距、填充和定位。
垂直条
垂直条（侧边栏）在网页设计中也很常见：
这 w3-条形块 该类用于设置垂直条的样式：
例子
<div class="w3-bar-block w3-green">
<div class="w3-bar-item">伦敦</div>
<div class="w3-bar-item">巴黎</div>
<div class="w3-bar-item">东京</div>
</div>
栏目颜色
您可以使用任意颜色来设计栏目样式：
例子
<div class="w3-bar w3-black">
<div class="w3-bar-item">伦敦</div>
<div class="w3-bar-item">巴黎</div>
<div class="w3-bar-item">东京</div>
</div>
悬停颜色
您可以使用任意悬停颜色来设置栏的样式：
将鼠标移到栏目上就可以看到效果：
例子
<div class="w3-bar w3-black">
<div class="w3-bar-item w3-hover-red">伦敦</div>
<div class="w3-bar-item w3-hover-green">巴黎</div>
<div class="w3-bar-item w3-hover-blue">东京</div>
</div>
酒吧链接
提供导航是栏的典型用途：
例子
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-hover-green">伦敦</a>
<a href="#" class="w3-bar-item w3-hover-green">巴黎</a>
<a href="#" class="w3-bar-item w3-hover-green">东京</a>
</div>
栏按钮
这 w3-按钮 类非常适合为栏中的链接设置样式。
将鼠标移到栏目上就可以看到效果：
例子
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">伦敦</a>
<a href="#" class="w3-bar-item w3-button">巴黎</a>
<a href="#" class="w3-bar-item w3-button">东京</a>
</div>
响应栏
这 w3-移动 该类非常适合使栏目具有响应性。
调整窗口大小查看效果：
例子
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">伦敦</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">巴黎</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">东京</a>
</div>
右对齐栏项目
这 w3-右 类非常适合使栏目右对齐：
例子
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">伦敦</a>
<a href="#" class="w3-bar-item w3-button">巴黎</a>
<a href="#" class="w3-bar-item w3-button w3-right">东京</a>
</div>
