Ганцаарчилсан эсвэл эмхэтгэсэн

Хэрэв та Bootstrap-ийн хамгийн сүүлийн хувилбарыг татаж авсан бол bootstrap.js болон bootstrap.min.js аль аль нь энэ хуудсанд жагсаасан бүх залгаасуудыг агуулна.

Өгөгдлийн шинж чанарууд

Та бүх Bootstrap залгаасуудыг JavaScript-ийн нэг мөр бичихгүйгээр зөвхөн тэмдэглэгээний API-ээр дамжуулан ашиглах боломжтой. Энэ бол Bootstrap-ийн нэгдүгээр зэрэглэлийн API бөгөөд залгаасыг ашиглахдаа хамгийн түрүүнд анхаарах ёстой.

Зарим тохиолдолд энэ функцийг унтраах нь зүйтэй байж магадгүй юм. Тиймээс бид мөн ''data-api'' бүхий үндсэн нэрний зайд байгаа бүх үйл явдлыг салгаснаар өгөгдлийн атрибут API-г идэвхгүй болгох боломжийг олгодог. Энэ нь иймэрхүү харагдаж байна:

$ ( 'бие' ). унтраасан ( '.data-api' )

Өөрөөр, тодорхой залгаас руу чиглүүлэхийн тулд залгаасуудын нэрийг дараах байдлаар өгөгдлийн API нэрийн талбар болгон оруулахад хангалттай.

$ ( 'бие' ). унтраасан ( '.alert.data-api' )

Програмчлалын API

Мөн та бүх Bootstrap залгаасуудыг JavaScript API-ээр дамжуулан ашиглах боломжтой байх ёстой гэж бид үзэж байна. Бүх нийтийн API-ууд нь дан, гинжин хэлхээтэй аргууд бөгөөд ашигласан цуглуулгыг буцаана.

$ ( ".btn.аюул" ). товчлуур ( "шилжүүлэх" ). addClass ( "өөх" )

Бүх аргууд нь нэмэлт сонголтын объект, тодорхой аргад чиглэсэн стринг эсвэл юу ч биш (өгөгдмөл үйлдэлтэй залгаасыг эхлүүлдэг) хүлээн авах ёстой:

$ ( "#myModal" ). modal () // анхдагчаар эхлүүлсэн                       
$ ( "#myModal" ). modal ({ keyboard : false }) // гаргүйгээр эхлүүлсэн     
$ ( "#myModal" ). modal ( 'show' ) // харуулахыг эхлүүлж, шууд дуудна                

Мөн залгаас бүр нь `Constructor` шинж чанар дээр өөрийн түүхий бүтээгчийг ил гаргадаг: $.fn.popover.Constructor. Хэрэв та тодорхой нэг залгаасын жишээ авахыг хүсвэл үүнийг элементээс шууд татаж авна уу: $('[rel=popover]').data('popover').

Үйл явдал

Bootstrap нь ихэнх залгаасын өвөрмөц үйлдлүүдэд зориулсан тусгай үйл явдлуудыг хангадаг. showЕрөнхийдөө эдгээр нь үйл явдлын эхэнд инфинитив (жишээ нь) өдөөгдөж, үйл shownажиллагаа дууссаны дараа өдөөгддөг өнгөрсөн үеийн хэлбэр (жишээ нь).

Бүх хязгааргүй үйл явдлууд нь урьдчилан сэргийлэх функцийг хангадаг. Энэ нь аливаа үйлдлийг эхлэхээс өмнө түүний гүйцэтгэлийг зогсоох чадварыг өгдөг.

$ ( '#myModal' ). дээр ( 'шоу' , функц ( e ) {   
    хэрэв (! өгөгдөл ) буцаана e . preventDefault () // модыг харуулахыг зогсооно   
})

Шилжилтийн тухай

Шилжилтийн энгийн эффектүүдийн хувьд bootstrap-transition.js-г бусад JS файлуудын хажууд нэг удаа оруулаарай. Хэрэв та хөрвүүлсэн (эсвэл жижиглэсэн) bootstrap.js-г ашиглаж байгаа бол үүнийг оруулах шаардлагагүй - энэ нь аль хэдийн байна.

