Ynglŷn â moddau

Mae'n symlach, ond yn hyblyg, yn cymryd yr ategyn moddol javascript traddodiadol gyda dim ond yr ymarferoldeb gofynnol a'r rhagosodiadau craff.

Enghraifft statig

Isod mae moddol wedi'i rendro'n statig.

Demo byw

Toggle a modal trwy javascript trwy glicio ar y botwm isod. Bydd yn llithro i lawr ac yn pylu i mewn o frig y dudalen.

Defnyddio modd bootstrap

Ffoniwch y moddol trwy javascript:

$ ( '#myModal' ). moddol ( opsiynau )

Opsiynau

Marcio

Gallwch chi actifadu moddau ar eich tudalen yn hawdd heb orfod ysgrifennu un llinell o javascript. Gosodwch data-toggle="modal"ar elfen rheolydd gyda data-target="#foo"neu href="#foo"sy'n cyfateb i elfen foddol id, a phan gaiff ei glicio, bydd yn lansio'ch modd.

Hefyd, i ychwanegu opsiynau at eich enghraifft moddol, dylech eu cynnwys fel priodoleddau data ychwanegol ar naill ai'r elfen reoli neu'r marcio moddol ei hun.

<a class="btn" data-toggle="modal" href="#myModal"> Moddol Lansio </a> _ _ _ _ _ _    

<div class = "modal" id = "myModal" >  
  <div class = "modal-header" > 
    <a class="close" data-dismiss="modal"> × </a> _ _ _ _ _  
    <h3> Pennawd moddol </h3>
  </div>
  <div class = "modal-corff" > 
    <p> Un corff main… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = " # " class = " btn btn-primary " > Cadw newidiadau </a>  
    <a href="#" class="btn"> Cau </a> _ _ _ _ _  
  </div>
</div>

Dulliau

.modal(opsiynau)

Yn actifadu'ch cynnwys fel moddol. Yn derbyn opsiwn dewisol object.

$ ( '#myModal' ). moddol ({
  bysellfwrdd : ffug 
})

.modal ('toglo')

Toglo moddol â llaw.

$ ( '#myModal' ). moddol ( ' toglo ' )

.modal ('dangos')

Yn agor moddol â llaw.

$ ( '#myModal' ). moddol ( 'dangos' )

.modal ('cuddio')

Yn cuddio moddol â llaw.

$ ( '#myModal' ). moddol ( 'cuddio' )

Digwyddiadau

Mae dosbarth moddol Bootstrap yn datgelu rhai digwyddiadau ar gyfer cysylltu â swyddogaethau moddol.

$ ( '#myModal' ). ar ( 'cudd' , swyddogaeth () {   
  // gwneud rhywbeth…
})

Ynglŷn â dropdowns

Ychwanegu dewislenni i bron unrhyw beth yn Bootstrap gyda'r ategyn syml hwn. Mae Bootstrap yn cynnwys cefnogaeth ddewislen gwympo lawn yn y bar llywio, y tabiau a'r tabledi.

Enghreifftiau

Cliciwch ar y dolenni nav cwymplen yn y bar llywio a'r pils isod i brofi cwymplenni.

• Cyswllt rheolaidd
• Gollwng i lawr
  • Gweithred
  • Gweithred arall
  • Rhywbeth arall yma
  • Dolen ar wahân
• Cwymp 2
  • Gweithred
  • Gweithred arall
  • Rhywbeth arall yma
  • Dolen ar wahân
• Cwymp 3
  • Gweithred
  • Gweithred arall
  • Rhywbeth arall yma
  • Dolen ar wahân

Defnyddio bootstrap-dropdown.js

Ffoniwch y cwymplenni trwy javascript:

$ ( '. dropdown-toggle' ). cwymplen ()

Marcio

I ychwanegu ymarferoldeb cwymplen yn gyflym at unrhyw elfen, ychwanegwch data-toggle="dropdown"a bydd unrhyw gwymplen bootstrap dilys yn cael ei actifadu'n awtomatig.

