Цей урок продовжить серію заміток з розробки на Bootstrap, трохи підвищивши рівень. З попередніх уроків ви могли дізнатися, як працювати з текстом, таблицями, як верстати шаблони і створювати форми.
Для створення динамічних елементів Bootstrap містить бібліотеку bootstrap.js. Вона працює в зв'язці з jQuery і дозволяє легко створювати об'єкти, з якими може взаємодіяти відвідувач вашого сайту. Це можуть бути модальні вікна, що випадають списки, вкладки, слайдери і так далі. Сьогодні мова піде про найпростіший з них - випадних списках.
Як підключити Bootstrap.js
Для своєї роботи скрипти Bootstrap вимагають jQuery, тому переконайтеся, що ця бібліотека підключена перед бутстрапа:
Створювати списки, що випадають на бутстрапа - суцільне задоволення. Ви можете налаштувати стиль таких списків за допомогою пари класів, а для їх роботи буде потрібно підключити jQuery і bootstrap.js.
випадають списки
Список, що випадає - це меню, видимість якого можна змінювати. В даному випадку список з'являється при кліці на зазначений об'єкт. Для прикладу нехай це буде кнопка. Ось приклад такого списку, реалізований на Bootstrap:
Клас .caret створить стрілку вниз (), щоб показати, що з'явиться список. І останнє: додайте клас .dropdown-menu до списку
- . щоб він став випадає.
Роздільник в випадаючому списку
Елемент з класом .divider можна використовувати для розділення елементів всередині списку:
Меню з роздільником
заголовки елементів
Ви можете позначити групи елементів всередині списку за допомогою класу .dropdown-header:
Меню, що випадає з заголовками
Заблоковані елементи
Щоб зробити елемент списку неактивним, додайте йому код .disabled:
Меню з неактивним елементом
Приклад: список праворуч
Ви можете поміняти місце появи списку зі стандартного на появу зверху або праворуч. Щоб список з'являвся праворуч, призначте елементу
- клас .dropdown-menu-right:
Приклад: список, "випадає" наверх
Щоб список з'являвся вище кнопки, поміняйте клас .dropdown на .dropup:
'Data-post_id = "8169" data-user_id = "0" data-is_need_logged = "0" data-lang = "en" data-decom_comment_single_translate = "коментар" data-decom_comment_twice_translate = "коментаря" data-decom_comment_plural_translate = "коментарів" data-multiple_vote = "1" data-text_lang_comment_deleted = 'Коментар Відаль' data-text_lang_edited = "Відредаговано про" data-text_lang_delete = "ВИДАЛИТИ" data-text_lang_not_zero = "поле яке не NULL" data-text_lang_required = "Це обов'язкове поле. " data-text_lang_checked = "Оберіть один з пунктів" data-text_lang_completed = "Операцію завершено" data-text_lang_items_deleted = "Об'єкти Було Відаль" data-text_lang_close = "Закрити" data-text_lang_loading = "Завантаження.">
Додати коментар
Вибачте, для коментування та патенти Войти.
15 коментарів
А у мене чомусь класи caret і divider не працюють ((caret, якщо його привласнити кнопці, ламає її. Divider приховує елемент, якому він присвоєний. У чому може бути проблема?
відмінний урок! Дякуємо! тільки питання є треба в випадаючому списку зробити чекбокси (мультіселект), і щоб вбрання виводилося де-небудь. Знайшла схожі на Гітхуб але прікруттіть не виходить. Буду вдячна за такий урок !!
Урок відмінний. Є тільки одне питання. Припустимо у мене є кнопка з випадаючих списків. Список містить шість пунктів. Натискаємо на кнопку. Список випадає але верхні три пункти ховаються під вище стоять елементом. Як зробити так що б список виподал по верх всього? (Приклад на сайті ufoha.in.ua форма входу.)
@ Роман, по-перше, дякую. По-друге, сам вирішив зайти і перевірити, що такого незвичайного я написав :).
А по-третє, не дочекаєтеся, це ще тільки середина курсу :)