Хэрэглэх тохиолдлууд

Шилжилтийн залгаасын цөөн хэдэн жишээ:

• Модал хэлбэрээр гулсах эсвэл бүдгэрэх
• Цонхнууд бүдгэрч байна
• Сэрэмжлүүлэг алга болж байна
• Гулгадаг тойруулалтын самбар

Жишээ

Модаль нь оновчтой, гэхдээ уян хатан, шаардлагатай хамгийн бага ажиллагаатай, ухаалаг өгөгдмөл тохиргоотой харилцах цонхтой.

Статик жишээ

Толгой хэсэг, үндсэн хэсэг болон хөл хэсэгт үйлдлүүдийн багц бүхий дүрслэгдсэн загвар.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "товчлуур" анги = "хаах" data-dississ = "modal" aria-hidden = "true" > × </button>    
    <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 class = "modal" id = "myModal" tabindex = "-1" үүрэг = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "үнэн" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dississ = "modal" aria-hidden = "true" > × </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>   
    <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-ээр дамжуулан

myModalJavaScript-ийн нэг мөр бүхий id бүхий модаль дууд :

$ ( '#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' ). дээр ( 'далд' , функц () {   
  // ямар нэг юм хий…
})

Жишээ

Энэхүү энгийн залгаасын тусламжтай бүх зүйл, тухайлбал навигацийн самбар, таб, эм зэрэг дээр унждаг цэсийг нэмнэ үү.

Navbar дотор

Таб дотор

Хэрэглээ

Өгөгдлийн шинж чанаруудаар дамжуулан

data-toggle="dropdown"Унждаг цэсийг сэлгэхийн тулд холбоос эсвэл товчлуур дээр нэмнэ үү .

<div class = "dropdown" > 
  <a class = "dropdown-toggle" href = "#" > Dropdown триггер </a>  
  <ul class = "dropdown-цэс" үүрэг = "цэс" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

URL-уудыг бүрэн бүтэн байлгахын тулд -ийн data-targetоронд атрибутыг ашиглана уу href="#".

<div class = "dropdown" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Унтраах цэс
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-цэс" үүрэг = "цэс" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

JavaScript-ээр дамжуулан

JavaScript-ээр унадаг цэс рүү залгана уу:

$ ( '.dropdown-toggle' ). унадаг ()

Сонголтууд

Байхгүй

Арга зүй

$().dropdown()

Өгөгдсөн навигацын цэсийг идэвхжүүлэх программчлагдсан API.

Navbar дээрх жишээ

ScrollSpy залгаас нь гүйлгэх байрлалд тулгуурлан навигацийн зорилтуудыг автоматаар шинэчлэх зориулалттай. Navbar-ийн доорх хэсгийг гүйлгэж, идэвхтэй ангийн өөрчлөлтийг хараарай. Унждаг дэд зүйлүүдийг мөн тодруулна.

Хэрэглээ

Өгөгдлийн шинж чанаруудаар дамжуулан

Өөрийн дээд самбарын навигацад гүйлгэх үйлдлийг хялбархан нэмэхийн тулд тагнахыг data-spy="scroll"хүсэж буй элемент дээрээ нэмж (ихэнхдээ энэ нь үндсэн хэсэг байх болно) болон data-target=".navbar"аль хөтөч ашиглахаа сонгоход л хангалттай. Та .navбүрэлдэхүүн хэсэгтэй scrollspy ашиглахыг хүсэх болно.

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

JavaScript-ээр дамжуулан

JavaScript ашиглан scrollspy руу залгана уу:

$ ( '#navbar' ). scrollspy ()

Арга зүй

.scrollspy('шинэчлэх')

Scrollspy-г DOM-д элемент нэмэх, хасахтай хамт ашиглах үед та дараах байдлаар сэргээх аргыг дуудах хэрэгтэй болно.

$ ( '[data-spy="scroll"]' ). тус бүр ( функц () {  
  var $spy = $ ( энэ ). scrollspy ( 'шинэчлэх' )
});