<ul class = "pils nav" > 
  < li class = " active " <a href = " # " > Dolen reolaidd </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"> _ _ _ _ _ _ _   
      Gollwng i lawr
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      <li><a href="#"> Gweithredu </a> < / li> 
      <li><a href = " #"> Gweithred arall </a></li> 
      <li><a href="#"> Rhywbeth arall yma </a> </li> 
      <li class = "divider" ></li> 
      <li><a href="#"> Dolen wedi gwahanu </a> </li> 
    </ul>
  </li>
  ...
</ul>

Dulliau

$().gwymp i lawr()

Ap rhaglennol ar gyfer actifadu dewislenni ar gyfer llywio bar llywio neu dabiau penodol.

Mae'r ategyn ScrollSpy ar gyfer diweddaru targedau llywio yn awtomatig yn seiliedig ar safle sgrolio.

Bar llywio enghreifftiol gyda scrollspy

Sgroliwch yr ardal isod a gwyliwch y diweddariad llywio. Bydd yr is-eitemau cwymplen yn cael eu hamlygu hefyd. Rhowch gynnig arni!

Gan ddefnyddio bootstrap-scrollspy.js

Ffoniwch y scrollspy trwy javascript:

$ ( '# navbar' ). sgrôlspy ()

Marcio

Er mwyn ychwanegu ymddygiad ysbïo sgrolio at eich llywio bar uchaf yn hawdd, ychwanegwch data-spy="scroll"at yr elfen rydych chi am sbïo arno (y corff fyddai hwn fel arfer).

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

Opsiynau

Mae'r ategyn hwn yn ychwanegu ymarferoldeb tab a pilsen cyflym a deinamig ar gyfer trosglwyddo trwy gynnwys lleol.

Tabiau enghreifftiol

Cliciwch y tabiau isod i doglo rhwng cwareli cudd, hyd yn oed trwy gwymplenni.

• Cartref
• Proffil
• Gollwng i lawr
  • @braster
  • @mdo

Gan ddefnyddio bootstrap-tab.js

Galluogi tabiau tabable trwy javascript:

$ ( ' # myTab ' ). tab ( 'dangos' )

Marcio

Gallwch chi actifadu llywio tab neu bilsen heb ysgrifennu unrhyw javascript trwy nodi data-toggle="tab"neu data-toggle="pill"ar elfen yn unig.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = " tab " > Cartref </a></li>  
  <li><a href = "#profile" data-toggle = "tab"> Proffil </a></li >  
  <li><a href = " #messages " data-toggle = " tab " > Negeseuon </a></li>  
  <li><a href = "#settings" data-toggle = " tab " > Gosodiadau </a></li>  
</ul>

Dulliau

$().tab

Yn actifadu elfen tab a chynhwysydd cynnwys. Dylai fod gan dab naill ai `targed data` neu `href` yn targedu nod cynhwysydd yn y dom.

<ul class = "nav nav-tabs" > 
  <li class = "active" <a href = " #home" > Cartref </a></li>  
  <li><a href = "#profile"> Proffil </a> </li> 
  <li><a href = "#messages"> Negeseuon </a> </li> 
  <li><a href="#settings"> Gosodiadau </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 = "gosodiadau" > ... </div>  
</div>
 
<script>
  $ ( swyddogaeth ( ) {  
    $ ( '.tabs a:last' ). tab ( 'dangos' )
  })
</script>

Digwyddiadau

$ ( ' a[data-toggle = "tab" ] ' ). ar ( 'dangos' , ffwythiant ( e ) {   
  e . targed // tab actifadu
  e . relatedTarget // tab blaenorol
})

Am Awgrymiadau Offer

Wedi'i ysbrydoli gan yr ategyn jQuery.tipsy rhagorol a ysgrifennwyd gan Jason Frame; Mae Tooltips yn fersiwn wedi'i diweddaru, nad yw'n dibynnu ar ddelweddau, yn defnyddio css3 ar gyfer animeiddiadau, a phriodoleddau data ar gyfer storio teitlau lleol.

Enghraifft o ddefnydd o Tooltips

Hofran dros y dolenni isod i weld awgrymiadau offer:

Defnyddio bootstrap-tooltip.js

Sbardunwch y cyngor trwy javascript:

$ ( '#enghraifft' ). cyngor offer ( opsiynau )

Opsiynau

