Accordion Bootstrap 3 / Элементы / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Элементы

Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Уникальный ID: 88

Количество символов:

Посмотрели: 4016 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 3 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Информация: Пользователям

Информация: Правообладателям

Теги: бутстрап, панель, аккордион, Accordion, Bootstrap, Snippet

Поделился: aTmpl

Добавлено: 2015-11-27 в 14:37

Метка: 1582177956

⇄ ⇅

<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2015/b-v3-3-6/bootstrap.min.css" />

<div class="container">
 <div class="row">
 <div class="col-sm-6 col-sm-offset-3">
 <div id="accordion" class="panel-group">

<div class="panel panel-default">

<div class="panel-heading">

<h4 class="panel-title text-center">

<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Заголовок 1</a>

</h4>

</div>

<div id="collapseOne" class="panel-collapse collapse in">

<div class="panel-body">

<img src="http://drawings-girls.ucoz.net/2015/08/seryoznaya-devushka-s-krasnimi-volosami.jpg" class="img-responsive" alt="Картинка 1" />

</div>

</div>

</div>

<div class="panel panel-default">

<div class="panel-heading">

<h4 class="panel-title text-center">

<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Заголовок 2</a>

</h4>

</div>

<div id="collapseTwo" class="panel-collapse collapse">

<div class="panel-body">

<img src="http://drawings-girls.ucoz.net/2015/08/devushka-v-zelyonom-platie-s-olenem.jpg" class="img-responsive" alt="Картинка 2" />

</div>

</div>

</div>

<div class="panel panel-default">

<div class="panel-heading">

<h4 class="panel-title text-center">

<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Заголовок 3</a>

</h4>

</div>

<div id="collapseThree" class="panel-collapse collapse">

<div class="panel-body">

<img src="http://drawings-girls.ucoz.net/2015/08/temnovolosaya-devushka-s-sharom-i-zmeyoi.jpg" class="img-responsive" alt="Картинка 3" />

</div>

</div>

</div>

</div>
 </div>
 </div>
</div>

<script type="text/javascript" src="https://bootstraptema.ru/plugins/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://bootstraptema.ru/plugins/2015/b-v3-3-6/bootstrap.min.js"></script>