Относно модалите

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

Статичен пример

По-долу е статично изобразен модал.

Демо на живо

Превключете модал чрез javascript, като щракнете върху бутона по-долу. Той ще се плъзне надолу и ще изчезне от горната част на страницата.

Използване на bootstrap-modal

Извикайте модала чрез javascript:

$ ( '#myModal' ). модален ( опции )

Настроики

Маркиране

Можете лесно да активирате модали на вашата страница, без да се налага да пишете нито един ред javascript. Просто задайте data-toggle="modal"елемент на контролер с data-target="#foo"или href="#foo", който съответства на id на модален елемент, и когато щракнете, той ще стартира вашия модал.

Освен това, за да добавите опции към вашия модален екземпляр, просто ги включете като допълнителни атрибути на данни или в контролния елемент, или в самото модално маркиране.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Стартиране на Modal </a>    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3> Модално заглавие </h3>
  </div>
  <div class = "modal-body" > 
    <p> Едно хубаво тяло... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Затваряне </a>   
    <a href = "#" class = "btn btn-primary" > Запазете промените </a>  
  </div>
</div>

Методи

.modal(опции)

Активира вашето съдържание като модално. Приема опции по избор object.

$ ( '#myModal' ). модален ({
  клавиатура : невярно 
})

.modal('превключване')

Ръчно превключва модал.

$ ( '#myModal' ). модален ( 'превключване' )

.modal('покажи')

Ръчно отваря модал.

$ ( '#myModal' ). модален ( 'покажи' )

.modal('скрий')

Ръчно скрива модал.

$ ( '#myModal' ). модален ( 'скрий' )

събития

Модалният клас на Bootstrap разкрива няколко събития за свързване с модална функционалност.

$ ( '#myModal' ). on ( 'hidden' , function () {   
  // направи нещо…
})

Относно падащите менюта

Добавете падащи менюта към почти всичко в 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-pills" > 
  <li class = "active" ><a href = "#" > Редовна връзка </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Падащо меню
      <b class = "caret" ></b> 
    </a>
    <ul class = "падащо меню" > 
      <li><a href = "#" > Действие </a></li> 
      <li><a href = "#" > Друго действие </a></li> 
      <li><a href = "#" > Тук има още нещо </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Отделна връзка </a></li> 
    </ul>
  </li>
  ...
</ul>

За да запазите URL адресите непокътнати, използвайте data-targetатрибута вместо href="#".

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Падащо меню
      <b class = "caret" ></b> 
    </a>
    <ul class = "падащо меню" > 
      ...
    </ul>
  </li>
</ul>

Методи

$().dropdown()

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

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

Примерна навигационна лента със scrollspy

Превъртете областта по-долу и гледайте актуализацията на навигацията. Поделементите от падащото меню също ще бъдат маркирани. Опитай!

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

Обадете се на scrollspy чрез javascript:

$ ( '#navbar' ). scrollspy ()

Маркиране

За да добавите лесно scrollspy поведение към вашата навигация в горната лента, просто добавете data-spy="scroll"към елемента, който искате да шпионирате (най-често това е тялото).

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

Методи

.scrollspy('refresh')

Когато използвате scrollspy във връзка с добавяне или премахване на елементи от DOM, ще трябва да извикате метода за опресняване по следния начин:

$ ( '[data-spy="scroll"]' ). всяка ( функция () {  
  var $spy = $ ( това ). scrollspy ( 'refresh' )
});

Настроики

събития

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

Примерни раздели

Щракнете върху разделите по-долу, за да превключвате между скрити панели, дори чрез падащи менюта.

• У дома
• Профил
• Падащо меню
  • @fat
  • @mdo

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

Активиране на раздели с възможност за разделяне чрез javascript (всеки раздел трябва да се активира индивидуално):

$ ( '#myTab a' ). щракнете върху ( функция ( e ) {  
  д . предотврати по подразбиране ();
  $ ( това ). раздел ( 'покажи' );
})

