Классы в Foundation


Использование классов видимости - важно убедиться, что они не будут переопределены более конкретными селекторами. Этот фреймворк добросовестно избегает использования !important декларации. Это один из немногих компонентов, который делает это.

Нет никаких классов для обнаружения устройств с сенсорным экраном, поскольку как настольные, так и мобильные браузеры непоследовательно сообщают о поддержке сенсорного экрана.

Классы Видимости

Классы видимости позволяют отображать или скрывать элементы в зависимости от размера экрана или ориентации устройства. Вы также можете использовать классы видимости для управления тем, какие элементы пользователи видят в зависимости от своей среды просмотра.

Показать по размеру экрана

В этом примере мы используем следующие .show классы видимости для отображения определенных строк текста в зависимости от устройства, на котором пользователи просматривают страницу. Если их браузер удовлетворяет условиям класса, то элемент будет показан. Если нет, то он будет скрыт.

<p>You are on a small screen or larger.</p>
<p class="show-for-medium">You are on a medium screen or larger.</p>
<p class="show-for-large">You are on a large screen or larger.</p>

Вы находитесь на маленьком экране или больше.

Вы находитесь на среднем экране или больше.

Вы находитесь на большом экране или больше.

Эти классы автоматически скрывают элемент на экране размером ниже того, что указано в классе. Так .show-for-medium скроет элемент на малом, а покажет его на среднем и большем.

Отдельный набор классов позволяет показывать контент только на определенном размере экрана.


Не видите никакого текста под образцом кода? Вы должны быть на очень большом экране.

 

<p class="show-for-small-only">You are <em>definitely</em> on a small screen.</p>
<p class="show-for-medium-only">You are <em>definitely</em> on a medium screen.</p>
<p class="show-for-large-only">You are <em>definitely</em> on a large screen.</p>

Вы на definitely маленьком экране.

Вы на definitely среднем экране.

Вы на definitely большом экране.


Классы плавания Float

Foundation включает в себя несколько полезных классов float для добавления общего поведения позиционирования к элементам

Поплавок Влево / Вправо

Вы можете изменить поведение float элемента, добавив ему .float-left или .float-right классы для элемента. Чтобы очистить поплавки, добавьте класс .clearfix к родительскому элементу.

Используя классы Float Left/Right важно убедиться, что они не будут переопределены более конкретными селекторами.

<div class="callout clearfix">
  <a class="button float-left">Left</a>
  <a class="button float-right">Right</a>
</div>


Поплавок в Центр

Ладно, это не совсем поплавок, но вы можете добавить .float-center класс к элементу, чтобы привлечь автоматическое центрирование. Обратите внимание, что это будет работать только на элементах с абсолютной шириной, что означает, что это не процент или автоматическая ширина.

<img src="/assets/img/generic/voyager.jpg" class="float-center">

Joomla - обучение, сопровождение, кураторство