Сентябрь 2017
Автор: Рубрика: Верстка Комментариев нет

Блок FAQ на bootstrap tabs и accordion


Обязательный блок для идеального lendinga является faq ответы на вопросы, в котором рассмотрены все ключевые вопросы, которые интересуют покупателя.

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

Структура будет состоять из секции с идентификатором #faq в одну колонку col-xs-12 с заголовком второго уровня с названием информация о товаре и двумя уточняющими предложениями.

Под заголовком будем использовать блок аккордеон из библиотеки bootstrap.

Этот блок копируем с официального сайта bootstrap и вставляем в index.html внутрь класс row с колонками col-xs-12.

 блок аккордеон из библиотеки bootstrap.

Сразу появится аккордеон.

Весь текст у каждого блока обернем в тег p и каждое предложение с новой строки тегом br.

Добавим кнопку развернуть faq.

Так как вопросов может быть много, оставим несколько штук, которые будут видны.

Кто заинтересуется, нажмет на кнопку и откроется весь список.

Переходим на сайт bootstrap и чуть выше аккордеона есть пример кнопки.

Помимо добавления кнопки нам нужно обернуть все вопросы, которые будут скрыты в див с классом collapse и идентификатором как у кнопки allfaq.

Получился код в html.

Установим стили к аккордеону.

  1. Заголовок faq-hdr делаем по центру text-align: center, делаем большой шрифт синего цвета.
  2. Для кнопки faq-btn сделаем свойство display: block, чтобы она занимала всю область по ширине в браузере, после этого подвинем на центр кнопку margin: 0 auto. Закруглим края. Чтобы у кнопки при фокусе &:focus не было синей линии вокруг, пропишем outline: none. Зададим кнопке размеры.

готовый аккордеон из bootstrap

Можно реализовать faq с помощью bootstrap табов.

Можно реализовать faq с помощью bootstrap табов.

Также заходим на сайт bootstrap и копируем код, примера, в файл index.html.

Меняем только заголовки tabs и текст в нутрии каждого tab.

Код.

bootstrap tabs

Комментариев нет