Дар бораи модальхо

Васлкунаки модалии 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" > 
  <div class = "modal-header" > 
    <a class = "close" data-dississ = "modal" > × </a>  
    <h3> Сарлавҳаи модалӣ </h3>
  </div>
  <div class = "modal-body" > 
    <p> Як бадани хуб… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn btn-primary" > Тағиротро захира кунед </a>  
    <a href = "#" class = "btn" > Пӯшед </a>  
  </div>
</div>

Усулҳо

.modal(имконот)

Мундариҷаи шуморо ҳамчун модаль фаъол мекунад. Вариантҳои ихтиёриро қабул мекунад object.

$ ( '#myModal' ). модаль ({
  клавиатура : бардурӯғ 
})

.modal('гузариш')

Модалро дастӣ иваз мекунад.

$ ( '#myModal' ). модаль ( 'гузариш' )

.modal('шоу')

Модалро дастӣ мекушояд.

$ ( '#myModal' ). модаль ( 'намоиш' )

.modal('пинҳон')

Модалро дастӣ пинҳон мекунад.

$ ( '#myModal' ). модаль ( 'пинҳон' )

Ҳодисаҳо

Синфи модалии Bootstrap чанд ҳодисаро барои пайвастшавӣ ба функсияи модалӣ фош мекунад.

$ ( '#myModal' ). дар ( 'пинҳон' , функсия () {   
  // коре кунед…
})

Дар бораи афтандаҳо

Бо ин плагини оддӣ ба ҳама чизе дар Bootstrap менюҳои афтанда илова кунед. Bootstrap дорои дастгирии пурраи менюи афтанда дар навор, ҷадвалҳо ва доруҳо мебошад.

Мисолхо

Истинодҳои афтанда дар навор ва доруҳои зерро клик кунед, то афтандаҳоро санҷед.

• Пайванди муқаррарӣ
• Поёнафтода
  • Амал
  • Дигар амал
  • Дар ин ҷо чизи дигар
  • Пайванди ҷудошуда
• афтанда 2
  • Амал
  • Дигар амал
  • Дар ин ҷо чизи дигар
  • Пайванди ҷудошуда
• Раванди афтанда 3
  • Амал
  • Дигар амал
  • Дар ин ҷо чизи дигар
  • Пайванди ҷудошуда

Истифодаи bootstrap-dropdown.js

Ба афтандаҳо тавассути javascript занг занед:

$ ( '. dropdown-toggle' ). афтанда ()

Нишондиҳӣ

Барои зуд илова кардани функсияи афтанда ба ҳама гуна элемент танҳо илова кунед data-toggle="dropdown"ва ҳама гуна афтанда боotstrap дуруст ба таври худкор фаъол карда мешавад.

<ul class = "нав доруҳо" > 
  <li class = "active" ><a href = "#" > Пайванди муқаррарӣ </a></li>  
  <li class = "афтанда " id = "меню1" >  
    <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>

Усулҳо

$().афтанда()

Api барномавӣ барои фаъол кардани менюҳо барои навор ё паймоиши ҷадвалбандишуда.

Васлкунаки ScrollSpy барои ба таври худкор навсозии ҳадафҳои нав дар асоси мавқеи ҳаракат аст.

Намунаи навбар бо scrollspy

Майдони зерро ҳаракат кунед ва навсозии навигатсияро тамошо кунед. Зербандҳои афтанда низ таъкид карда мешаванд. Кӯшиш кун!

Истифодаи bootstrap-scrollspy.js

Ба scrollspy тавассути javascript занг занед:

$ ( '#навбар' ). scrollspy ()

Нишондиҳӣ

Барои ба осонӣ илова кардани рафтори scrollspy ба новбари болоии худ, танҳо data-spy="scroll"ба унсуре, ки мехоҳед ҷосусӣ кунед, илова кунед (аксаран ин бадан хоҳад буд).

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

Имконот

Ин плагин ҷадвали зуд, динамикӣ ва функсияи доруҳоро барои гузариш аз мундариҷаи маҳаллӣ илова мекунад.

