О модальных окнах

Оптимизированный, но гибкий вариант традиционного модального плагина javascript с минимальной необходимой функциональностью и умными настройками по умолчанию.

Статический пример

Ниже представлено статически отрисованное модальное окно.

Живая демонстрация

Переключите модальное окно с помощью javascript, нажав кнопку ниже. Он будет скользить вниз и исчезать в верхней части страницы.

Использование начальной загрузки

Вызов модального окна через javascript:

$ ( '#myModal' ). модальный ( варианты )

Опции

Разметка

Вы можете легко активировать модальные окна на своей странице, не написав ни одной строки javascript. Просто установите data-toggle="modal"элемент контроллера с data-target="#foo"или href="#foo", который соответствует идентификатору модального элемента, и при нажатии он запустит ваш модальный.

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

<a class = "btn" data-toggle = "modal" href = "#myModal" > Запустить модальное окно </a>    

<div class = "modal" id = "myModal" >  
  <div класс = "модальный заголовок" > 
    <a class = "close" data-dismiss = "modal" > × </a>  
    <h3> Модальный заголовок </h3>
  </div>
  <div class = "модальное тело" > 
    <p> Одно прекрасное тело… </p>
  </div>
  <div class = "модальный нижний колонтитул" > 
    <a href = "#" class = "btn" > Закрыть </a>  
    <a href = "#" class = "btn btn-primary" > Сохранить изменения </a>  
  </div>
</div>

Методы

.modal(варианты)

Активирует ваш контент как модальный. Принимает необязательные параметры object.

$ ( '#myModal' ). модальный ({
  клавиатура : ложь 
})

.modal('переключить')

Вручную переключает модальное окно.

$ ( '#myModal' ). модальный ( «переключить» )

.modal('показать')

Вручную открывает модальное окно.

$ ( '#myModal' ). модальный ( «показать» )

.modal('скрыть')

Вручную скрывает модальное окно.

$ ( '#myModal' ). модальный ( «скрыть» )

События

Модальный класс Bootstrap предоставляет несколько событий для подключения к модальным функциям.

$ ( '#myModal' ). на ( 'скрытый' , функция () {   
  // сделай что-нибудь…
})

О раскрывающихся списках

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

Примеры

Нажмите на раскрывающиеся навигационные ссылки в навигационной панели и на панели ниже, чтобы протестировать раскрывающиеся списки.

• Обычная ссылка
• Падать
  • Action
  • Another action
  • Something else here
  • Separated link
• Выпадающий список 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Выпадающий список 3
  • Action
  • Another action
  • Something else here
  • Separated link

Использование bootstrap-dropdown.js

Вызовите раскрывающиеся списки через javascript:

$ ( '.dropdown-toggle' ). раскрывающийся список ()

Разметка

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

<ul class = "nav nav-таблетки" > 
  <li class = "active" ><a href = "#" > Обычная ссылка </a></li>  
  <li class = "раскрывающийся список" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Падать
      <b class = "вставка" ></b> 
    </a>
    <ul class = "раскрывающееся меню" > 
      <li><a href = "#" > Действие </a></li> 
      <li><a href = "#" > Другое действие </a></li> 
      <li><a href = "#" > Что-то еще здесь </a></li> 
      <li класс = "разделитель" ></li> 
      <li><a href = "#" > Отдельная ссылка </a></li> 
    </ul>
  </li>
  ...
</ul>

Методы

$().выпадающий()

Программный API для активации меню для данной панели навигации или навигации с вкладками.

Плагин ScrollSpy предназначен для автоматического обновления целей навигации в зависимости от положения прокрутки.

Пример панели навигации с помощью scrollspy

Прокрутите область ниже и посмотрите обновление навигации. Выпадающие подэлементы также будут выделены. Попытайся!

Использование bootstrap-scrollspy.js

Вызовите scrollspy через javascript:

$ ( '#navbar' ). прокрутка ()

Разметка

Чтобы легко добавить поведение прокрутки в навигацию на верхней панели, просто добавьте data-spy="scroll"к элементу, за которым вы хотите следить (чаще всего это будет тело).

<body data-spy = "scroll" > ... </body>  

Опции

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

Примеры вкладок

Нажмите на вкладки ниже, чтобы переключаться между скрытыми панелями, даже через раскрывающиеся меню.

• Дом
• Профиль
• Падать
  • @fat
  • @mdo

Использование bootstrap-tab.js

Включить вкладки с вкладками через javascript:

$ ( '#myTab' ). вкладка ( «показать» )

Разметка

Вы можете активировать навигацию по вкладкам или таблеткам без написания какого-либо javascript, просто указав data-toggle="tab"или data-toggle="pill"на элементе.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Главная страница </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Профиль </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Сообщения </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Настройки </a></li>  
</ul>

Методы

$(). вкладка