Можете да активирате отделни раздели по няколко начина:

$ ( '#myTab a[href="#profile"]' ). раздел ( 'покажи' ); // Изберете раздел по име 
$ ( '#myTab a:first' ). раздел ( 'покажи' ); // Изберете първия раздел 
$ ( '#myTab a:last' ). раздел ( 'покажи' ); // Изберете последния раздел 
$ ( '#myTab li:eq(2) a' ). раздел ( 'покажи' ); // Изберете трети раздел (0-индексиран) 

Маркиране

Можете да активирате навигация в раздел или хапче, без да пишете javascript, като просто посочите data-toggle="tab"или data-toggle="pill"върху елемент. Добавянето на класове navи nav-tabsкъм раздела ulще приложи стила на раздела за зареждане.

<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" id = "myTab" >  
  <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 class = "tab-content" > 
  <div class = "tab-pane active" 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>
 
<скрипт>
  $ ( функция () {  
    $ ( '#myTab a:last' ). раздел ( 'покажи' );
  })
</script>

събития

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

Относно подсказките

Вдъхновен от отличния плъгин jQuery.tipsy, написан от Jason Frame; Подсказките са актуализирана версия, която не разчита на изображения, използва css3 за анимации и атрибути на данни за локално съхранение на заглавия.

Примерно използване на подсказки

Задръжте курсора на мишката над връзките по-долу, за да видите подсказки:

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

Задействайте подсказката чрез javascript:

$ ( '#example' ). подсказка ( опции )

Настроики

Маркиране

От съображения за производителност, подсказката и Popover data-apis са включени. Ако искате да ги използвате, просто посочете опция за избор.

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

Методи

$().tooltip(опции)

Прикрепя манипулатор на подсказка към колекция от елементи.

.tooltip('покажи')

Разкрива подсказка на елемент.

$ ( '#елемент' ). подсказка ( 'покажи' )

.tooltip('скрий')

Скрива подсказка на елемент.

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

.tooltip('превключване')

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

$ ( '#елемент' ). подсказка ( 'превключване' )

Относно поповите

Добавете малки наслагвания на съдържание, като тези на iPad, към всеки елемент за съхраняване на вторична информация.

* Изисква да бъде включена подсказка

Пример за изскачане на курсора на мишката

Задръжте курсора на мишката над бутона, за да активирате изскачащия прозорец.

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

Активиране на изскачащи прозорци чрез javascript:

$ ( '#example' ). popover ( опции )

Настроики

Маркиране

От съображения за производителност, подсказката и Popover data-apis са включени. Ако искате да ги използвате, просто посочете опция за избор.

Методи

$().popover(опции)

Инициализира изскачащи прозорци за колекция от елементи.

.popover('покажи')

Разкрива изскачащ прозорец на елементите.

$ ( '#елемент' ). popover ( 'покажи' )

.popover('скрий')

Скрива изскачащ прозорец на елементи.

$ ( '#елемент' ). popover ( 'скрий' )

.popover('превключване')

Превключва изскачащ прозорец на елементи.

$ ( '#елемент' ). popover ( 'превключване' )

Относно сигналите

Приставката за предупреждение е малък клас за добавяне на близка функционалност към предупрежденията.

Примерни сигнали

Плъгинът за предупреждения работи с обикновени предупредителни съобщения и блокира съобщения.

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

Активирайте отхвърлянето на предупреждение чрез javascript:

$ ( ".alert" ). предупреждение ()

Маркиране

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

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

Методи

$().alert()

Обгръща всички сигнали с близка функционалност. За да анимирате вашите сигнали, когато са затворени, уверете се, че към тях вече е приложен клас .fadeи ..in

.alert('close')

Затваря предупреждение.

$ ( ".alert" ). предупреждение ( 'близо' )

събития

Класът за предупреждение на Bootstrap разкрива няколко събития за свързване към функционалността за предупреждение.

$ ( '#my-alert' ). свързване ( 'затворено' , функция () {   
  // направи нещо…
})

относно

