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

10 лучших проектов для начинающих по отработке навыков HTML и 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>
    <!-- Compressed CSS -->
    <link
      rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
      crossorigin="anonymous"
    />
 
    <!-- Compressed JavaScript -->
    <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. Следующий код демонстрирует основы аккордеона со ссылками и изображениями.

Читайте также:  Строка Java contains Method

HTML

<!DOCTYPE html>
<html>
  <head>
    <!-- Compressed CSS -->
    <link
      rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
      crossorigin="anonymous"
    />
 
    <!-- Compressed JavaScript -->
    <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>
Оцените статью
bestprogrammer.ru
Добавить комментарий