Активирует элемент вкладки и контейнер содержимого. Tab должен иметь либо `data-target`, либо `href`, указывающий на узел-контейнер в dom.

<ul class = "nav nav-tabs" > 
  <li class = "active" ><a href = "#home" > Домашняя страница </a></li>  
  <li><a href = "#profile" > Профиль </a></li> 
  <li><a href = "#messages" > Сообщения </a></li> 
  <li><a href = "#settings" > Настройки </a></li> 
</ul>
 
<div класс = "контент вкладки" > 
  <div class = "активная вкладка" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<скрипт>
  $ ( функция () {  
    $ ( '.tabs a:последний' ). вкладка ( «показать» )
  })
</скрипт>

События

$ ( 'a[data-toggle="tab"]' ). на ( 'показано' , функция ( e ) {   
  э . цель // активированная вкладка
  э . relatedTarget // предыдущая вкладка
})

О всплывающих подсказках

Вдохновленный превосходным плагином jQuery.tipsy, написанным Джейсоном Фреймом; Всплывающие подсказки — это обновленная версия, которая не использует изображения, использует css3 для анимации и атрибуты данных для локального хранения заголовков.

Пример использования всплывающих подсказок

Наведите указатель мыши на ссылки ниже, чтобы увидеть всплывающие подсказки:

Использование bootstrap-tooltip.js

Активировать всплывающую подсказку через javascript:

$ ( '#пример' ). подсказка ( варианты )

Опции

Разметка

По соображениям производительности API-интерфейсы данных Tooltip и Popover включены. Если вы хотите использовать их, просто укажите параметр селектора.

<a href = "#" rel = "tooltip" title = "first tooltip" > наведите курсор на меня </a>   

Методы

$(). всплывающая подсказка (параметры)

Присоединяет обработчик всплывающей подсказки к коллекции элементов.

.тултип('показать')

Отображает всплывающую подсказку элемента.

$ ( '#элемент' ). всплывающая подсказка ( «показать» )

.тултип('скрыть')

Скрывает всплывающую подсказку элемента.

$ ( '#элемент' ). всплывающая подсказка ( «скрыть» )

.tooltip('переключить')

Переключает всплывающую подсказку элемента.

$ ( '#элемент' ). всплывающая подсказка ( «переключить» )

О всплывающих окнах

Добавляйте небольшие наложения контента, как на iPad, к любому элементу для размещения вторичной информации.

* Требуется наличие всплывающей подсказки

Пример всплывающего окна при наведении

Наведите указатель мыши на кнопку, чтобы вызвать всплывающее окно.

Использование bootstrap-popover.js

Включить всплывающие окна через javascript:

$ ( '#пример' ). всплывающее окно ( варианты )

Опции

Разметка

По соображениям производительности API-интерфейсы данных Tooltip и Popover включены. Если вы хотите использовать их, просто укажите параметр селектора.

Методы

$().popover(параметры)

Инициализирует всплывающие окна для коллекции элементов.

.popover('показать')

Открывает всплывающее окно элементов.

$ ( '#элемент' ). всплывающее окно ( «показать» )

.popover('скрыть')

Скрывает всплывающее окно элементов.

$ ( '#элемент' ). всплывающее окно ( «скрыть» )

.popover('переключить')

Переключает всплывающее окно элементов.

$ ( '#элемент' ). всплывающее окно ( «переключение» )

Об оповещениях

Плагин оповещений — это крошечный класс для добавления близких функций к оповещениям.

Примеры оповещений

Плагин оповещений работает с обычными предупреждающими сообщениями и блокирует сообщения.

Использование bootstrap-alert.js

Включить отклонение оповещения через javascript:

$ ( ".алерт" ). предупреждение ()

Разметка

Просто добавьте data-dismiss="alert"к своей кнопке закрытия, чтобы автоматически дать предупреждение о закрытии.

<a class = "close" data-dismiss = "alert" href = "#" > × </a>   

Методы

$().оповещение()

Обертывает все оповещения с закрытой функциональностью. Чтобы ваши оповещения анимировались при закрытии, убедитесь, что к ним уже применен класс .fadeи ..in

.алерт('закрыть')

Закрывает оповещение.

$ ( ".алерт" ). предупреждение ( «закрыть» )

События

Класс предупреждений Bootstrap предоставляет несколько событий для подключения к функциям предупреждений.

$ ( '#мое-предупреждение' ). привязать ( 'закрыто' , функция () {   
  // сделай что-нибудь…
})

О

Делайте больше с кнопками. Управляйте состояниями кнопок или создавайте группы кнопок для дополнительных компонентов, таких как панели инструментов.

Пример использования

Используйте плагин кнопок для состояний и переключателей.

Использование bootstrap-button.js

Включить кнопки через javascript:

$ ( '.tabs' ). кнопка ()

Разметка

