Медиа объекты в Foundation


Значки в Foundation

Значок - это базовый компонент, который отображает номер. Это полезно для вызова ряда непрочитанных элементов.

<span class="badge primary">1</span>
<span class="badge secondary">2</span>
<span class="badge success">3</span>
<span class="badge alert">A</span>
<span class="badge warning">B</span>

1 2 3 A B


Адаптивное Встраивание

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

<div class="responsive-embed panorama">
  <iframe width="1024" height="315" src="https://www.youtube.com/embed/bnD9I24EL_4" frameborder="0" allowfullscreen></iframe>
</div>


Этикетки в Foundation

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


<span class="label primary">Primary Label</span>
<span class="label secondary">Secondary Label</span>
<span class="label success">Success Label</span>
<span class="label alert">Alert Label</span>
<span class="label warning">Warning Label</span>

Primary Label Secondary Label Success Label Alert Label Warning Label


Orbit карусель на JavaScript

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


<div class="orbit" data-orbit="wqetut-orbit">
<div class="orbit-wrapper">
<div class="orbit-controls"><button class="orbit-previous" tabindex="0"><span class="show-for-sr">Previous Slide</span>◀︎</button> <button class="orbit-next" tabindex="0"><span class="show-for-sr">Next Slide</span>▶︎</button></div>
<ul class="orbit-container" tabindex="0" style="height: 559px;">
<li class="orbit-slide" data-slide="0" style="max-height: 559px; display: none; position: relative; top: 0px; transition-duration: 0ms;">
<figure class="orbit-figure"><img class="orbit-image" src="/images/article/teach001.png" alt="Изучаем Joomla">
<figcaption class="orbit-caption">Изучаем Joomla</figcaption>
</figure>
</li>
<li class="orbit-slide is-active" data-slide="1" style="position: relative; max-height: 559px; top: 0px; display: block; transition-duration: 0ms;" aria-live="polite">
<figure class="orbit-figure"><img class="orbit-image" src="/images/article/joomla_002.jpg" alt="Space">
<figcaption class="orbit-caption">Сайт на Joomla</figcaption>
</figure>
</li>
<li class="orbit-slide" data-slide="2" style="position: relative; max-height: 559px; top: 0px; display: none; transition-duration: 0ms;">
<figure class="orbit-figure"><img class="orbit-image" src="/images/article/joomla_012.jpg" alt="Тренинг по Joomla">
<figcaption class="orbit-caption">Тренинг по Joomla</figcaption>
</figure>
</li>
<li class="orbit-slide" data-slide="3" style="position: relative; max-height: 559px; top: 0px; display: none; transition-duration: 0ms;">
<figure class="orbit-figure"><img class="orbit-image" src="/images/article/joomla_013.jpg" alt="Space">
<figcaption class="orbit-caption">Тренинг по Джумла</figcaption>
</figure>
</li>
</ul>
</div>
<nav class="orbit-bullets"><button class="" data-slide="0"> <span class="show-for-sr">First slide details.</span>  </button> <button data-slide="1" class="is-active"><span class="show-for-sr">Second slide details.</span><span class="show-for-sr" data-slide-active-label="">Current Slide</span></button> <button data-slide="2" class=""><span class="show-for-sr">Third slide details.</span></button> <button data-slide="3" class=""><span class="show-for-sr">Fourth slide details.</span></button></nav></div>

  • Изучаем Joomla
    Изучаем Joomla
  • Space
    Сайт на Joomla
  • Тренинг по Joomla
    Тренинг по Joomla
  • Сайт на Joomla
    Тренинг по Джумла

Подсказка На JavaScript

Всплывающие подсказки? Больше похоже на классные чаевые. Но на самом деле всплывающие подсказки хороши для отображения расширенной информации о термине или действии на странице.


<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="bottom" data-alignment="left">
  Bottom Left
</button>

<button class="button" type="button"  data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="bottom" data-alignment="center">
  Bottom Center
</button>

<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="bottom" data-alignment="right">
  Bottom Right
</button>

<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="top" data-alignment="left">
  Top Left
</button>

<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="top" data-alignment="center">
  Top Center
</button>

<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="top" data-alignment="right">
  Top Right
</button>