Сонголтууд

Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-хавсаргана data-offset="".

Үйл явдал

Жишээ таб

Унждаг цэсээр ч локал контентын хэсэг рүү шилжихэд хурдан, динамик таб функцийг нэмээрэй.

Хэрэглээ

JavaScript-ээр чихтэй табуудыг идэвхжүүлэх (tab бүрийг тус тусад нь идэвхжүүлэх шаардлагатай):

$ ( '#myTab a' ). дарна уу ( функц ( e ) {  
  e . урьдчилан сэргийлэхDefault ();
  $ ( энэ ). tab ( 'шоу' );
})

Та тусдаа табуудыг хэд хэдэн аргаар идэвхжүүлж болно:

$ ( '#myTab a[href="#profile"]' ). tab ( 'шоу' ); // Табыг нэрээр нь сонгоно уу 
$ ( '#myTab a:first' ). tab ( 'шоу' ); // Эхний табыг сонгоно уу 
$ ( '#myTab a: last' ). tab ( 'шоу' ); // Сүүлийн табыг сонгоно уу 
$ ( '#myTab li:eq(2) a' ). tab ( 'шоу' ); // Гурав дахь табыг сонгоно уу (0 индексжүүлсэн) 

Тэмдэглэгээ

Та ямар нэгэн JavaScript бичихгүйгээр зүгээр л нэг элемент дээр зааж өгснөөр таб data-toggle="tab"эсвэл эм навигацийг идэвхжүүлж болно. Таб дээр болон ангиудыг data-toggle="pill"нэмснээр Bootstrap табын хэв маягийг хэрэглэнэ.navnav-tabsul

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

Арга зүй

$().tab

Таб элемент болон агуулгын савыг идэвхжүүлдэг. Цонх нь DOM доторх чингэлэг зангилаа руу чиглэсэн data-targetэсвэл a байх ёстой .href

<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 = "messages" > ... </div>  
  <div class = "tab-pane" id = "тохиргоо" > ... </div>  
</div>
 
<скрипт>
  $ ( функц () {  
    $ ( '#myTab a: last' ). tab ( 'шоу' );
  })
</script>

Үйл явдал

$ ( 'a[data-toggle="tab"]' ). дээр ( 'харуулсан' , функц ( e ) {   
  e . зорилтот // идэвхжүүлсэн таб
  e . холбоотойTarget // өмнөх таб
})

Жишээ

Жэйсон Фреймийн бичсэн гайхалтай jQuery.tipsy залгаасаас санаа авсан; Хэрэгслийн зөвлөмжүүд нь зураг дээр тулгуурладаггүй, хөдөлгөөнт дүрслэлд CSS3, орон нутгийн гарчиг хадгалахад өгөгдлийн шинж чанаруудыг ашигладаггүй шинэчилсэн хувилбар юм.

Доорх холбоосууд дээр хулганаа гүйлгэж, зөвлөмжийг харна уу:

Дөрвөн чиглэл

Хэрэглээ

JavaScript-ээр зааварчилгааг идэвхжүүлнэ үү:

$ ( '#жишээ' ). зөвлөмж ( сонголтууд )

Сонголтууд

Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-хавсаргана data-animation="".

Тэмдэглэгээ

Гүйцэтгэлийн шалтгааны улмаас Tooltip болон Popover data-apis-ыг ашиглах боломжтой. Хэрэв та тэдгээрийг ашиглахыг хүсвэл сонгогчийн сонголтыг зааж өгнө үү.

<a href = "#" rel = "tooltip" title = "анхны зөвлөгөө" > миний дээр гүйлгээрэй </a>   

Арга зүй

$().хэрэгслийн зөвлөгөө(сонголт)

Элементийн цуглуулгад хэрэгслийн зааварчилгааг хавсаргана.

.tooltip('шоу')

Элементийн зөвлөмжийг харуулна.

$ ( '#элемент' ). зөвлөмж ( 'шоу' )

.tooltip('нуух')

Элементийн зөвлөмжийг нууна.

