Модалын тухай

Сайжруулсан, гэхдээ уян хатан, зөвхөн шаардлагатай хамгийн бага функц, ухаалаг өгөгдмөл бүхий уламжлалт javascript модаль залгаасыг авна.

Статик жишээ

Доорх нь статикаар дүрслэгдсэн модаль юм.

Шууд демо

Доорх товчийг дарж javascript-ээр модаль шилжүүлнэ үү. Энэ нь хуудасны дээд хэсгээс доош гулсаж, бүдгэрнэ.

Bootstrap-modal ашиглаж байна

Javascript-ээр модаль руу залгана уу:

$ ( '#myModal' ). загвар ( сонголт )

Сонголтууд

Тэмдэглэгээ

Та javascript-ийн нэг мөр бичихгүйгээр өөрийн хуудсан дээрх модлуудыг хялбархан идэвхжүүлж болно. Модал элементийн id-тэй харгалзах эсвэл data-toggle="modal"тохируулагч элемент дээр зүгээр л тохируулах ба дарахад энэ нь таны модыг эхлүүлэх болно.data-target="#foo"href="#foo"

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

<a class = "btn" data-toggle = "modal" href = "#myModal" > Модалыг эхлүүлэх </a>    

<div class = "modal" id = "myModal" >  
  <div class = "modal-header" > 
    <button class = "close" data-dississ = "modal" > × </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>

Арга зүй

.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 ашиглаж байна

Жаваскриптээр унадаг цэс рүү залгана уу:

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

Тэмдэглэгээ

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

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Энгийн холбоос </a></li>  
  <li class = "dropdown" id = "цэс1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Унтраах цэс
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > Үйлдэл </a></li> 
      <li><a href = "#" > Өөр үйлдэл </a></li> 
      <li><a href = "#" > Энд өөр зүйл байна </a></li> 
      <li анги = "хуваагч" ></li> 
      <li><a href = "#" > Тусгаарлагдсан холбоос </a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "nav nav-pills" > 
  <li анги = "унадаг" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Унтраах цэс
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Арга зүй

$().dropdown()

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

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

Srollspy-тэй navbar-н жишээ

Доорх хэсгийг гүйлгээд навигацийн шинэчлэлтийг үзээрэй. Унждаг дэд зүйлүүдийг мөн тодруулна. Оролдоод үз!

bootstrap-scrollspy.js ашиглаж байна

Javascript-ээр дамжуулан scrollspy руу залгана уу:

$ ( '#navbar' ). scrollspy ()

Тэмдэглэгээ

Топбарын навигацдаа гүйлгэх үйлдлийг хялбархан нэмэхийн тулд тагнахыг data-spy="scroll"хүсэж буй элемент дээрээ нэмэхэд л хангалттай (ихэнхдээ энэ нь их бие байх болно).

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

Арга зүй

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

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

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

Сонголтууд

Үйл явдал

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

Жишээ таб

Доорх цонхнууд дээр дарж, унадаг цэсээр ч гэсэн далд цонхнуудын хооронд шилжинэ үү.

• Гэр
• Профайл
• Унтраах цэс
  • @fat
  • @mdo

bootstrap-tab.js ашиглаж байна

Жаваскриптээр дамжуулан чихтэй табуудыг идэвхжүүлэх (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"нэмснээр ачаалах табын хэв маягийг хэрэглэнэ.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, локал гарчиг хадгалахад өгөгдлийн шинж чанаруудыг ашигладаггүй шинэчилсэн хувилбар юм.

Хэрэгслийн зөвлөмжийг ашиглах жишээ

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

bootstrap-tooltip.js ашиглаж байна

Жаваскриптээр зааварчилгааг идэвхжүүлнэ үү:

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

Сонголтууд

Тэмдэглэгээ

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

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

Арга зүй

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

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

.tooltip('шоу')

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

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

.tooltip('нуух')

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

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

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

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

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

Поповеруудын тухай

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

* Зөвлөмжийг оруулах шаардлагатай

Жишээ нь хулганы попов

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

bootstrap-popover.js ашиглаж байна

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

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

Сонголтууд

Тэмдэглэгээ

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

Арга зүй

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

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

.popover('шоу')

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

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

.popover('нуух')

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

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

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

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

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

Анхааруулгын тухай

Сэрэмжлүүлэг залгаас нь сэрэмжлүүлэгт ойрхон функцийг нэмэх жижиг анги юм.

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

Сэрэмжлүүлэг залгаас нь ердийн сэрэмжлүүлэг мессеж дээр ажилладаг бөгөөд мессежийг блоклодог.

bootstrap-alert.js ашиглаж байна

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

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

Тэмдэглэгээ

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

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

Арга зүй

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

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

.alert('хаах')

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

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

Үйл явдал

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

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

тухай

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

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

Товчлуурын залгаасыг төлөв болон унтраалга ашиглана уу.

bootstrap-button.js ашиглаж байна

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

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

Тэмдэглэгээ

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

<!-- Дата-toggle="button" нэмнэ үү, нэг товчлуур дээр сэлгэхийг идэвхжүүлнэ үү -->
<button class = "btn" data-toggle = "button" > Нэг сэлгэх </button>  
 
<!-- btn-group дээр шалгах хайрцагны хэв маяг солихын тулд data-toggle="buttons-checkbox" нэмнэ үү -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Зүүн </button> 
  <button class = "btn" > Дунд </button> 
  <button class = "btn" > Баруун </button> 
</div>
 
<!-- btn-group дээр радио хэв маягийг сэлгэхийн тулд data-toggle="buttons-radio" нэмнэ үү -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Зүүн </button> 
  <button class = "btn" > Дунд </button> 
  <button class = "btn" > Баруун </button> 
</div>

Арга зүй

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

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

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

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

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

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

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

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

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

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

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

тухай

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

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

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

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

bootstrap-collapse.js ашиглаж байна

Javascript-ээр идэвхжүүлэх:

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

Сонголтууд

Тэмдэглэгээ

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

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  энгийн эвхэгддэг
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

Арга зүй

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

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

Арга зүй

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

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

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

.carousel('cycle')

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

.carousel('pause')

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

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

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

.carousel('өмнөх')

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

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

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

Үйл явдал

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

тухай

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

Жишээ

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

bootstrap-typeahead.js ашиглаж байна

javascript-ээр дамжуулан бичгийн толгойг дуудах:

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

Сонголтууд

Тэмдэглэгээ

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

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

Арга зүй

.typeahead(сонголт)

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