Намунаи ҷадвалҳо

Барои гузаштан байни панелҳои пинҳон, ҳатто тавассути менюҳои афтанда, ҷадвалҳои зерро клик кунед.

• Хона
• Профил
• Поёнафтода
  • @fat
  • @mdo

Истифодаи bootstrap-tab.js

Ҷадвалҳои ҷадвалбандишавандаро тавассути JavaScript фаъол созед:

$ ( '#Варақаи ман' ). ҷадвал ( 'намоиш' )

Нишондиҳӣ

Шумо метавонед як ҷадвал ё новбари ҳабҳоро бидуни навиштани ягон JavaScript бо танҳо нишон data-toggle="tab"додан ё data-toggle="pill"дар элемент фаъол созед.

<ul class = "таббачаҳо" > 
  <li><a href = "#home" data-toggle = "tab" > Home </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Профил </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Паёмҳо </a></li>  
  <li><a href = "#ettings" data-toggle = "tab" > Танзимот </a></li>  
</ul>

Усулҳо

$().таб

Унсури ҷадвал ва контейнери мундариҷаро фаъол мекунад. Ҷадвал бояд ё "data-target" ё "href" дошта бошад, ки ба гиреҳи контейнер дар дом нигаронида шудааст.

<ul class = "таббачаҳо" > 
  <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 = "паёмҳо" > ... </div>  
  <div class = "tab-pane" id = "танзимот" > ... </div>  
</div>
 
<скрипт>
  $ ( функсия () {  
    $ ( '.tabs a: Last' ). ҷадвал ( 'намоиш' )
  })
</script>

Ҳодисаҳо

$ ( 'a[data-toggle="таб"]' ). дар ( 'нишон дода мешавад' , функсия ( e ) {   
  д . ҳадаф // ҷадвали фаъолшуда
  д . марбут ба ҳадаф // ҷадвали қаблӣ
})

Дар бораи Маслиҳатҳо

Аз плагини аълои jQuery.tipsy илҳом гирифта шудааст, ки аз ҷониби Ҷейсон Frame навишта шудааст; Маслиҳатҳои асбобҳо версияи навшуда мебошанд, ки ба тасвирҳо такя намекунанд, uss css3 барои аниматсияҳо ва атрибутҳо барои нигаҳдории унвонҳои маҳаллӣ.

Намунаи истифодаи Tooltips

Барои дидани маслиҳатҳои асбобҳо ба болои истинодҳои зер гузаред:

Истифодаи bootstrap-tooltip.js

Маслиҳати абзорро тавассути javascript фаъол кунед:

$ ( '#мисол' ). маслиҳати асбобҳо ( имконот )

Имконот

Нишондиҳӣ

Бо сабабҳои иҷроиш, Tooltip ва Popover data-apis интихоб шудаанд. Агар шумо хоҳед, ки онҳоро истифода баред, танҳо як варианти селекторро муайян кунед.

Усулҳо

$().маслиҳат(имконот)

Дастгиркунандаи маслиҳатро ба коллексияи элементҳо замима мекунад.

.tooltip('нишон')

Маслиҳати асбобҳои элементҳоро ошкор мекунад.

$ ( '#элемент' ). Маслиҳат ( 'намоиш' )

.tooltip('пинҳон')

Маслиҳати асбобҳои элементҳоро пинҳон мекунад.

$ ( '#элемент' ). маслиҳати асбобҳо ( 'пинҳон кардан' )

.tooltip('гузариш')

Маслиҳати асбобҳои элементҳоро иваз мекунад.

$ ( '#элемент' ). маслиҳати асбобҳо ( 'гузариш' )

Дар бораи popovers

Иловаи қабатҳои хурди мундариҷа, ба монанди онҳое, ки дар iPad, ба ҳама гуна унсурҳо барои ҷойгиркунии маълумоти дуюмдараҷа.

* Барои дохил кардани Tooltip талаб мекунад

Намунаи поповер

Тугмачаро ба болои тугма гузоред, то поповро фаъол созед.