Marcio

Am resymau perfformiad, mae'r Tooltip a'r Popover data-apis yn optio i mewn. Os hoffech eu defnyddio nodwch opsiwn dewisydd.

<a href = " # " rel = " tooltip " title = " cyngor cymorth cyntaf " > hofran drosof </a>   

Dulliau

$().tooltip(opsiynau)

Yn cysylltu triniwr cyngor offer wrth gasgliad elfennau.

.tooltip ('dangos')

Yn datgelu cyngor elfennau.

$ ( '# elfen' ). cyngor offer ( 'dangos' )

.tooltip ('cuddio')

Yn cuddio cyngor offer elfennau.

$ ( '# elfen' ). cyngor ( 'cuddio' )

.tooltip ('toglo')

Toglo cyngor offer elfennau.

$ ( '# elfen' ). cyngor ( ' togl ' )

Am popovers

Ychwanegu troshaenau bach o gynnwys, fel y rhai ar yr iPad, at unrhyw elfen ar gyfer lletya gwybodaeth eilaidd.

* Mae angen cynnwys Tooltip

Enghraifft hofran popover

Hofran dros y botwm i sbarduno'r popover.

Gan ddefnyddio bootstrap-popover.js

Galluogi popovers trwy javascript:

$ ( '#enghraifft' ). popover ( opsiynau )

Opsiynau

Marcio

Am resymau perfformiad, mae'r Tooltip a Popover data-apis yn optio i mewn. Os hoffech eu defnyddio nodwch yr opsiwn dewisydd.

Dulliau

$().popover(opsiynau)

Yn cychwyn popovers ar gyfer casgliad elfennau.

.popover ('dangos')

Yn datgelu popover elfennau.

$ ( '# elfen' ). popover ( 'dangos' )

.popover ('cuddio')

Yn cuddio popover elfennau.

$ ( '# elfen' ). popover ( 'cuddio' )

.popover ('toglo')

Toglo popover elfennau.

$ ( '# elfen' ). popover ( 'toglo' )

Ynglŷn â rhybuddion

Mae'r ategyn rhybuddio yn ddosbarth bach iawn ar gyfer ychwanegu ymarferoldeb agos at rybuddion.

Rhybuddion enghreifftiol

Mae'r ategyn rhybuddion yn gweithio ar negeseuon rhybuddio rheolaidd, a negeseuon bloc.

Defnyddio bootstrap-alert.js

Galluogi diswyddo rhybudd trwy javascript:

$ ( " .alert " ). rhybudd ()

Marcio

Ychwanegwch data-dismiss="alert"at eich botwm cau i roi swyddogaeth cau rhybudd yn awtomatig.

<a class="close" data-dismiss="alert" href="#"> & times ; _ _ _ _ _ </a>   

Dulliau

$().rhybudd()

Yn lapio pob rhybudd ag ymarferoldeb agos. Er mwyn i'ch rhybuddion gael eu hanimeiddio pan fyddant ar gau, gwnewch yn siŵr bod y dosbarth .fadea'r .indosbarth eisoes wedi'i gymhwyso iddynt.

. rhybudd ('cau')

Yn cau rhybudd.

$ ( " .alert " ). rhybudd ( 'agos' )

Digwyddiadau

Mae dosbarth rhybuddio Bootstrap yn datgelu ychydig o ddigwyddiadau ar gyfer cysylltu â swyddogaethau rhybuddio.

$ ( '#fy-rybudd' ). rhwymo ( ' ar gau ' , swyddogaeth ( ) {   
  // gwneud rhywbeth…
})

Ynghylch

Gwnewch fwy gyda botymau. Rheoli cyflwr botymau neu greu grwpiau o fotymau ar gyfer mwy o gydrannau fel bariau offer.

Defnyddiau enghreifftiol

Defnyddiwch yr ategyn botymau ar gyfer cyflyrau a toglau.

Gan ddefnyddio bootstrap-button.js

Galluogi botymau trwy javascript:

$ ( ' .tabs ' ). botwm ()

Marcio

Mae priodoleddau data yn rhan annatod o'r ategyn botwm. Edrychwch ar y cod enghreifftiol isod am y gwahanol fathau o farcio.

