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

Залгаасуудыг тус тусад нь (заримдаа шаардлагатай хамааралтай ч) эсвэл бүгдийг нэг дор оруулж болно. 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').

Зөрчилгүй

Заримдаа бусад UI хүрээтэй Bootstrap залгаасуудыг ашиглах шаардлагатай болдог. Ийм нөхцөлд нэрийн орон зайд зөрчилдөөн үе үе тохиолдож болно. Хэрэв ийм зүйл тохиолдвол та .noConflictутгыг буцаахыг хүссэн залгаас руу залгаж болно.

var bootstrapButton = $ . fn . товч . noConflict () // $.fn.button-ыг өмнө нь өгсөн утга руу буцаана 
$ . fn . bootstrapBtn = bootstrapButton             // $().bootstrapBtn ачаалах функцийг өгнө.

Үйл явдал

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 id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <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" data-toggle = "dropdown" 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, орон нутгийн гарчиг хадгалахад өгөгдлийн шинж чанаруудыг ашигладаггүй шинэчилсэн хувилбар юм.

Гүйцэтгэлийн шалтгааны улмаас зааварчилгаа болон popover өгөгдлийн апис нь сонгогдсон тул та тэдгээрийг өөрөө эхлүүлэх хэрэгтэй гэсэн үг юм.

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

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

Оролтын бүлгүүдийн зөвлөмжүүд

Bootstrap оролтын бүлгүүдэд зааварчилгаа болон поповер ашиглахдаа containerхүсээгүй үр дагавраас зайлсхийхийн тулд (доор баримтжуулсан) сонголтыг тохируулах хэрэгтэй болно.

Хэрэглээ

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

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

Сонголтууд

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

Тэмдэглэгээ

<a href = "#" data-toggle = "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 btn-primary" data-toggle = "button" > Нэг сэлгэх </button>   

Checkbox

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

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

Радио

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

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Зүүн </button>  
  <button type = "button" class = "btn btn-primary" > Дунд </button>  
  <button type = "button" class = "btn btn-primary" > Баруун </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 залгаасыг оруулахыг шаарддаг.

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

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

<div class = "accordion" id = "accordion2" >  
  <div class = "баян хуур" > 
    <div class = "баян хуурын гарчиг" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Эвхэгддэг бүлгийн зүйл №1
      </a>
    </div>
    <div id = "collapseOne" class = "баян хуур-биеийн уналт" >  
      <div class = "баян хуур-дотоод" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class = "баян хуур" > 
    <div class = "баян хуурын гарчиг" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Эвхэгддэг бүлгийн зүйл №2
      </a>
    </div>
    <div id = "collapseTwo" class = "баян хуур-биеийн уналт" >  
      <div class = "баян хуур-дотоод" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

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

<товчлуурын төрөл = "товчлуур" анги = "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 слайд" >  
  <ol class = "carousel-indicators" > 
    <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>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "дараагийн" > › </a>   
</div>

Хэрэглээ

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

Тойрогны байрлалыг хялбархан хянахын тулд өгөгдлийн шинж чанаруудыг ашиглана уу. эсвэл data-slideтүлхүүр үгсийг хүлээн авдаг бөгөөд энэ нь слайдын байрлалыг одоогийн байрлалтай нь өөрчилдөг. Эсвэл слайдын байрлалыг тойруулга руу шилжүүлэхийн тулд слайдын индексийг ашиглан тодорхой индексээр эхэлдэг .prevnextdata-slide-todata-slide-to="2"0

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

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

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

Сонголтууд

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

Арга зүй

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

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

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

.carousel('cycle')

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

.carousel('pause')

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

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

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

.carousel('өмнөх')

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

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

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

Үйл явдал

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

Жишээ

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

<оролтын төрөл = "текст" data-provide = "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-ээр дамжуулан нэмэлт залгаасыг дуудах:

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

Сонголтууд

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