Базовые основы Foundation CSS

Foundation CSS — это адаптивная интерфейсная среда с открытым исходным кодом, созданная ZURB в сентябре 2011 года, которая упрощает создание потрясающих адаптивных веб-сайтов, приложений и электронных писем, которые работают на любом устройстве. Его используют многие компании, такие как Facebook, eBay, Mozilla, Adobe и даже Disney. Эта структура основана на начальной загрузке, которая похожа на SaaS. Он более сложный, универсальный и настраиваемый. Он также поставляется с интерфейсом командной строки, что упрощает его использование со сборщиками модулей. Платформа электронной почты предоставляет вам адаптивные электронные письма в формате HTML, которые можно читать на любом устройстве. Foundation for Apps позволяет создавать полностью адаптивные веб-приложения.

Аккордеоны — это элементы, которые помогают нам организовать и перемещаться по разным разделам в одном контейнере. Они используются для переключения между разделами в контейнере. Мы можем хранить большие объемы данных в структурированном виде и быть легко доступными. В этой статье мы обсудим основы аккордеона.

Базовые классы по основам Foundation CSS:

accordion: используется для создания контейнера.
accordion-item: используется для создания элементов аккордеона.
accordion-title: используется для присвоения названия аккордеону.
accordion-content: используется для размещения содержимого внутри элемента аккордеона.

Синтаксис:

<ul class="accordion" data-accordion>....</ul>

Пример 1: Следующий код демонстрирует основы аккордеона с некоторым содержимым.

HTML

<!DOCTYPE html>

<html>

  <head>

    

    <link

      rel="stylesheet"

href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"

      crossorigin="anonymous"

    />

    

    <script

src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">

    </script>

    <script

src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"

      crossorigin="anonymous"

    ></script>

  </head>

  <body>

    <center>

      <h2 style="color: green">GeeksforGeeks</h2>

      <h3>Foundation CSS Accordion Basics</h3>

    </center>

    <ul class="accordion" data-accordion>

      <li class="accordion-item is-active" data-accordion-item>

        <a href="#" class="accordion-title">GeeksforGeeks 1</a>

        <div class="accordion-content" data-tab-content>

          <p>A Computer Science portal for geeks.</p>

        </div>

      </li>

      <li class="accordion-item" data-accordion-item>

        <a href="#" class="accordion-title">GeeksforGeeks 2</a>

        <div class="accordion-content" data-tab-content>

          <p>

            It contains well written, well thought and

            well explained computer science and

            programming articles,

          </p>

        </div>

      </li>

      <li class="accordion-item" data-accordion-item>

        <a href="#" class="accordion-title">GeeksforGeeks 3</a>

        <div class="accordion-content" data-tab-content>

          <p>

            Gfg is the only reason to fall in love

            with data structure and programming

          </p>

        </div>

      </li>

    </ul>

    <script>

      $(document).ready(function () {

        $(document).foundation();

      });

    </script>

  </body>

</html>

Пример 2. Следующий код демонстрирует основы аккордеона со ссылками и изображениями.

HTML

<!DOCTYPE html>

<html>

  <head>

    

    <link

      rel="stylesheet"

href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"

      crossorigin="anonymous"

    />

    

    <script

src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">

    </script>

    <script

src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"

      crossorigin="anonymous"

    ></script>

  </head>

  <body>

    <center>

      <h2 style="color: green">GeeksforGeeks</h2>

      <h3>Foundation CSS Accordion Basics</h3>

    </center>

    <ul class="accordion" data-accordion>

      <li class="accordion-item is-active" data-accordion-item>

        <a href="#" class="accordion-title">GeeksforGeeks 1</a>

        <div class="accordion-content" data-tab-content>

          <p>A Computer Science portal for geeks.</p>

          <a href="#">GeeksforGeeks website link</a>

        </div>

      </li>

      <li class="accordion-item" data-accordion-item>

        <a href="#" class="accordion-title">GeeksforGeeks 2</a>

        <div class="accordion-content" data-tab-content>

          <strong>GeeksforGeeks image</strong>

          <img src=

"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"

            alt=""

          />

        </div>

      </li>

      <li class="accordion-item" data-accordion-item>

        <a href="#" class="accordion-title">GeeksforGeeks 3</a>

        <div class="accordion-content" data-tab-content>

          <p>

            Gfg is the only reason to fall in love with data structure and

            programming

          </p>

          <img src=

"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/gfg-logo.png"

            alt=""

          />

          <a href="">Link</a>

        </div>

      </li>

    </ul>

    <script>

      $(document).ready(function () {

        $(document).foundation();

      });

    </script>

  </body>

</html>