Инфиродӣ ё ҷамъоварӣ

Плагинҳо метавонанд ба таври инфиродӣ дохил карда шаванд (гарчанде ки баъзеҳо вобастагии зарурӣ доранд) ё ҳама якбора. Ҳам bootstrap.js ва ҳам bootstrap.min.js дорои ҳама плагинҳо дар як файл мебошанд.

Аттрибутҳои маълумот

Шумо метавонед ҳамаи плагинҳои Bootstrap-ро танҳо тавассути API-и аломатгузорӣ бидуни навиштани як сатри JavaScript истифода баред. Ин API дараҷаи якуми Bootstrap аст ва ҳангоми истифодаи плагин бояд аввалиндараҷаи шумо бошад.

Гуфта мешавад, ки дар баъзе ҳолатҳо хомӯш кардани ин функсия матлуб аст. Аз ин рӯ, мо инчунин қобилияти ғайрифаъол кардани атрибути додаҳои API-ро тавассути қатъ кардани ҳама рӯйдодҳо дар фазои номи бадан бо `'data-api'' таъмин мекунем. Ин чунин менамояд:

$ ( 'бадан' ). хомӯш ( '.data-api' )

Интихобан, барои ҳадафи як плагини мушаххас, танҳо номи плагинро ҳамчун фазои ном дар якҷоягӣ бо фазои номи data-api дохил кунед:

$ ( 'бадан' ). хомӯш ( '.alert.data-api' )

API-и барномавӣ

Мо инчунин боварӣ дорем, ки шумо бояд ҳамаи плагинҳои Bootstrap-ро танҳо тавассути API JavaScript истифода баред. Ҳама API-ҳои ҷамъиятӣ усулҳои ягона ва занҷирӣ мебошанд ва коллексияи мувофиқи амалро бармегардонанд.

$ ( ".btn.danger" ). тугма ( "гузариш" ). addClass ( "фарбеҳ" )

Ҳама усулҳо бояд объекти опсияҳои ихтиёрӣ, сатре, ки усули мушаххасро ҳадаф қарор медиҳанд ё ҳеҷ чиз (ки плагинро бо рафтори пешфарз оғоз мекунад) қабул кунанд:

$ ( "#myModal" ). modal () // бо пешфарз оғоз карда шуд                       
$ ( "#myModal" ). modal ({ клавиатура : false }) // бе клавиатура оғоз карда шуд     
$ ( "#myModal" ). modal ( 'show' ) // намоишро фавран оғоз мекунад ва даъват мекунад                

Ҳар як плагин инчунин конструктори хоми худро дар моликияти 'Constructor' фош мекунад: $.fn.popover.Constructor. Агар шумо хоҳед, ки як мисоли мушаххаси плагинро ба даст оред, онро мустақиман аз элемент дарёфт кунед: $('[rel=popover]').data('popover').

Не низоъ

Баъзан лозим меояд, ки плагинҳои Bootstrap-ро бо дигар чаҳорчӯбаҳои UI истифода баред. Дар ин шароит, бархӯрдҳои фазои номҳо баъзан рух дода метавонанд. Агар ин рӯй диҳад, шумо метавонед .noConflictба плагин занг занед, ки мехоҳед арзиши онро баргардонед.

var bootstrapButton = $ . fn . тугмаи . noConflict () // баргардонидани $.fn.button ба арзиши қаблан таъиншуда 
$ . fn . bootstrapBtn = bootstrapButton             // Додани $().bootstrapBtn вазифаи пурборкунандаро

Ҳодисаҳо

Bootstrap рӯйдодҳои фармоиширо барои аксари амалҳои беназири плагин таъмин мекунад. Одатан, инҳо дар шакли пасванд ва замони гузашта меоянд - дар он ҷо масдар (масалан show) дар оғози ҳодиса оғоз мешавад ва шакли сифати гузаштаи он (масалан shown) дар анҷоми амал ангеза мешавад.

Ҳама рӯйдодҳои инфинитивӣ функсияи preventDefault-ро таъмин мекунанд. Ин имкон медиҳад, ки иҷрои амалро пеш аз оғози он қатъ кунед.

$ ( '#myModal' ). дар ( 'намоиш' , функсия ( e ) {   
    агар (! маълумот ) баргардад e . preventDefault () // намоиши модальро бозмедорад   
})

Дар бораи гузариш

Барои эффектҳои оддии гузариш, bootstrap-transition.js-ро дар баробари дигар файлҳои JS дохил кунед. Агар шумо bootstrap.js -и тартибдодашуда (ё хурдкардашуда) -ро истифода баред , лозим нест, ки онро дохил кунед - он аллакай мавҷуд аст.

Ҳолатҳоро истифода баред

Якчанд мисоли плагини гузариш:

• Лағжиш ё пажмурда дар модальҳо
• Хомӯш кардани ҷадвалҳо
• Хомӯш кардани огоҳиҳо
• Панелҳои каруселии слайд

Мисолхо

Модалҳо соддашуда, вале чандир, дархостҳои муколама бо ҳадди ақали функсияҳои зарурӣ ва пешфарзҳои оқилона мебошанд.

Намунаи статикӣ

Модали намоишшуда бо сарлавҳа, бадан ва маҷмӯи амалҳо дар поён.

<div class = "модалӣ пажмурда мешавад" > 
  <div class = "modal-header" > 
    < навъи тугма = "тугма" синфи = "пушидани" додаҳо-азбаст = "modal" aria-пинҳон = "ҳақиқӣ" > × </ тугма >    
    <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>

Намоиши зинда

Модалро тавассути JavaScript бо пахш кардани тугмаи зер иваз кунед. Он аз болои саҳифа ба поён ҳаракат мекунад ва пажмурда мешавад.

<!-- Тугмаи триггери модаль -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Оғози намоиши модаль </a>    
 
<!-- Модал -->
<div id = "myModal" синфи = "паҳншавии модалӣ" tabindex = "-1" нақш = "диалог" aria-labelledby = "myModalLabel" aria-hidden = "ҳақиқӣ" >      
  <div class = "modal-header" > 
    < навъи тугма = "тугма" синф = "пушидани" data-dississ = "modal" aria-hidden = "ҳақиқӣ" > × </button>    
    <h3 id = "myModalLabel" > Сарлавҳаи модалӣ </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Як бадани хуб… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data- dississ = "modal" aria-hidden = "true" > Пӯшидан </тугма>   
    <button class = "btn btn-primary" > Захираи тағирот </button> 
  </div>
</div>

Истифода

Тавассути атрибутҳои додаҳо

Модалро бе навиштани JavaScript фаъол созед. Дар data-toggle="modal"як унсури контроллер, ба монанди тугма, дар якҷоягӣ бо як data-target="#foo"ё href="#foo"ҳадафи модали мушаххас барои иваз кардан насб кунед.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Модалро оғоз кунед </button>   

Тавассути JavaScript

Модалро бо ID myModalбо як сатри JavaScript занг занед:

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

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-монанди замима кунед data-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Усулҳо

.modal(имконот)

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

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

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

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

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

.modal('шоу')

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

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

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

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

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

Ҳодисаҳо

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

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

Мисолхо

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

Дар дохили навор

Дар дохили ҷадвалҳо

Истифода

Тавассути атрибутҳои додаҳо

Барои data-toggle="dropdown"иваз кардани афтанда ба пайванд ё тугма илова кунед.

<div class = "афтанда" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Триггери афтанда </a>   
  <ul class = "Менюи афтанда" нақши = "меню" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Барои беэътибор нигоҳ доштани URL-ҳо, data-targetба ҷои аттрибутиро истифода баред href="#".

<div class = "афтанда" > 
  <a class = "dropdown-toggle" id = "dLabel" нақши = "тугма" data-toggle = "download" data-target = "#" href = "/page.html" >      
    Поёнафтода
    <b class = "caret" ></b> 
  </a>
  <ul class = "Менюи афтанда" нақши = "меню" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Тавассути JavaScript

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

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

Имконот

Ҳеҷ

Усулҳо

$().афтанда('гузариш')

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

Намуна дар навор

Васлкунаки ScrollSpy барои ба таври худкор навсозии ҳадафҳои нав дар асоси мавқеи ҳаракат аст. Майдони зери наворро ҳаракат кунед ва тағирёбии синфи фаъолро тамошо кунед. Зербандҳои афтанда низ таъкид карда мешаванд.

Истифода

Тавассути атрибутҳои додаҳо

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

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

Тавассути JavaScript

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

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

Усулҳо

.scrollspy('навсозӣ')

Ҳангоми истифодаи scrollspy дар якҷоягӣ бо илова кардан ё хориҷ кардани элементҳо аз DOM, шумо бояд усули навсозиро ба таври зерин даъват кунед:

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

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-монанди замима кунед data-offset="".

Ҳодисаҳо

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

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

Истифода

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

$ ( '#Tab a' ). пахш кунед ( функсия ( e ) {  
  д . preventDefault ();
  $ ( ин ). ҷадвал ( 'намоиш' );
})

Шумо метавонед ҷадвалҳои инфиродиро бо чанд роҳ фаъол созед:

$ ( '#myTab a[href="#profile"]' ). ҷадвал ( 'намоиш' ); // Ҷадвалро аз рӯи ном интихоб кунед 
$ ( '#Май Tab a:first' ). ҷадвал ( 'намоиш' ); // Ҷадвали аввалро интихоб кунед 
$ ( '#Табиби ман: охирон' ). ҷадвал ( 'намоиш' ); // Варақаи охиринро интихоб кунед 
$ ( '#myTab li:eq(2) a' ). ҷадвал ( 'намоиш' ); // Варақаи сеюмро интихоб кунед (0-индексшуда) 

Нишондиҳӣ

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

<ul class = "nav nav-tabs" > 
  <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 = "#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 = "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>
 
<скрипт>
  $ ( функсия () {  
    $ ( '#Табиби ман: охирон' ). ҷадвал ( 'намоиш' );
  })
</script>

Ҳодисаҳо

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

Мисолхо

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

Бо сабабҳои иҷроиш, маслиҳати абзор ва popover data-apis интихоб шудаанд, яъне шумо бояд онҳоро худатон оғоз кунед .

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

Чор самт

Маслиҳатҳо дар гурӯҳҳои воридотӣ

Ҳангоми истифодаи маслиҳатҳои асбобҳо ва поповҳо бо гурӯҳҳои вуруди Bootstrap, шумо бояд containerинтихобро (дар зер ҳуҷҷатгузорӣ шудааст) муқаррар кунед, то аз оқибатҳои номатлуб канорагирӣ кунед.

Истифода

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

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

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-монанди замима кунед data-animation="".

Нишондиҳӣ

<a href = "#" data-toggle = "tooltip" title = "аввалин маслиҳат" > курсорро болои ман гузаронед </a>   

Усулҳо

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

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

.tooltip('нишон')

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

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

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

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

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

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

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

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

.tooltip('нобуд кардан')

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

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

Мисолхо

Иловаи қабатҳои хурди мундариҷа, ба монанди онҳое, ки дар iPad, ба ҳама гуна унсурҳо барои ҷойгиркунии маълумоти дуюмдараҷа. Тугмачаро ба болои тугма гузоред, то поповро фаъол созед. Барои дохил кардани Tooltip талаб мекунад .

Попвери статикӣ

Чор вариант мавҷуд аст: боло, рост, поён ва ба чап мувофиқ.

Ягон аломате, ки ҳамчун поповҳо нишон дода шудааст, аз JavaScript ва мундариҷа дар дохили атрибут тавлид dataнамешавад.

Намоиши зинда

Чор самт

Истифода

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

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

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-монанди замима кунед data-animation="".

Нишондиҳӣ

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

Усулҳо

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

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

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

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

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

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

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

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

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

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

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

.popover('нобуд кардан')

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

$ ( '#элемент' ). popover ( 'нобуд кардан' )

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

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

Истифода

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

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

Нишондиҳӣ

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

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

Усулҳо

$(). alert()

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

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

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

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

Ҳодисаҳо

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

$ ( '#худдори ман' ). пайваст ( 'пӯшида' , функсия () {   
  // коре кунед…
})

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

Бо тугмаҳо бештар кор кунед. Тугмаи идоракуниро барои ҷузъҳои бештар ба монанди панелҳои асбобҳо гурӯҳҳо ё эҷод кардани тугмаҳо.

Давлатманд

Барои data-loading-text="Loading..."истифодаи ҳолати боркунӣ дар тугма илова кунед.

<button type = "button" class = "btn btn-primary" data-loading-text = "Бор карда мешавад..." > Ҳолати боркунӣ </button>   

Гузариш ягона

Барои data-toggle="button"фаъол кардани гузариш дар як тугма илова кунед.

< навъи тугма = "тугма" синф = "btn btn-primary" data-toggle = "тугма" > Гузариш ягона </тугма>   

Қуттии қайд

Барои data-toggle="buttons-checkbox"иваз кардани услуби қуттии қайдкунӣ дар btn-group илова кунед.

<div class = "btn-group" data- toggle = "buttons-checkbox " >  
  <button type = "button" class = "btn btn-primary" > Чап </тугма>  
  < навъи тугма = "button" class = "btn btn-primary" > Миёна </тугма>  
  <button type = "button" class = "btn btn-primary" > Рост </тугма>  
</div>

Радио

Барои data-toggle="buttons-radio"иваз кардани услуби радио дар btn-group илова кунед.

<div class = "btn-group" data-toggle = "тугмаҳо-радио" >  
  <button type = "button" class = "btn btn-primary" > Чап </тугма>  
  < навъи тугма = "button" class = "btn btn-primary" > Миёна </тугма>  
  <button type = "button" class = "btn btn-primary" > Рост </тугма>  
</div>

Истифода

Тугмаҳоро тавассути JavaScript фаъол созед:

$ ( '.nav-tabs' ). тугмаи ()

Нишондиҳӣ

Аттрибутҳои маълумот барои плагини тугма ҷудонашаванда мебошанд. Рамзи намунаи зерро барои намудҳои гуногуни аломатгузорӣ санҷед.

Имконот

Ҳеҷ

Усулҳо

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

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

< навъи тугма = "тугма" синф = "btn" data- toggle = "тугма" > … </button>    

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

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

< навъи тугма = "тугма" синф = "btn" data-loading-text = "боркунии ашё..." > ... </button>    

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

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

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

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

< навъи тугма = "тугма" синфи = "btn" data-complete-text = "анҷом!" > ... </тугма>    
<скрипт>
  $ ( '.btn' ). тугма ( 'пурра' )
</script>

Дар бораи

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

* Барои ворид кардани плагини Transitions талаб карда мешавад.

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

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

<div class = "accordion" id = "accordion2" >  
  <div class = "accordion-group" > 
    <div class = "сарлавҳаи аккордеон" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Банди гурӯҳбандишаванда №1
      </a>
    </div>
    <div id = "collapseOne" class = "хурдани аккордеон-бадан дар" >  
      <div class = "accordion-inner" > 
        Аним париатур клише...
      </div>
    </div>
  </div>
  <div class = "accordion-group" > 
    <div class = "сарлавҳаи аккордеон" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Банди гурӯҳбандишаванда №2
      </a>
    </div>
    <div id = "collapseTwo" class = "хуриши аккордеон-бадан" >  
      <div class = "accordion-inner" > 
        Аним париатур клише...
      </div>
    </div>
  </div>
</div>
...

Шумо инчунин метавонед плагинро бе аломати аккордеон истифода баред. Тугмаеро созед, ки васеъшавӣ ва фурӯпошии унсури дигарро иваз мекунад.

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

Истифода

Тавассути атрибутҳои додаҳо

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

Барои илова кардани идоракунии гурӯҳи ба аккордеон монанд ба назорати ҷамъшаванда, атрибути маълумотро илова кунед data-parent="#selector". Барои дидани ин амал ба намоиш муроҷиат кунед.

Тавассути JavaScript

Ба таври дастӣ бо:

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

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-монанди замима кунед data-parent="".

Усулҳо

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

‹ ›

<div id = "myCarousel" class = "слайд карусел" >  
  <ol class = "карусел-индикаторҳо" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "фаъол" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Маводҳои каруселӣ -->
  <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 = "пештар" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Истифода

Тавассути атрибутҳои додаҳо

Атрибутҳои маълумотро истифода баред, то мавқеи каруселро ба осонӣ идора кунед. data-slideкалимаҳои калидӣ prevё -ро қабул мекунад next, ки мавқеъи слайдро нисбат ба мавқеъи ҷории он тағйир медиҳад. Интихобан, data-slide-toбарои интиқол додани индекси слайди хом ба карусел истифода баред data-slide-to="2", ки он мавқеъи слайд ба шохиси мушаххас бо сар мешавад.0 мешавад.

Тавассути JavaScript

Каруселро дастӣ бо:

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

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScriptz интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-монанди замима кунед data-interval="".

Усулҳо

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

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

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

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

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

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

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

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

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

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

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

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

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

Ҳодисаҳо

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

Мисол

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

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

Шумо мехоҳед танзим autocomplete="off"кунед, ки менюҳои пешфарзро аз пайдо шудани менюи пешфарз дар болои афтанда Bootstrap typeahead пешгирӣ кунед.

Истифода

Тавассути атрибутҳои додаҳо

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

Тавассути JavaScript

Ба воситаи чопкунак дастӣ занг занед:

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

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-монанди замима кунед data-source="".

Усулҳо

.typeahead(имконот)

Воридро бо пешакии чопӣ оғоз мекунад.

Мисол

Зернавигатсия дар тарафи чап намоиши мустақими плагини аффикс аст.

Истифода

Тавассути атрибутҳои додаҳо

Барои ба осонӣ илова кардани рафтори аффикс ба ягон элемент, танҳо data-spy="affix"ба унсуре, ки мехоҳед ҷосусӣ кунед, илова кунед. Сипас, офсетҳоро истифода баред, то муайян кунед, ки кай иваз кардани пайвасткунии элементро фаъол ва хомӯш кардан лозим аст.

<div data-spy = "affix" data-offset-top = "200" > ... </div>  

Тавассути JavaScript

Ба плагини аффикс тавассути JavaScript занг занед:

$ ( '#навбар' ). аффикс ()

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-монанди замима кунед data-offset-top="200".