Атрибуты данных являются неотъемлемой частью плагина кнопки. Посмотрите приведенный ниже пример кода для различных типов разметки.

<!-- Добавьте data-toggle="button", чтобы активировать переключение на одной кнопке -->
<button class = "btn" data-toggle = "button" > Одиночный переключатель </button>  
 
<!-- Добавьте data-toggle="buttons-checkbox" для переключения стиля флажка в btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Влево </button> 
  <button class = "btn" > Средний </button> 
  <button class = "btn" > Вправо </button> 
</div>
 
<!-- Добавьте data-toggle="buttons-radio" для переключения стиля радио на btn-group -->
<div class = "btn-group" data-toggle = "кнопки-радио" >  
  <button class = "btn" > Влево </button> 
  <button class = "btn" > Средний </button> 
  <button class = "btn" > Вправо </button> 
</div>

Методы

$().кнопка('переключить')

Переключает состояние нажатия. Создает впечатление, что кнопка активирована.

<button class = "btn" data-toggle = "button" > … </button>   

$().кнопка('загрузка')

Устанавливает состояние кнопки на загрузку — отключает кнопку и меняет текст на загружаемый текст. Загрузка текста должна быть определена в элементе кнопки с помощью атрибута данных data-loading-text.

<button class = "btn" data-loading-text = "загрузка..." > ... </button>   

$().кнопка('сброс')

Сбрасывает состояние кнопки — меняет текст на исходный текст.

$().кнопка(строка)

Сбрасывает состояние кнопки — меняет текст на любое текстовое состояние, определенное данными.

<button class = "btn" data-complete-text = "finished!" > ... </кнопка>   
<скрипт>
  $ ( '.btn' ). кнопка ( «завершить» )
</скрипт>

О

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

Пример аккордеона

Используя плагин сворачивания, мы создали простой виджет в стиле аккордеона:

Использование bootstrap-collapse.js

Включить через javascript:

$ ( ".collapse" ). коллапс ()

Опции

Разметка

Просто добавьте data-toggle="collapse"и data-targetк элементу, чтобы автоматически назначить управление складным элементом. Атрибут data-targetпринимает селектор css, к которому применяется свертывание. Обязательно добавьте класс collapseк складному элементу. Если вы хотите, чтобы он открывался по умолчанию, добавьте дополнительный класс in.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  простой складной
</кнопка>
 
<div id = "demo" class = "collapse in" > … </div>  

Методы

.collapse(параметры)

Активирует ваш контент как складной элемент. Принимает необязательные параметры object.

$ ( '#myCollapsible' ). коллапс ({
  переключить : ложь 
})

.collapse('переключить')

Отображает или скрывает сворачиваемый элемент.

.collapse('показать')

Показывает разборный элемент.

.collapse('скрыть')

Скрывает складной элемент.

События

Класс коллапса Bootstrap предоставляет несколько событий для подключения к функциональности коллапса.

$ ( '#myCollapsible' ). на ( 'скрытый' , функция () {   
  // сделай что-нибудь…
})

О

Общий плагин для циклического переключения элементов. Карусель.

Пример карусели

Посмотрите слайд-шоу ниже.

Ярлык первого эскиза

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

Использование bootstrap-carousel.js

Звонок через javascript:

$ ( '.карусель' ). карусель ()

Опции

Разметка

Атрибуты данных используются для предыдущего и следующего контроля. Посмотрите пример разметки ниже.

<div id = "myCarousel" class = "carousel " >  
  <!-- Элементы карусели -->
  <div class = "carousel-inner" > 
    <div class = "активный элемент" > … </div> 
    <div класс = "элемент" > … </div> 
    <div класс = "элемент" > … </div> 
  </div>
  <!-- Карусельная навигация -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Методы

.карусель(варианты)

Инициализирует карусель с дополнительными параметрами objectи начинает циклически перемещаться по элементам.

$ ( '.карусель' ). карусель ({
  интервал : 2000 
})

.карусель('цикл')

Перебирает элементы карусели слева направо.

.карусель('пауза')

Запрещает карусели циклически перемещаться по элементам.

.карусель(число)

Циклически перемещает карусель к определенному кадру (на основе 0, подобно массиву).

.карусель('предыдущая')

Переход к предыдущему элементу.

.карусель('следующий')

Переход к следующему элементу.

События

Класс карусели Bootstrap предоставляет два события для подключения к функциям карусели.

О

Базовый, легко расширяемый плагин для быстрого создания элегантных шрифтов с любой формой ввода текста.

Пример

Начните вводить текст в поле ниже, чтобы отобразить результаты ввода.

Использование bootstrap-typeahead.js

Вызовите typeahead через javascript:

$ ( '.typeahead' ). печатать вперед ()

Опции

Разметка

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

<input type = "text" data-provide = "typeahead" >  

Методы

.typeahead(параметры)

Инициализирует ввод с опережающим вводом.