Истифодаи bootstrap-popover.js

Поповҳоро тавассути JavaScript фаъол созед:

$ ( '#мисол' ). popover ( имконот )

Имконот

Нишондиҳӣ

Бо сабабҳои иҷроиш, Tooltip ва Popover data-apis интихоб шудаанд. Агар шумо хоҳед, ки онҳоро истифода баред, танҳо як варианти селекторро муайян кунед.

Усулҳо

$().popover(имконот)

Поповҳоро барои коллексияи элементҳо оғоз мекунад.

.popover('намоиш')

Элементҳои поповро ошкор мекунад.

$ ( '#элемент' ). popover ( 'намоиш' )

.popover('пинҳон')

Попвери элементҳоро пинҳон мекунад.

$ ( '#элемент' ). popover ( 'пинҳон кардан' )

.popover('гузариш')

Калиди элементҳоро иваз мекунад.

$ ( '#элемент' ). popover ( 'гузариш' )

Дар бораи огоҳиҳо

Васлкунаки ҳушдор як синфи хурдест барои илова кардани функсияҳои наздик ба огоҳиҳо.

Намунаҳои огоҳӣ

Васлкунаки огоҳкунӣ дар паёмҳои огоҳии муқаррарӣ кор мекунад ва паёмҳоро блок мекунад.

Истифодаи bootstrap-alerts.js

Қатъи огоҳиро тавассути javascript фаъол созед:

$ ( ".alert-message" ). огоҳӣ ()

Нишондиҳӣ

Танҳо data-dismiss="alert"ба тугмаи пӯшидаи худ илова кунед, то ба таври худкор функсияи наздики ҳушдор диҳад.

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

Усулҳо

$(). alert()

Ҳама огоҳиҳоро бо функсияҳои наздик фаро мегирад. Барои он ки ҳушдорҳои шумо ҳангоми басташавӣ фаъол шаванд, боварӣ ҳосил кунед, ки онҳо аллакай .fadeва .inсинфро ба онҳо татбиқ кардаанд.

.alert('пушидани')

Огоҳӣ мепӯшад.

$ ( ".alert-message" ). огоҳӣ ( 'наздик' )

Ҳодисаҳо

Синфи огоҳии 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 class = "btn" > Миёна </button> 
  <button class = "btn" > Рост </button> 
</div>
 
<!-- Илова кардани data-toggle="buttons-radio" барои иваз кардани услуби радио дар btn-group -->
<div class = "btn-group" data-toggle = "тугмаҳо-радио" >  
  <button class = "btn" > Чап </тугма> 
  <button class = "btn" > Миёна </button> 
  <button class = "btn" > Рост </button> 
</div>

Усулҳо

$().тугма('гузариш')

Ҳолати фишорро иваз мекунад. Ба btn намуди он медиҳад, ки он фаъол карда шудааст.

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

$().тугма('боркунӣ')

Ҳолати тугмаро ба боркунӣ муқаррар мекунад - тугмаро хомӯш мекунад ва матнро ба боркунии матн иваз мекунад. Матни боркунӣ бояд дар элементи тугма бо истифода аз атрибути data муайян карда шавад data-loading-text.

<button class = "btn" data-loading-text = "боркунии ашё..." > ... </button>   

$().тугма('reset')

Ҳолати тугмаро барқарор мекунад - матнро ба матни аслӣ иваз мекунад.

$().тугма(сатр)

Ҳолати тугмаро аз нав барқарор мекунад - матнро ба ҳама гуна ҳолати матни муайяншуда иваз мекунад.

<button class = "btn" data-complete-text = "ба охир расид!" > ... </тугма>   
<скрипт>
  $ ( '.btn' ). тугма ( 'пурра' )
</script>

Дар бораи

Барои ҷузъҳои ҷамъшаванда, ба монанди аккордеонҳо ва навигатсия, сабкҳои асосӣ ва дастгирии чандир гиред.

Мисол аккордеон

Бо истифода аз плагини фурӯпошӣ, мо як виҷети оддии услуби аккордеон сохтем:

Истифодаи bootstrap-collapse.js

Ба воситаи javascript фаъол созед:

$ ( ".colapse" ). фурӯпошӣ ()

Имконот

Нишондиҳӣ

Барои ба таври худкор таъин кардани назорати унсури пӯшидашаванда танҳо data-toggle="collapse"ва data-targetба элемент илова кунед. Аттрибут data-targetинтихобкунандаи css-ро барои татбиқи пошхӯрӣ қабул мекунад. Боварӣ ҳосил кунед, ки синфро collapseба унсури пӯшидашаванда илова кунед. Агар шумо хоҳед, ки он пешфарз кушода шавад, синфи иловагиро илова кунед in.

<button class = "btn btn-danger" data-toggle = " colapse " data-target = "#demo" >   
  соддаи пошхӯрда
</ тугма >
 
<div id = "demo" class = "colapse in" > … </div>  

Усулҳо

.collapse(имконот)

Мундариҷаи шуморо ҳамчун унсури пӯшидашаванда фаъол мекунад. Вариантҳои ихтиёриро қабул мекунад object.

$ ( '#myCollapsible' ). фурӯпошӣ ({
  иваз кардан : бардурӯғ 
})

.collapse('гузариш')

Элементи ҷамъшавандаро ба нишон ё пинҳон иваз мекунад.

.collapse('намоиш')

Элементи ҷамъшавандаро нишон медиҳад.

.collapse('пинҳон')

Элементи пӯшидашавандаро пинҳон мекунад.

Ҳодисаҳо

Синфи пошхӯрии Bootstrap чанд ҳодисаро барои пайвастшавӣ ба функсияи харобшавӣ фош мекунад.

$ ( '#myCollapsible' ). дар ( 'пинҳон' , функсия () {   
  // коре кунед…
})

Дар бораи

Васлкунаки умумӣ барои велосипедронӣ тавассути элементҳо. Давраи шодравон.

Мисоли карусель

Слайд-шоуро дар зер тамошо кунед.

Аввалин нишони ангора

Дар ин ҷо хеле осон аст, дар он ҷо осонтар мешавад. Donec id elit non mi porta gravida ва дар вақти дилхоҳ. 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 class = "карусель" > 
  <!-- Маводҳои каруселӣ -->
  <div class = "carousel-inner" > 
    ...
  </div>
  <!-- Карусел нав -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "пештар" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Усулҳо

.карусел(имконот)

Каруселро бо имконоти ихтиёрӣ objectоғоз мекунад ва дар байни ашё давр заданро оғоз мекунад.

$ ( '.myCarousel' ). карусель ({
  Фосила : 2000 
})

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

Дар байни ҷузъҳои карусел аз чап ба рост давр мезанад.

.карусел('танаффус')

Каруселро аз гардиши байни ашё бозмедорад.

.карусель (рақам)

Каруселро ба чаҳорчӯбаи мушаххас давр мезанад (дар асоси 0, монанд ба массив).

.карусел('қаблӣ')

Давра ба банди қаблӣ.

.карусел('оянда')

Давра ба банди оянда.

Ҳодисаҳо

Синфи модалии Bootstrap чанд ҳодисаро барои пайвастшавӣ ба функсияи модалӣ фош мекунад.

Дар бораи

Васлкунаки асосӣ ва ба осонӣ васеъшуда барои зуд эҷод кардани сарлавҳаҳои шево бо ҳама гуна вуруди матн.

Мисол

Барои нишон додани натиҷаҳои пешакии чоп дар майдони зер чоп карданро оғоз кунед.

Истифодаи bootstrap-typeahead.js

Тавассути javascript ба чопгар занг занед:

$ ( '.typeahead' ). пешаки ()

Имконот

Нишондиҳӣ

Барои бақайдгирии унсури дорои функсияи чопӣ атрибутҳои маълумот илова кунед.

< навъи вуруд = "матн" маълумот-таъмини = "typeahead" >  

Усулҳо

.typeahead(имконот)

Воридро бо сарлавҳаи чопӣ оғоз мекунад.