$ ( '#элемент' ). зөвлөмж ( 'нуух' )

.хэрэгслийн зөвлөгөө('унтраах')

Элементийн зөвлөмжийг сэлгэх.

$ ( '#элемент' ). хэрэгслийн зөвлөмж ( 'шилжүүлэх' )

.tooltip('устгах')

Элементийн зөвлөмжийг нууж устгана.

$ ( '#элемент' ). зөвлөмж ( 'устгах' )

Жишээ

Хоёрдогч мэдээллийг байрлуулах аливаа элементэд iPad дээрх шиг жижиг контент давхаргыг нэмнэ үү. Поповерыг идэвхжүүлэхийн тулд товчлуур дээр хулганаа нээнэ үү. Хэрэгслийн зөвлөмжийг оруулах шаардлагатай.

Статик попопвер

Дөрвөн сонголт боломжтой: дээд, баруун, доод, зүүн зэрэгцүүлсэн.

dataJavaScript болон атрибут доторх контентоос поповер хэлбэрээр харуулсан тэмдэглэгээ байхгүй .

Шууд демо

Хэрэглээ

JavaScript-ээр поповеруудыг идэвхжүүлэх:

$ ( '#жишээ' ). popover ( сонголт )

Сонголтууд

Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-хавсаргана data-animation="".

Тэмдэглэгээ

Гүйцэтгэлийн шалтгааны улмаас Tooltip болон Popover data-apis-ыг ашиглах боломжтой. Хэрэв та тэдгээрийг ашиглахыг хүсвэл сонгогчийн сонголтыг зааж өгнө үү.

Арга зүй

$().popover(сонголт)

Элементийн цуглуулгад зориулсан поповеруудыг эхлүүлнэ.

.popover('шоу')

Поповын элементүүдийг харуулна.

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

.popover('нуух')

Элементүүдийн поповыг нууна.

$ ( '#элемент' ). popover ( 'нуух' )

.popover('унтраах')

Элементүүдийн поповыг унтраадаг.

$ ( '#элемент' ). popover ( 'шилжүүлэх' )

.popover('устгах')

Элементийн поповыг нууж, устгана.

$ ( '#элемент' ). popover ( 'устгах' )

Жишээ сэрэмжлүүлэг

Энэ залгаасын тусламжтайгаар бүх дохиоллын мессежүүдэд хаах функцийг нэмнэ үү.

Хэрэглээ

JavaScript-ээр дамжуулан анхааруулгыг хаахыг идэвхжүүлэх:

$ ( ". дохиолол" ). сэрэмжлүүлэг ()

Тэмдэглэгээ

data-dismiss="alert"Автоматаар хаах функцийг өгөхийн тулд хаах товчлуур дээрээ нэмэхэд л хангалттай .

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

Арга зүй

$() дохиолол()

Бүх сэрэмжлүүлгийг ойрын функцээр хаадаг. Таны сэрэмжлүүлэг хаагдсан үед анихын тулд тэдгээрт .fadeболон .inангиллыг аль хэдийн ашигласан эсэхийг шалгаарай.

.alert('хаах')

Сэрэмжлүүлэгийг хаадаг.

$ ( ". дохиолол" ). сэрэмжлүүлэг ( 'хаах' )

Үйл явдал

Bootstrap-ийн дохиоллын анги нь дохиоллын функцэд холбогдох хэд хэдэн үйл явдлыг илрүүлдэг.

$ ( '#миний сэрэмжлүүлэг' ). холбох ( 'хаалттай' , функц () {   
  // ямар нэг юм хий…
})

Хэрэглээний жишээ

Товчлуур ашиглан илүү ихийг хий. Хяналтын товчлуурыг зааж өгөх эсвэл хэрэгслийн мөр гэх мэт бусад бүрэлдэхүүн хэсгүүдийн товчлууруудын бүлгийг үүсгэх.

Төрийн мэдээлэлтэй

Товчлуур дээр ачаалах төлөвийг ашиглахын тулд data-loading-text="Loading..."-г нэмнэ үү.

