Добавить слайдер содержимого Bootstrap Accordion в Weebly »WebNots

Фреймворк Bootstrap содержит множество пользовательских элементов, которые также можно независимо добавить на ваш сайт Weebly, добавив фрагмент кода. Ползунок содержимого в стиле «гармошка» или элемент стиля спойлера — это один из элементов Bootstrap, который называется «коллапс» для добавления большего содержимого в ограниченное пространство. Хотя мы уже объяснили CSS и аккордеон Weebly App Center, стиль Bootstrap предлагает еще один способ добавить слайдер содержимого аккордеона на ваш сайт Weebly.

Как добавить слайдер содержимого Bootstrap Accordion в Weebly?

Прежде чем мы начнем обсуждать, вот живая демонстрация того, как аккордеон Bootstrap будет выглядеть на вашем сайте Weebly. Аккордеон имеет следующие особенности:

  • Мобильное адаптивное автоматическое выравнивание по портам просмотра просматриваемого устройства.
  • При нажатии на заголовок содержимое открывается в стиле push-down, а открытое содержимое закрывается в стиле push-up.
  • По умолчанию при загрузке страницы открывается первый слайд.
  • Вы можете добавить к своему аккордеону сколько угодно слайдов.
  • Любой HTML-элемент может быть добавлен как часть виджета.
  • Область содержимого можно разделить на 12 столбцов с помощью структуры сетки Bootstrap.
Bootstrap Accordion для Weebly

Bootstrap Accordion для Weebly

Сценарий:

Добавьте приведенный ниже скрипт в раздел кода нижнего колонтитула своей страницы:

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

CSS:

Свяжите приведенный ниже CSS Bootstrap в разделе кода заголовка вашей страницы:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

Предложение: Получите 92% скидку на конструктор сайтов Mobirise Bootstrap.

HTML:

В этом примере мы использовали три ползунка со следующими деталями:

  1. Первый слайд состоит из двух столбцов. один с изображением карты, другой с блоком карты. Этот раздел создан с использованием макета группы карточек.
  2. Второй слайд — это обратная карта.
  3. Третий слайд с текстовым элементом внутри карточного блока.

Обязательно замените URL-адреса изображений и фиктивный текстовый контент своими собственными.

<div id="accordion" role="tablist" aria-multiselectable="true">
 <!-- First Section -->
<div class="card">
<div class="card-header" role="tab" id="Firstheading">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="https://www.webnots.com/add-bootstrap-accordion-content-slider-in-weebly/#collapse1" aria-expanded="true" aria-controls="collapse1">
Section 1 with Card Image and Card Block
</a>
</h5>
</div>
<div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="Firstheading">
<div class="card-group" style="margin:20px;">
<div class="card">
<img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 1">
</div>
<div class="card">
<div class="card-block">
<h4 class="card-title">Card Title</h4>
<p class="card-text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut..."</p>
</div>
</div>
</div>
</div>
</div>
<!-- Second Section -->
<div class="card">
<div class="card-header" role="tab" id="secondheading">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
Section 2 with Inverse Card
</a>
</h5>
</div>
<div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="secondheading">
<div class="card card-inverse" style="background-color: #333; margin:20px;">
<div class="card-block">
<h3 class="card-title">Special title treatment</h3>
<p class="card-text">This is a card with inverse color and background is set as black.</p>
<a href="https://www.webnots.com/add-bootstrap-accordion-content-slider-in-weebly/#" class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
<!-- Third Section -->
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
Section 3 with Text Inside Card Block
</a>
</h5>
</div>
<div id="collapse3" class="collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="card-block">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
</div>
 <!-- Add More Sections Here -->
</div>

Три раздела ползунка выделены комментариями для понимания цели, и вы можете добавить дополнительные разделы, добавив блок кода и соответственно изменив атрибуты id и href.

Посмотреть живую демонстрацию

Помните, что Bootstrap — это фреймворк, который может влиять на другие элементы Weebly. Возможно, вам потребуется настроить CSS в соответствии с вашей темой Weebly.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *