Bootstrap 3. Гармошка и карусель

14.02.2016

Теги: Bootstrap • CSS • HTML • Web-разработка • Верстка • Компонент • Фреймворк

С помощью компонента «Гармошка» можно создать набор из нескольких сворачиваемых панелей, содержащих контент различного объема. Поскольку открытой может быть только одна панель, все выглядит компактно. Компонент «Карусель» предназначен для демонстрации на сайте серии изображений (слайдов).

Показать-скрыть контент

Изначально скрытый элемент страницы должен иметь уникальный идентификатор и класс class="collapse", а для управляющей кнопки надо задать атрибуты data-toggle и data-target. 

<p>
    <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapse-example">
        Ссылка с атрибутом href
    </a>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapse-example">
        Кнопка с атрибутом data-target
    </button>
</p>
<div class="collapse" id="collapse-example">
    <div class="well">
        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.
    </div>
</div>

Чтобы показать-скрыть контент с использованием JavaScript: 

<p>
    <a href="#" id="toggle-content" class="btn btn-primary" role="button">
        Показать-скрыть
    </a>
</p>
<div class="collapse" id="collapse-example">
    <div class="well">
        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.
    </div>
</div>
$(document).ready(function() {
    $('#toggle-content').click(function() {
        $('#collapse-example').collapse('toggle');
    });
});

Гармошка

Гармошка обычно применяется для создания на сайте меню или навигации, в которые необходимо поместить много контента. 

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab">
            <h4 class="panel-title">
                <!-- Содержимое раскрыто: aria-expanded="true", нет класса class="collapsed" -->
                <a role="button" data-toggle="collapse"
                   data-parent="#accordion" href="#collapse-one" aria-expanded="true">
                Первая ссылка
                </a>
            </h4>
        </div>
        <!-- Содержимое раскрыто: aria-expanded="true", есть класс class="in" -->
        <div id="collapse-one" class="panel-collapse collapse in" role="tabpanel" aria-expanded="true">
            <div class="panel-body">
                <h4>Первый заголовок</h4>
                <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>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab">
            <h4 class="panel-title">
                <!-- Содержимое скрыто: aria-expanded="false", есть класс class="collapsed" -->
                <a class="collapsed" role="button" data-toggle="collapse"
                   data-parent="#accordion" href="#collapse-two" aria-expanded="false">
                Вторая ссылка
                </a>
            </h4>
        </div>
        <!-- Содержимое скрыто:  aria-expanded="false", нет класса class="in" -->
        <div id="collapse-two" class="panel-collapse collapse" role="tabpanel" aria-expanded="false">
            <div class="panel-body">
                <h4>Второй заголовок</h4>
                <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>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab">
            <h4 class="panel-title">
                <!-- Содержимое скрыто: aria-expanded="false", есть класс class="collapsed" -->
                <a class="collapsed" role="button" data-toggle="collapse"
                   data-parent="#accordion" href="#collapse-three" aria-expanded="false">
                Третья ссылка
                </a>
            </h4>
        </div>
        <!-- Содержимое скрыто: aria-expanded="false", нет класса class="in" -->
        <div id="collapse-three" class="panel-collapse collapse" role="tabpanel" aria-expanded="false">
            <div class="panel-body">
                <h4>Третий заголовок</h4>
                <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>
</div>

Если используется атрибут data-parent, открытым может быть содержимое только одной секции.

Карусель

<!-- Слайдер из трех элементов -->
<div id="carousel-example" class="carousel slide" data-ride="carousel">
    <!-- Индикатор текущего элемента -->  
    <ol class="carousel-indicators">
        <li data-target="#carousel-example" data-slide-to="0"></li>
        <!-- Активный элемент -->
        <li data-target="#carousel-example" data-slide-to="1" class="active"></li>
        <li data-target="#carousel-example" data-slide-to="2"></li>
    </ol>

    <!-- Обертка для слайдов -->  
    <div class="carousel-inner" role="listbox">
        <div class="item">
            <img src="img/image-1.jpg" alt="...">
            <div class="carousel-caption">Первый элемент слайдера</div>
        </div>
        <div class="item active"> <!-- активный элемент -->
            <img src="img/image-2.jpg" alt="...">
            <div class="carousel-caption">Второй элемент слайдера</div>
        </div>
        <div class="item">
            <img src="img/image-3.jpg" alt="...">
            <div class="carousel-caption">Третий элемент слайдера</div>
        </div>
    </div>

    <!-- Элементы управления -->
    <a class="left carousel-control" href="#carousel-example" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Предыдущий</span> <!-- для программ чтения с экрана -->
    </a>
    <a class="right carousel-control" href="#carousel-example" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Следующий</span> <!-- для программ чтения с экрана -->
    </a>
</div>

Атрибут data-ride="carousel" запускает автоматическую смену слайдов карусели после загрузки страницы. Если инициализация карусели выполняется с помощью JavaScript, этот атрибут не нужен. 

<!-- Запустить автоматическую прокрутку слайдов -->
<div id="carousel-example" class="carousel slide" data-ride="carousel" data-interval="false">
    .....
</div>

Карусель можно активировать с помощью JavaScript: 

$('#carousel-example').carousel();

Дополнительно

Поиск: Bootstrap • CSS • HTML • Web-разработка • Верстка • Компонент • Гармошка • Карусель • Слайдер • Фреймворк

Каталог оборудования
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Производители
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Функциональные группы
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.