<button type = "button" class = "btn btn-primary" data-loading-text = "Ачааж байна..." > Ачаалах төлөв </button>   

Нэг унтраалга

Data-toggle="button"-г нэмж нэг товчлуур дээр сэлгэхийг идэвхжүүлнэ.

<button type = "button" class = "btn" data-toggle = "button" > Single Toggle </button>   

Checkbox

btn-group дээр шалгах хайрцагны хэв маягийг сэлгэхийн тулд data-toggle="buttons-checkbox" нэмнэ үү.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn" > Зүүн </button>  
  <button type = "button" class = "btn" > Дунд </button>  
  <button type = "button" class = "btn" > Баруун </button>  
</div>

Радио

btn-group дээр радио хэв маягийг сэлгэхийн тулд data-toggle="buttons-radio"-г нэмнэ үү.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn" > Зүүн </button>  
  <button type = "button" class = "btn" > Дунд </button>  
  <button type = "button" class = "btn" > Баруун </button>  
</div>

Хэрэглээ

JavaScript-ээр товчлууруудыг идэвхжүүлэх:

$ ( '.nav-tabs' ). товчлуур ()

Тэмдэглэгээ

Өгөгдлийн шинж чанарууд нь товчлуурын залгаастай салшгүй холбоотой. Төрөл бүрийн тэмдэглэгээний төрлийг доорх жишээ кодыг үзнэ үү.

Сонголтууд

Байхгүй

Арга зүй

$().товчлуур('унтраах')

Түлхэх төлөвийг сэлгэх. Товчлуурыг идэвхжүүлсэн мэт харагдуулна.

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

$().товчлуур('ачаалах')

Товчлуурын төлөвийг ачаалахаар тохируулна - товчлуурыг идэвхгүй болгож, текстийг ачаалах текст рүү шилжүүлнэ. Ачаалах текстийг өгөгдлийн шинж чанарыг ашиглан товчлуурын элемент дээр тодорхойлсон байх ёстой data-loading-text.

<button type = "button" class = "btn" data-loading-text = "ачаалж байна..." > ... </button>    

$().товчлуур('дахин тохируулах')

Товчлуурын төлөвийг дахин тохируулах - текстийг эх текст рүү шилжүүлнэ.

$().товчлуур(мөр)

Товчлуурын төлөвийг дахин тохируулах - текстийг ямар ч өгөгдөлд тодорхойлсон текст төлөв рүү шилжүүлнэ.

<button type = "товчлуур" анги = "btn" data-complete-text = "дууссан!" > ... </button>    
<скрипт>
  $ ( '.btn' ). товчлуур ( 'дуусгах' )
</script>

тухай

Баян хуур, навигаци зэрэг эвхэгддэг бүрэлдэхүүн хэсгүүдийн үндсэн загвар, уян хатан дэмжлэгийг аваарай.

* Transitions залгаасыг оруулахыг шаарддаг.

Жишээ нь баян хуур

Нурах залгаасыг ашиглан бид баян хуурын хэв маягийн энгийн виджетийг бүтээсэн:

<товчлуурын төрөл = "товчлуур" анги = "btn btn-аюул" data-toggle = "нурах" data-target = "#demo" >    
  энгийн эвхэгддэг
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

Хэрэглээ

Өгөгдлийн шинж чанаруудаар дамжуулан

Эвхэгддэг элементийн удирдлагыг автоматаар хуваарилахын тулд элемент дээр нэмэх data-toggle="collapse"болон "a "-д л болно. data-targetУг data-targetатрибут нь задлах үйлдэл хийх css сонгогчийг хүлээн авдаг. collapseЭвхэгддэг элементэд ангийг нэмэхээ мартуузай . Хэрэв та үүнийг анхдагчаар нээхийг хүсвэл нэмэлт анги нэмнэ үү in.

Эвхэгддэг удирдлагад баян хуур шиг бүлгийн удирдлагыг нэмэхийн тулд дата атрибутыг нэмнэ үү data-parent="#selector". Үүнийг хэрхэн ажиллаж байгааг харахын тулд демо-г үзнэ үү.

