Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях

Изучаем свойство bootstrap collapse и создаем раскрывающиеся панели

Приветствую всех читателей текущей статьи. Сегодня мы разберем с вами очень полезный инструмент под названием Bootstrap Collapse. Если вы усвоите материал данной публикации, то с легкостью сможете реализовывать сложные конструкции блоков с раскрывающимися панелями и выводом дополнительной информации для пользователей.

Я расскажу, с помощью каких элементов можно создать подобные объекты, перечислю различные типы скрывающихся блоков и конечно же прикреплю примеры. Поехали!

Создание стандартного механизма Collapsible

Для начала вы должны понимать, что Bootstrap Collapse необходим для создания скрывающегося/раскрывающегося блока с большим количеством текста. Такой прием удобен при отображении текстового контента на смартфонах или других устройствах с небольшим разрешением экрана, для структурированной и компактной презентации информации по пунктам, главам и т.д.

Для того чтобы создать подобный элемент, в коде необходимо:

  1. Объявить триггер для кнопки или ссылки и указать в нем такие атрибуты, как:
  2. data-toggle со значением “collapse”, который позволит показывать и скрывать информацию;
    data-target с идентификатором, который будет присвоен создаваемому collapse-элементу для его связи с триггером. При использовании ссылки вместо кнопки данный атрибут можно опустить, а вместо него идентификатор прописать в href.

  3. Создать слой с описанным выше идентификатором и классом .collapse.

Для закрепления материала ознакомьтесь с ниже прикрепленным примером.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2 style="color:red;">Сегодня в ТРЦ "*****" проводится акция, по которой вы можете выиграть плазму!</h2>
  <button type="button" class="btn-lg btn-danger" data-toggle="collapse" data-target="#demo">Подробнее</button>
  <div id="demo" class="collapse">
    Для участия Вам необходимо выполнить несколько условий...
  </div>
</div>
 
</body>
</html>

Своеобразная реализация списка

Как вы заметили, все делается достаточно просто. Поэтому усложним немного задачу и теперь попробуем создать разворачивающийся/сворачивающийся список или как еще про него говорят “раскладной”.

Для этого необходимо создать несколько вложенных слоев. Я перечислил их по порядку, начиная с верхнего:
  • .panel-group — определяет блок, в котором будет создаваться группа объектов раскладного перечня;
  • .panel — создает саму оболочку вокруг всех пунктов и объединяет их в один элемент управления;
  • .panel-heading — в нем располагается основная информация панели;
  • А теперь на одном уровне нужно определить наименование самого списка, обрамив его в класс .panel-title. Здесь вы инициализируете триггер. А после стоит определить сами раскрывающиеся пункты, указав в блоке нужный идентификатор и классы .collapse и .panel-collapse.
  • .panel-footer. “Подвал” можно создавать по желанию.

Ну а теперь перейдем к примеру.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <div class="panel-group ">
    <div class="panel panel-default ">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" href="#MyColl">Бургеры</a>
        </h4>
      </div>
      <div id="MyColl" class="panel-collapse collapse">
        <ul class="list-group">
          <li class="list-group-item list-group-item-success">Чизбургер</li>
          <li class="list-group-item list-group-item-success">Гамбургер</li>
          <li class="list-group-item list-group-item-success">Королевский</li>
        </ul>
        <div class="panel-footer">Приготовление длится около 10-15 минут. Приятного аппетита!</div>
      </div>
    </div>
  </div>
</div>
 
</body>
</html>

А вы знаете как создать аккордеон?

Ну а теперь я хочу рассказать вам о так называемом “Accordion”. Это очень полезная штука, которую можно часто встретить на информационных сайтах, чатах, обучающих сервисах и т.д.

Что же это такое? Представьте, что на странице вашего веб-сайта находятся вопросы по какой-либо теме для проверки знаний читателей. После прочтения каждого из вопросов они обдумывают ответ, а далее сверяют его с правильным, который предлагается на сервисе.

Для этого необходимо реализовать технологию, в которой изначально верные ответы будут скрыты. Вот такой механизм как раз и реализует Accordion.

Он основывается на предыдущем примере, однако в некоторых местах дополняется новыми атрибутами и блоками.

Для начала в верхнем слое стоит добавить id-шник с параметром “accordion”. А после в триггере прописать атрибут data-parent с названным значением идентификатора. Данный параметр гарантирует, что при открытии одного из объектов все остальные сворачиваемые элементы будут закрываться.

Вот как будет выглядеть код программы для трех таких объектов:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Что нужно сделать при таких обстоятельствах?</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">При указанных обстоятельствах необходимо выпольтить следующее...</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Какой параметр стоит указать при...?</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">При ... стои указать вот такой параметр.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">ДЛя реализации ... стоит использовать...?</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">В указанном случае это лучший вариант.</div>
      </div>
    </div>
  </div>
</div>
 
</body>
</html>

На этом я заканчиваю свою статью. Если вам понравился и был полезен изложенный материал, то подписывайтесь на обновления моего блога и читайте другие публикации. Буду благодарен, если вы поделитесь ссылкой на блог с друзьями. Пока-пока!

С уважением, Роман Чуешов


Прочитано: 328 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: