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

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

Усулҳо

.modal(имконот)

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

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

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

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

$ ( '#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"ва ҳама гуна афтанда боotstrap дуруст ба таври худкор фаъол карда мешавад.

<ul class = "nav nav-pills" > 
  <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>

Барои беэътибор нигоҳ доштани 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>

Усулҳо

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

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

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

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

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

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

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

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

Нишондиҳӣ

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

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

Усулҳо

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

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

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

Имконот

Ҳодисаҳо

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

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

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

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

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

Ҷадвалҳои ҷадвалбандишавандаро тавассути 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-ро барои аниматсияҳо ва атрибутҳо барои нигаҳдории унвонҳои маҳаллӣ истифода мебаранд.

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

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

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

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

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

Имконот

Нишондиҳӣ

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

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

Усулҳо

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

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

.tooltip('нишон')

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

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

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

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

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

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

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

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

Дар бораи popovers

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

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

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

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

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

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

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

Имконот

Нишондиҳӣ

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

Усулҳо

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Нишондиҳӣ

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

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

Усулҳо

$(). alert()

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

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

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

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

Ҳодисаҳо

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

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

Дар бораи

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

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

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

Истифодаи 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 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>

Усулҳо

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

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

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

Дар бораи

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

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

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

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

Истифодаи 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.

Нишони акси дуюм

Дар ин ҷо хеле осон аст, осонтар аст. Donec id elit non mi porta gravida ва дар вақти дилхоҳ. Nullam id dolor id nibh ultricies vehicula ut id elit.

Нишони акси сеюм

Дар ин ҷо хеле осон аст, осонтар аст. Donec id elit non mi porta gravida ва дар вақти дилхоҳ. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

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

Занг тавассути javascript:

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

Имконот

Нишондиҳӣ

Аттрибутҳои додаҳо барои назорати қаблӣ ва оянда истифода мешаванд. Нишондиҳии намунаи зерро санҷед.

<div id = "myCarousel" class = "слайд карусел" >  
  <!-- Маводҳои каруселӣ -->
  <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>

Усулҳо

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

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

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

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

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

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

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

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

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

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

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

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

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

Ҳодисаҳо

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

Дар бораи

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

Мисол

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

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

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

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

Имконот

Нишондиҳӣ

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

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

Усулҳо

.typeahead(имконот)

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