JavaScript-ээр дамжуулан

Гараар идэвхжүүлэх:

$ ( ". нурах" ). нурах ()

Сонголтууд

Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-хавсаргана data-parent="".

Арга зүй

.collapse(сонголт)

Таны агуулгыг эвхэгддэг элемент болгон идэвхжүүлнэ. Нэмэлт сонголтуудыг хүлээн зөвшөөрдөг object.

$ ( '#myCollapsible' ). нурах ({
  солих : худал 
})

.collapse('унтраах')

Эвхэгддэг элементийг харуулах эсвэл нуух горимд шилжүүлнэ.

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

‹ ›

<div id = "myCarousel" class = "carousel слайд" >  
  <!-- Карусель зүйлс -->
  <div class = "carousel-inner" > 
    <div class = "идэвхтэй зүйл" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "дараагийн" > › </a>   
</div>

Хэрэглээ

Өгөгдлийн шинж чанаруудаар дамжуулан

...

JavaScript-ээр дамжуулан

Дараахаар тойруулгыг гараар дууд:

$ ( '.карусель' ). тойруулга ()

Сонголтууд

Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-хавсаргана data-interval="".

Арга зүй

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

Нэмэлт сонголтоор тойруулгыг objectэхлүүлж, эд зүйлсээр эргэлдэж эхэлнэ.

$ ( '.карусель' ). тойруулга ({
  интервал : 2000 
})

.carousel('cycle')

Зүүнээс баруун тийш тойруулгыг эргүүлнэ.

.carousel('pause')

Тойрог эд зүйлсээр эргэлдэхийг зогсооно.

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

Тойрог тойргийг тодорхой хүрээ рүү эргэлддэг (массивтэй төстэй 0 дээр суурилсан).

.carousel('өмнөх')

Өмнөх зүйл рүү шилжих.

.carousel('дараагийн')

Дараагийн зүйл рүү шилжих.

Үйл явдал

Bootstrap-ийн тойруулгын анги нь тойруулгын функцэд холбогдох хоёр үйл явдлыг харуулдаг.

Жишээ

Ямар ч хэлбэрийн текст оруулгатай гоёмсог бичгийн толгойг хурдан үүсгэх үндсэн, хялбар өргөтгөсөн залгаас.

<оролтын төрөл = "текст" data-provide = "typeahead" >  

Хэрэглээ

Өгөгдлийн шинж чанаруудаар дамжуулан

Дээрх жишээнд үзүүлсэн шиг бичихийн өмнөх функцтэй элементийг бүртгэхийн тулд өгөгдлийн шинж чанаруудыг нэмнэ үү.

JavaScript-ээр дамжуулан

Бичгийн толгойг гараар залгана уу:

$ ( '.typeahead' ). бичгийн толгой ()

Сонголтууд

Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-хавсаргана data-source="".

Арга зүй

.typeahead(сонголт)

Бичгийн толгойтой оролтыг эхлүүлнэ.

Жишээ

Зүүн талд байгаа дэд навигаци нь нэмэлт залгаасын амьд демо юм.

Хэрэглээ

Өгөгдлийн шинж чанаруудаар дамжуулан

Аливаа элементэд хавсаргасан зан үйлийг хялбархан нэмэхийн тулд тагнахыг data-spy="affix"хүсэж буй элемент дээрээ нэмэхэд л хангалттай. Дараа нь элементийн бэхэлгээг хэзээ асаах, унтраахыг тодорхойлохын тулд офсет ашиглана уу.

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

JavaScript-ээр дамжуулан

JavaScript-ээр дамжуулан нэмэлт залгаасыг дуудах:

$ ( '#navbar' ). хавсаргах ()

Арга зүй

.affix('шинэчлэх')

DOM-д элемент нэмэх, хасахтай хамт аффиксыг ашиглах үед та сэргээх аргыг дуудах хэрэгтэй:

$ ( '[data-spy="affix"]' ). тус бүр ( функц () {  
  $ ( энэ ). хавсаргах ( 'шинэчлэх' )
});

Сонголтууд

Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-хавсаргана data-offset-top="200".