Пра мадальныя

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

Статычны прыклад

Ніжэй прыведзены статычна візуалізаваны мадальны выгляд.

Жывая дэманстрацыя

Пераключыце мадальны рэжым праз javascript, націснуўшы кнопку ніжэй. Ён будзе слізгаць уніз і знікаць з верхняй часткі старонкі.

Выкарыстанне bootstrap-modal

Выклік мадальнага праз javascript:

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

Параметры

Разметка

Вы можаце лёгка актываваць мадыфікацыі на сваёй старонцы без неабходнасці пісаць ніводны радок JavaScript. Проста ўсталюйце data-toggle="modal"элемент кантролера з data-target="#foo"або href="#foo", які адпавядае ідэнтыфікатару мадальнага элемента, і пры націску ён запусціць ваш мадальны элемент.

Акрамя таго, каб дадаць параметры ў свой мадальны асобнік, проста ўключыце іх у якасці дадатковых атрыбутаў даных альбо ў элемент кіравання, альбо ў саму мадальную разметку.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Запусціць Modal </a>    

<div class = "modal " id = "myModal" >  
  <div class = "modal-header" > 
    <a class = "close" data-dismiss = "modal" > × </a>  
    <h3> Мадальны загаловак </h3>
  </div>
  <div class = "modal-body" > 
    <p> Адно цудоўнае цела… </p>
  </div>
  <div class = "modal-footer" > 
    <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' ). 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 = "dropdown-menu" > 
      <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>

Метады

$().dropdown()

Праграмны API для актывацыі меню для дадзенай панэлі навігацыі або навігацыі з укладкамі.

Плагін ScrollSpy прызначаны для аўтаматычнага абнаўлення мэт навігацыі на аснове пазіцыі пракруткі.

Прыклад панэлі навігацыі з ScrollSpy

Пракруціце вобласць ніжэй і паглядзіце абнаўленне навігацыі. Выпадальныя падпункты таксама будуць вылучаны. Паспрабуйце!

Выкарыстанне bootstrap-scrollspy.js

Выклік ScrollSpy праз javascript:

$ ( '#navbar' ). ScrollSpy ()

Разметка

Каб лёгка дадаць шпіёнскія паводзіны для вашай верхняй панэлі навігацыі, проста дадайце 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>

Метады

$().таб

Актывуе элемент укладкі і кантэйнер змесціва. Укладка павінна мець або `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 class = "tab-content" > 
  <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:last' ). укладка ( 'паказаць' )
  })
</script>

Падзеі

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

Пра падказкі

Натхнёны выдатным убудовай jQuery.tipsy, напісаным Джэйсанам Фрэймам; Усплывальныя падказкі - гэта абноўленая версія, якая не абапіраецца на выявы, выкарыстоўвае css3 для анімацыі і атрыбуты даных для лакальнага захоўвання загалоўкаў.

Прыклад выкарыстання падказак

Навядзіце курсор на спасылкі ніжэй, каб убачыць падказкі:

Выкарыстанне bootstrap-tooltip.js

Запусціць падказку праз javascript:

$ ( '#прыклад' ). падказка ( варыянты )

Параметры

Разметка

З меркаванняў прадукцыйнасці, Tooltip і Popover data-apis даступныя. Калі вы жадаеце іх выкарыстоўваць, проста ўкажыце опцыю выбару.

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

Метады

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

Далучае апрацоўшчык падказкі да калекцыі элементаў.

.tooltip('паказаць')

Адкрывае падказку элемента.

$ ( '#элемент' ). падказка ( 'паказаць' )

.tooltip('схаваць')

Хавае падказку элемента.

$ ( '#элемент' ). падказка ( 'схаваць' )

.tooltip('пераключыць')

Пераключае падказку элемента.

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

Пра паповеры

Дадайце невялікія накладкі змесціва, напрыклад, на iPad, да любога элемента для размяшчэння другаснай інфармацыі.

* Патрабуецца ўключэнне падказкі

Прыклад усплывальнага вобраза

Навядзіце курсор на кнопку, каб выклікаць усплывальнае акно.

Выкарыстанне bootstrap-popover.js

Уключыць усплывальныя вокны праз javascript:

$ ( '#прыклад' ). повер ( варыянты )

Параметры

Разметка

З меркаванняў прадукцыйнасці, Tooltip і 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>   

Метады

$().апавяшчэнне()

Абгортвае ўсе абвесткі з блізкай функцыянальнасцю. Каб вашы абвесткі аніміраваліся пры закрыцці, пераканайцеся, што да іх ужо прыменены клас .fadeі ..in

.alert('зачыніць')

Закрывае абвестку.

$ ( ".alert" ). абвестка ( 'блізка' )

Падзеі

Клас папярэджання Bootstrap паказвае некалькі падзей для падключэння да функцыі папярэджання.

$ ( '#my-alert' ). bind ( 'закрыты' , функцыя () {   
  // зрабіць нешта...
})

Аб

Рабіце больш з кнопкамі. Станы кнопак кіравання або стварэнне груп кнопак для дадатковых кампанентаў, такіх як панэлі інструментаў.

Прыклад выкарыстання

Выкарыстоўвайце плагін кнопак для станаў і пераключэнняў.

Выкарыстанне 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 = "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('скід')

Скідае стан кнопкі - мяняе тэкст на зыходны тэкст.

$().кнопка(радок)

Скідае стан кнопкі - мяняе тэкст на любы тэкст, вызначаны дадзенымі.

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

Аб

Атрымайце базавыя стылі і гнуткую падтрымку складаных кампанентаў, такіх як акардэоны і навігацыя.

Прыклад акардэон

Выкарыстоўваючы плагін згортвання, мы стварылі просты віджэт у стылі акардэона:

Выкарыстанне 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" >  
  <!-- Прадметы каруселі -->
  <div class = "carousel-inner" > 
    <div class = "актыўны элемент" > … </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('далей')

Пераход да наступнага элемента.

Падзеі

Клас каруселі Bootstrap паказвае дзве падзеі для падлучэння да функцыянальнасці каруселі.

Аб

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

Прыклад

Пачніце друкаваць у полі ніжэй, каб паказаць вынікі ўводу з апярэджаннем.

Выкарыстанне bootstrap-typeahead.js

Выклічце загадзя праз javascript:

$ ( '.typeahead' ). уперад ()

Параметры

Разметка

Дадайце атрыбуты дадзеных, каб зарэгістраваць элемент з функцыяй аператыўнага ўводу.

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

Метады

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

Ініцыялізуе ўвод з апярэджаннем.