Правете повече с бутоните. Състояния на бутоните за управление или създаване на групи от бутони за повече компоненти като ленти с инструменти.

Примерни употреби

Използвайте приставката за бутони за състояния и превключвания.

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

Активиране на бутони чрез javascript:

$ ( '.nav-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 = "buttons-radio" >  
  <button class = "btn" > Ляво </button> 
  <button class = "btn" > Среден </button> 
  <button class = "btn" > Надясно </button> 
</div>

Методи

$().button('превключване')

Превключва състоянието на натискане. Придава на бутона вид, че е активиран.

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

$().button('зареждане')

Задава състоянието на бутона на зареждане - деактивира бутона и разменя текста на текст за зареждане. Текстът за зареждане трябва да бъде дефиниран в елемента бутон с помощта на атрибута data data-loading-text.

<button class = "btn" data-loading-text = "loading stuff..." > ... </button>   

$().button('reset')

Нулира състоянието на бутона - заменя текста с оригиналния текст.

$().button(низ)

Нулира състоянието на бутона - сменя текста към произволно определено от данните състояние на текст.

<button class = "btn" data-complete-text = "finished!" > ... </button>   
<скрипт>
  $ ( '.btn' ). бутон ( „завършен“ )
</script>

относно

Вземете основни стилове и гъвкава поддръжка за сгъваеми компоненти като акордеони и навигация.

* Изисква приставката Transitions да бъде включена.

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

Използвайки плъгина за свиване, създадохме проста джаджа в стил акордеон:

Използване на 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" >   
  прост сгъваем
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

Методи

.collapse(опции)

Активира вашето съдържание като сгъваем елемент. Приема опции по избор object.

$ ( '#myCollapsible' ). свиване ({
  превключване : невярно 
})

.collapse('превключване')

Превключва сгъваем елемент на показан или скрит.

.collapse('покажи')

Показва сгъваем елемент.

.collapse('скрий')

Скрива сгъваем елемент.

събития

Класът за свиване на Bootstrap разкрива няколко събития за свързване към функционалността за свиване.

$ ( '#myCollapsible' ). on ( 'hidden' , function () {   
  // направи нещо…
})

относно

Общ плъгин за циклично преминаване през елементи. Въртележка.

Примерна въртележка

Гледайте слайдшоуто по-долу.

Първи етикет с миниатюри

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.

Втори етикет с миниатюра

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.

Трети етикет на миниатюра

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:

$ ( '.carousel' ). въртележка ()

Настроики

Маркиране

Атрибутите на данните се използват за предишните и следващите контроли. Вижте примерното маркиране по-долу.

<div id = "myCarousel" class = "carousel slide" >  
  <!-- Елементи от въртележка -->
  <div class = "carousel-inner" > 
    <div class = "active item" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </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>

Методи

.carousel (опции)

Инициализира въртележката с незадължителни опции objectи започва да преминава през елементи.

$ ( '.carousel' ). въртележка ({
  интервал : 2000 
})

.carousel('цикъл')

Преминава през елементите на въртележката отляво надясно.

.carousel('пауза')

Спира въртележката да се движи през елементи.

.carousel(номер)

Цикълира въртележката до конкретен кадър (базиран на 0, подобно на масив).

.carousel('предишна')

Цикли към предишния елемент.

.carousel('следващ')

Преминава към следващия елемент.

събития

Carousel класът на Bootstrap разкрива две събития за свързване към функционалността на въртележката.

относно

Основен, лесно разширим плъгин за бързо създаване на елегантни текстови надписи с всякаква форма на въвеждане на текст.

Пример

Започнете да пишете в полето по-долу, за да покажете резултатите от въвеждането напред.

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

Извикайте typeahead чрез javascript:

$ ( '.typeahead' ). набиране напред ()

Настроики

Маркиране

Добавете атрибути на данни, за да регистрирате елемент с функция за изпреварване.

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

Методи

.typeahead(опции)

Инициализира въвеждане с предварително въвеждане.