Bootstrap (Часть 5) | Выпадающие и отзывчивые вкладки
- Введение и установка
- Система сеток
- Кнопки, Глификоны, Таблицы
- Вертикальные формы, горизонтальные формы, встроенные формы
- Индикатор выполнения и Jumbotron
Выпадающее меню с использованием Bootstrap:
В начальной загрузке раскрывающиеся списки создаются с помощью class = "dropdown". Что мы сделаем, так это создадим кнопку, а затем преобразуем ее в раскрывающийся список.
Как уже было сказано в последних нескольких руководствах, кнопки можно создавать с помощью тега <button>. Но в этой кнопке мы хотим создать раскрывающийся список, поэтому мы добавим class = "btn dropdown-toggle" и data-toggle = "dropdown".
В основном это выглядело бы примерно так.
<button class = "btn btn-default dropdown-toggle" type = "button" data-toggle = "dropdown"> Мой раскрывающийся список </button>
Теперь мы хотим преобразовать эту кнопку в раскрывающийся список. Итак, мы создадим неупорядоченный список с помощью тега <ul> с class = ”dropdown-menu” и добавим элементы с помощью тега <li>.
Пример:
<!DOCTYPE html>< html lang = "en" >< head > < title >Bootstrap Example</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = " https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css " ></ head >< body > < div class = "container" style = "color:green" > < h1 >GeeksforGeeks</ h1 > </ div >< div class = "container" > < h4 >Dropdown in Bootstrap</ h4 ></ div >< div class = "container" > < div class = "row" > < div class = "col-md-3" > < div class = "dropdown" > < button class = "btn btn-success dropdown-toggle" type = "button" data-toggle = "dropdown" >GeeksforGeeks < span class = "caret" ></ span > </ button > < ul class = "dropdown-menu" > < li >< a href = "#" >HTML</ a ></ li > < li >< a href = "#" >CSS</ a ></ li > < li >< a href = "#" >JavaScript</ a ></ li > < li >< a href = "#" >SQL</ a ></ li > </ ul > </ div > </ div > </ div ></ div > </ body ></ html > |
Выход: 
Вы можете улучшить раскрывающийся список, используя классы в теге <li>. Чтобы добавить заголовок в раскрывающемся списке, добавьте class = "dropdown-header", чтобы добавить разделитель между элементами, используйте class = "divider", а для отключения элемента в списке используйте class = "disabled".
Пример:
<!DOCTYPE html>< html lang = "en" >< head > < title >Bootstrap Example</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = " https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css " ></ head >< body > < div class = "container" style = "color:green" > < h1 >GeeksforGeeks</ h1 > </ div >< div class = "container" > < h4 >Dropdown in Bootstrap</ h4 ></ div >< div class = "container" > < div class = "row" > < div class = "col-md-3" > < div class = "dropdown" > < button class = "btn btn-success dropdown-toggle" type = "button" data-toggle = "dropdown" >GeeksforGeeks < span class = "caret" ></ span > </ button > < ul class = "dropdown-menu" > < li class = "drodown-header container" >< b >HTML</ b ></ li > < li >< a href = "#" >CSS</ a ></ li > < li >< a href = "#" >JS</ a ></ li > < li class = "divider" ></ li > < li class = "drodown-header container" >< b >Language</ b ></ li > < li >< a href = "#" ></ a ></ li > < li >< a href = "#" >Python</ a ></ li > < li >< a href = "#" >SQL</ a ></ li > </ ul > </ div > </ div > </ div ></ div > </ body ></ html > |
Выход:
Вкладки навигации с использованием Bootstrap:
Чтобы создать меню навигации с вкладками, нам нужно создать неупорядоченный список с помощью тега <ul>, а затем добавить class = ”nav nav-tabs”. Теперь мы можем добавить наши вкладки с помощью тега <li>. Не забудьте назначить одну вкладку с class = "active", чтобы рассматривать ее как активную вкладку по умолчанию. Теперь нам нужно записать содержимое каждой вкладки, используя class = ”tab-pane” внутри class = ”tab-content”. Обратите внимание, что вы должны назначить идентификаторы соответствующей панели вкладок.
Добавление class = "fade" добавляет эффект затухания при переключении вкладок.
Пример:
Выход: 
Вы можете изменить внешний вид вкладок, изменив class = "navbar-nav" на "nav-pills" или "nav-stacked", и если вы хотите, чтобы ваши вкладки покрывали весь экран, попробуйте добавить class = "Оправдано навигацией"
Как и в случае с выпадающими списками, мы можем отключить любую вкладку, используя class = "disabled"
Выход: 
Примечание: будьте осторожны при использовании панели навигации, она будет менять свой размер в зависимости от размера экрана.
Статья Харшита Гупты:
Харшит Гупта из Калькутты - активный блоггер, который очень заинтересован в написании о текущих событиях, технических блогах, историях и личном жизненном опыте. Помимо страсти к писательству, он также любит программировать и танцевать. В настоящее время он учится в IIEST и является активным участником блога geeksforgeeks.
Если вы также хотите продемонстрировать здесь свой блог, посетите GBlog, где вы можете писать в гостевом блоге на GeeksforGeeks.