За модали

Рационализиран, но флексибилен, го прифаќа традиционалниот модален приклучок за Javascript со само минималната потребна функционалност и паметни стандардни поставки.

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

Подолу е статички прикажан модал.

Демо во живо

Вклучете модал преку Javascript со кликнување на копчето подолу. Ќе се лизне надолу и ќе избледи од врвот на страницата.

Користење на bootstrap-modal

Повикајте го модалот преку Javascript:

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

Опции

Означување

Можете лесно да активирате модали на вашата страница без да треба да напишете ниту една линија Javascript. Само поставете data-toggle="modal"го елементот на контролорот со data-target="#foo"или href="#foo"што одговара на ID на модален елемент, и кога ќе се кликне, тој ќе го стартува вашиот модал.

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

<a class = "btn" data-toggle = "modal" href = "#myModal" > Стартувај модал </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 = „модално тело“ > 
    <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('toggle')

Рачно менува модал.

$ ( „#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-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 = „разделник“ ></li> 
      <li><a href = "#" > Одделена врска </a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "nav nav-pills" > 
  <li class = „паѓачко долу“ > 
    <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 ()

Означување

За лесно додавање на однесувањето на лизгачот во навигацијата на горната лента, само додајте data-spy="scroll"го елементот што сакате да го шпионирате (најчесто ова е телото).

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

Методи

.scrollspy ('освежи')

Кога користите scrollspy во врска со додавање или отстранување на елементи од DOM, ќе треба да го повикате методот на освежување вака:

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

Опции

Настани

Овој приклучок додава брза, динамична функционалност на јазичиња и таблети за транзиција низ локална содржина.

Пример јазичиња

Кликнете на јазичињата подолу за да се префрлате помеѓу скриените окна, дури и преку паѓачкото мени.

• Дома
• Профил
• Спуштање
  • @fat
  • @mdo

Користење на bootstrap-tab.js

Овозможете јазичиња со јазичиња преку Javascript (секоја картичка треба да се активира поединечно):

$ ( '#myTab a' ). кликнете ( функција ( д ) {  
  д . preventDefault ();
  $ ( ова ). табот ( 'покажи' );
})

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

$ ( '#myTab a[href="#профил"]' ). табот ( 'покажи' ); // Изберете јазиче по име 
$ ( '#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>

Методи

$().таб

Активира елемент на картичката и контејнер за содржина. Јазичето треба да има или 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 = „таб-содржина“ > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "пораки" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<скрипта>
  $ ( функција () {  
    $ ( '#myTab a:last' ). табот ( 'покажи' );
  })
</script>

Настани

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

За совети за алатки

Инспириран од одличниот приклучок jQuery.tipsy напишан од Џејсон Фрејм; Советите за алатки се ажурирана верзија, која не се потпира на слики, користи css3 за анимации и атрибути на податоци за локално складирање на наслови.

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

Лебдете над линковите подолу за да ги видите советите за алатки:

Користење на bootstrap-tooltip.js

Активирајте го советот за алатка преку Javascript:

$ ( „#пример“ ). совет за алатки ( опции )

Опции

Означување

Од причини за изведба, се избираат „Tooltip“ и „Popover data-apis“. Доколку сакате да ги користите, само наведете опција за избирање.

<a href = "#" rel = "tooltip" title = "прв совет за алатка" > лебди над мене </a>   

Методи

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

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

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

Го открива советот за алатка на елементот.

$ ( „#елемент“ ). совет за алатка ( „покажи“ )

.tooltip('скриј')

Го крие советот за алатка за елемент.

$ ( „#елемент“ ). совет за алатка ( „скриј“ )

.tooltip('toggle')

Го исклучува советот за алатка на елементот.

$ ( „#елемент“ ). совет за алатки ( „прекинувај“ )

За поповерите

Додајте мали преклопувања на содржината, како оние на iPad, на кој било елемент за сместување секундарни информации.

* Потребно е да се вклучи совет за алатки

Пример лебди поповер

Лебдите над копчето за да го активирате поповерот.

Користење на bootstrap-popover.js

Овозможете поповери преку Javascript:

$ ( „#пример“ ). поповер ( опции )

Опции

Означување

Од причини за изведба, се избираат „Tooltip“ и „Popover data-apis“. Доколку сакате да ги користите, само наведете опција за избирање.

Методи

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

Иницијализира поповери за колекција на елементи.

.popover ('шоу')

Открива елементи поповер.

$ ( „#елемент“ ). поповер ( „шоу“ )

.popover ('скриј')

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

$ ( „#елемент“ ). поповер ( „скриј“ )

.popover ('toggle')

Вклучува поповер на елементи.

$ ( „#елемент“ ). поповер ( „префрлање“ )

За предупредувањата

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

Примери за предупредувања

Приклучокот за предупредувања работи на редовни пораки за предупредување и блокира пораки.

Користење на bootstrap-alert.js

Овозможете отфрлање на предупредување преку Javascript:

$ ( ".alert" ). алармирање ()

Означување

Само додадете data-dismiss="alert"го копчето за затворање за автоматски да дадете функционалност за затворање на предупредување.

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

Методи

$().alert()

Ги обвива сите предупредувања со затворена функционалност. За да може вашите предупредувања да се анимираат кога се затворени, проверете дали ја имаат веќе применето класата и на нив .fade..in

.alert ('затвори')

Затвора предупредување.

$ ( ".alert" ). предупредување ( „затвори“ )

Настани

Класата за предупредување на Bootstrap изложува неколку настани за приклучување на функционалноста за предупредување.

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

За

Направете повеќе со копчињата. Контролирајте ги состојбите на копчињата или креирајте групи на копчиња за повеќе компоненти како што се алатниците.

Примери за употреба

Користете го приклучокот за копчиња за состојби и менувачи.

Користење на 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('toggle')

Ја вклучува состојбата на туркање. На копчето му дава изглед дека е активирано.

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

$().button('се вчитува')

Ја поставува состојбата на копчето на вчитување - го оневозможува копчето и го заменува текстот со текстот што се вчитува. Вчитувањето на текстот треба да се дефинира на елементот на копчето користејќи го атрибутот податоци data-loading-text.

<button class = "btn" data-loading-text = "вчитувам работи..." > ... </button>   

$().button('ресетирање')

Ресетира состојбата на копчето - го заменува текстот со оригиналниот текст.

$().копче(низа)

Ресетира состојбата на копчето - го заменува текстот во која било состојба на текст дефинирана со податоци.

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

За

Добијте основни стилови и флексибилна поддршка за склопливи компоненти како хармоника и навигација.

* Потребно е да се вклучи приклучокот Transitions.

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

Користејќи го приклучокот за колапс, изградивме едноставен додаток во стилот на хармоника:

Користење на bootstrap-collapse.js

Овозможи преку Javascript:

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

Опции

Означување

Само додајте data-toggle="collapse"и a 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 ('toggle')

Вклучува склопувачки елемент на прикажан или скриен.

.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.

Втора ознака за сликички

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:

$ ( „.рингишпил“ ). рингишпил ()

Опции

Означување

Атрибутите на податоци се користат за претходните и следните контроли. Проверете го примерот за обележување подолу.

<div id = "myCarousel" class = "слајд на рингишпил" >  
  <!-- Ставки од рингишпил -->
  <div class = „внатрешна рингишпил“ > 
    <div class = "активна ставка" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- рингишпил -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "претходна" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "следно" > › </a>   
</div>

Методи

.рингишпил (опции)

Ја иницијализира рингишпилот со изборни опции objectи почнува да се движи со велосипед низ предмети.

$ ( „.рингишпил“ ). рингишпил ({
  интервал : 2000 
})

.рингишпил ('циклус')

Вози низ ставките на рингишпил од лево кон десно.

.рингишпил ('пауза')

Го спречува рингишпилот да се движи со велосипед низ предмети.

.рингишпил (број)

Циклира рингишпил на одредена рамка (заснована на 0, слично на низа).

.рингишпил ('претходна')

Циклуси до претходната ставка.

.рингишпил ('следно')

Циклуси до следната ставка.

Настани

Класата на рингишпил на Bootstrap изложува два настани за приклучување во функционалноста на рингишпилот.

За

Основен, лесно проширен приклучок за брзо креирање елегантни печатени глави со внесување текст во која било форма.

Пример

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

Користење на bootstrap-typeahead.js

Јавете се на типката преку javascript:

$ ( '.typeahead' ). типкање ()

Опции

Означување

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

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

Методи

.машина (опции)

Иницијализира влез со типка.