<!-- Ychwanegu data-toggle="botwm" i actifadu toglo ar un botwm -->
<button class = "btn" data-toggle = "button" > Toglo Sengl </button>  
 
<!-- Ychwanegu data-toggle="buttons-checkbox" ar gyfer toglo arddull blwch ticio ar btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Chwith </button> 
  <button class = "btn" > Canol </button> 
  <button class = "btn" > Dde </button> 
</div>
 
<!-- Ychwanegu data-toggle="buttons-radio" ar gyfer toglo arddull radio ar btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Chwith </button> 
  <button class = "btn" > Canol </button> 
  <button class = "btn" > Dde </button> 
</div>

Dulliau

$().button('toglo')

Toglo cyflwr gwthio. Yn rhoi i btn yr olwg ei fod wedi'i actifadu.

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

$().botwm ('llwytho')

Yn gosod cyflwr botwm i lwytho - yn analluogi botwm ac yn cyfnewid testun i lwytho testun. Dylid diffinio llwytho testun ar yr elfen botwm gan ddefnyddio'r priodoledd data data-loading-text.

< button class = " btn " data-loading-text = " llwytho stwff..." > ... </button>   

$().botwm ('ailosod')

Yn ailosod cyflwr botwm - yn cyfnewid testun i destun gwreiddiol.

$().botwm(llinyn)

Yn ailosod cyflwr botwm - yn cyfnewid testun i unrhyw gyflwr testun diffiniedig.

<button class = "btn" data-complete-text = "gorffen!" > ... </button>   
<script>
  $ ( ' .btn ' ). botwm ( 'cyflawn' )
</script>

Ynghylch

Sicrhewch arddulliau sylfaenol a chefnogaeth hyblyg ar gyfer cydrannau cwympadwy fel acordionau a llywio.

Acordion enghreifftiol

Gan ddefnyddio'r ategyn cwympo, fe wnaethom adeiladu teclyn arddull acordion syml:

Defnyddio bootstrap-collapse.js

Galluogi trwy javascript:

$ ( " .collapse " ). dymchwel ()

Opsiynau

Marcio

Ychwanegu data-toggle="collapse"ac data-targetelfen i neilltuo rheolaeth yn awtomatig ar elfen sy'n cwympo. Mae'r data-targetpriodoledd yn derbyn dewisydd css i gymhwyso'r cwymp iddo. Gwnewch yn siŵr eich bod chi'n ychwanegu'r dosbarth collapseat yr elfen gwympadwy. Os hoffech iddo agor diofyn, ychwanegwch y dosbarth ychwanegol in.

<button class = "btn btn-danger" data-toggle = "cwymp" data-target = "#demo" >   
  syml collapsible
</button>
 
<div id = "demo" class = "llewygu" > … </div>  

Dulliau

.cwymp(opsiynau)

Yn actifadu'ch cynnwys fel elfen y gellir ei dymchwel. Yn derbyn opsiwn dewisol object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Toggles a collapsible element to shown or hidden.

.collapse('show')

Shows a collapsible element.

.collapse('hide')

Hides a collapsible element.

Events

Bootstrap's collapse class exposes a few events for hooking into collapse functionality.

$('#myCollapsible').on('hidden', function () {
  // do something…
})

About

A generic plugin for cycling through elements. A merry-go-round.

Example carousel

Watch the slideshow below.

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

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.

‹ ›

Using bootstrap-carousel.js

Call via javascript:

$('.carousel').carousel()

Options

Markup

Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.

<div id="myCarousel" class="carousel">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

Methods

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

$('.myCarousel').carousel({
  interval: 2000
})

.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

.carousel('prev')

Cycles to the previous item.

.carousel('next')

Cycles to the next item.

Events

Bootstrap's modal class exposes a few events for hooking into modal functionality.

About

A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.

Example

Start typing in the field below to show the typeahead results.

Using bootstrap-typeahead.js

Call the typeahead via javascript:

$('.typeahead').typeahead()

Options

Markup

Add data attributes to register an element with typeahead functionality.

<input type="text" data-provide="typeahead">

Methods

.typeahead(options)

Initializes an input with a typeahead.