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>