Контейнеры в Foundation


Вставка контейнеров

Контейнеры в Foundation - это очень полезные компоненты для отображения элемента, обычных изображений, наряду с некоторым контентом, обычно текстом. Вы можете поместить туда списки, сетки или даже другие медиа-объекты.

Основы вставки контейнеров

Контейнер Foundation поможет вам создать этот общий повторяющийся шаблон и может быть использован несколькими различными способами. Это контейнер с классом .media-object, а также два-три раздела с классом .media-object разделом.


<div class="media-object">
  <div class="media-object-section">
    <div class="thumbnail">
      <img src="/assets/img/media-object/avatar-1.jpg">
    </div>
  </div>
  <div class="media-object-section">
    <h4>Сны кажутся реальными, пока мы в них находимся.</h4>
    <p>Я буду импровизировать. Послушай, есть кое-что, что ты должен знать обо мне... о начале работы. 
    <br>Идея подобна вирусу, она устойчива, очень заразна. Даже самое маленькое семя идеи может вырасти. 
    <br>Она может расти, чтобы определить или уничтожить вас.</p>
  </div>
</div>

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

Сны кажутся реальными, пока мы в них находимся.

Я буду импровизировать. Послушай, есть кое-что, что ты должен знать обо мне... о начале работы. Идея подобна вирусу, она устойчива, очень заразна. Даже самое маленькое семя идеи может вырасти. Она может расти, чтобы определить или уничтожить вас.


Off-canvas JavaScript

Панели Off-canvas расположены за пределами видового экрана и скользят внутрь при активации. Настройка off-холст макет в Foundation - это просто супер.

 


Открывающиеся модальные окна

Модальные диалоговые окна, или всплывающие окна, удобны для прототипирования и производства. Foundation включает в себя Reveal, наш модальный плагин jQuery, чтобы облегчить эту работу для вас.

Модельный ряд очень разнообразен. Образец с анимацией.


<p><button class="button" data-toggle="animatedModal10">Click me for a modal</button></p>

<div class="reveal" id="animatedModal10" data-reveal data-close-on-click="true" data-animation-in="spin-in" data-animation-out="spin-out">
  <h1>Whoa, I'm dizzy!</h1>
  <p class="lead">There are many options for animating modals, check out the Motion UI library to see them all</p>
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Ваууу! Joomla + Foundation

Ладно, они не самые сексуальные вещи на свете, но таблицы делают свою работу (для табличных данных, конечно). У них есть адаптивные модификаторы, которые помогут решить некоторые из ваших проблем с макетом в зависимости от ваших потребностей в таблицах.


Таблицы в Foundation

Ладно, они не самые сексуальные вещи на свете, но таблицы делают свою работу (для табличных данных, конечно). У них есть адаптивные модификаторы, которые помогут решить некоторые из ваших проблем с макетом в зависимости от ваших потребностей в таблицах.


<table>
  <thead>
    <tr>
      <th width="200">Table Header</th>
      <th>Table Header</th>
      <th width="150">Table Header</th>
      <th width="150">Table Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content Goes Here</td>
      <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
      <td>Content Goes Here</td>
      <td>Content Goes Here</td>
    </tr>
    <tr>
      <td>Content Goes Here</td>
      <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
      <td>Content Goes Here</td>
      <td>Content Goes Here</td>
    </tr>
    <tr>
      <td>Content Goes Here</td>
      <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
      <td>Content Goes Here</td>
      <td>Content Goes Here</td>
    </tr>
  </tbody>
</table>

Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here

Представлена лишь часть контейнеров. Больше можно узнать в документации фреймворка Foundation