Unigol neu wedi'i lunio

Gellir cynnwys ategion yn unigol (er bod rhai wedi gofyn am ddibyniaethau), neu i gyd ar unwaith. Mae bootstrap.js a bootstrap.min.js yn cynnwys yr holl ategion mewn un ffeil.

Priodoleddau data

Gallwch ddefnyddio holl ategion Bootstrap trwy'r API marcio yn unig heb ysgrifennu un llinell o JavaScript. Dyma API dosbarth cyntaf Bootstrap a dylai fod eich ystyriaeth gyntaf wrth ddefnyddio ategyn.

Wedi dweud hynny, mewn rhai sefyllfaoedd gall fod yn ddymunol i ddiffodd y swyddogaeth hon. Felly, rydym hefyd yn darparu'r gallu i analluogi'r API priodoledd data trwy ddadrwymo'r holl ddigwyddiadau ar y corff sydd wedi'i ofod â `'data-api'`. Mae hyn yn edrych fel hyn:

$ ( 'corff' ). i ffwrdd ( ' .data-api ' )

Fel arall, i dargedu ategyn penodol, dylech gynnwys enw'r ategyn fel gofod enw ynghyd â gofod enw data-api fel hyn:

$ ( 'corff' ). i ffwrdd ( '.alert.data-api' )

API rhaglennol

Rydyn ni hefyd yn credu y dylech chi allu defnyddio'r holl ategion Bootstrap trwy'r API JavaScript yn unig. Mae pob API cyhoeddus yn ddulliau sengl, cadwynadwy, ac yn dychwelyd y casgliad y gweithredwyd arno.

$ ( ".btn.danger" ). botwm ( "toglo" ). addClass ( "braster" )

Dylai pob dull dderbyn gwrthrych opsiynau dewisol, llinyn sy'n targedu dull penodol, neu ddim byd (sy'n cychwyn ategyn ag ymddygiad diofyn):

$ ( "#myModal" ). modal () // ymgychwyn gyda rhagosodiadau                       
$ ( "#myModal" ). modal ( { keyboard : false } ) // wedi'i gychwyn heb unrhyw fysellfwrdd     
$ ( "#myModal" ). modal ( 'dangos' ) // yn ymgychwyn ac yn galw sioe yn syth                

Mae pob ategyn hefyd yn datgelu ei adeiladwr crai ar eiddo `Constructor`: $.fn.popover.Constructor. Os hoffech gael enghraifft ategyn penodol, adalw ef yn uniongyrchol o elfen: $('[rel=popover]').data('popover').

Dim Gwrthdaro

Weithiau mae angen defnyddio ategion Bootstrap gyda fframweithiau UI eraill. O dan yr amgylchiadau hyn, gall gwrthdrawiadau gofod enwau ddigwydd o bryd i'w gilydd. Os bydd hyn yn digwydd, gallwch chi alw .noConflictar yr ategyn yr ydych am ddychwelyd ei werth.

var bootstrapButton = $ . fn . botwm . noConflict () // dychwelyd $.fn.button i werth a neilltuwyd yn flaenorol 
$ . fn . bootstrapBtn = bootstrapButton             // rhowch y swyddogaeth bootstrap $().bootstrapBtn

Digwyddiadau

Mae Bootstrap yn darparu digwyddiadau wedi'u teilwra ar gyfer y rhan fwyaf o weithredoedd unigryw'r ategyn. Yn gyffredinol, daw’r rhain ar ffurf berfenw a chyfranogiad y gorffennol – lle mae’r berfenw (ex. show) yn cael ei sbarduno ar ddechrau digwyddiad, a’i ffurf cyfranogwr yn y gorffennol (ex. shown) yn sbardun ar ôl cwblhau gweithred.

Mae pob digwyddiad berfenw yn darparu ymarferoldeb preventDefault. Mae hyn yn rhoi'r gallu i atal cyflawni gweithred cyn iddo ddechrau.

$ ( '#myModal' ). ar ( 'dangos' , ffwythiant ( e ) {   
    os ( ! data ) dychwelyd e . preventDefault () // yn atal moddol rhag cael ei ddangos   
})

Ynglŷn â thrawsnewidiadau

Ar gyfer effeithiau pontio syml, cynhwyswch bootstrap-transition.js unwaith ochr yn ochr â'r ffeiliau JS eraill. Os ydych chi'n defnyddio'r bootstrap.js sydd wedi'i lunio (neu wedi'i finimeiddio) , nid oes angen cynnwys hwn - mae yno'n barod.

Defnyddio achosion

Ychydig o enghreifftiau o'r ategyn trawsnewid:

• Llithro neu bylu mewn moddau
• tabiau pylu
• Rhybuddion pylu
• Cwareli carwsél llithro

Enghreifftiau

Mae moddau yn symlach, ond yn hyblyg, yn awgrymiadau deialog gyda'r ymarferoldeb gofynnol a'r rhagosodiadau smart.

Enghraifft statig

Moddol wedi'i rendro gyda phennawd, corff, a set o gamau gweithredu yn y troedyn.

<div class = "modd cuddio pylu" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "gwir" > × </button>    
    <h3> Pennawd moddol </h3>
  </div>
  <div class = "modal-corff" > 
    <p> Un corff main… </p>
  </div>
  <div class = "modal-footer" > 
    <a href="#" class="btn"> Cau </a> _ _ _ _ _  
    <a href = " # " class = " btn btn-primary " > Cadw newidiadau </a>  
  </div>
</div>

Demo byw

Toglo moddol trwy JavaScript trwy glicio ar y botwm isod. Bydd yn llithro i lawr ac yn pylu i mewn o frig y dudalen.

<!-- Botwm i sbarduno moddol -->
<a href="#myModal" role="button" class="btn" data-toggle="modal"> Lansio moddol demo </a> _ _ _ _ _ _ _    
 
<!-- moddol -->
< div id = " myModal " class = " pylu cuddfan modd " tabindex = " -1 " role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "gwir" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "gwir" > × </button>    
    <h3 id = "myModalLabel" > Pennawd moddol </h3> 
  </div>
  <div class = "modal-corff" > 
    <p> Un corff main… </p>
  </div>
  <div class = "modal-footer" > 
    < button class = " btn " data-dismiss = " modal " aria-hidden = " gwir " > Cau </button>   
    <button class = "btn btn-primary" > Cadw newidiadau </button> 
  </div>
</div>

Defnydd

Trwy briodoleddau data

Ysgogi moddol heb ysgrifennu JavaScript. Gosod data-toggle="modal"ar elfen rheolydd, fel botwm, ynghyd â data-target="#foo"neu href="#foo"i dargedu moddol penodol i toglo.

< button type = " button " data-toggle = " modal " data-target = " #myModal " > Lansio moddol </button>   

Trwy JavaScript

Ffoniwch foddol gydag id myModalgydag un llinell o JavaScript:

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

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

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…
})

Enghreifftiau

Ychwanegwch gwymplenni at bron unrhyw beth gyda'r ategyn syml hwn, gan gynnwys y bar llywio, y tabiau a'r tabledi.

O fewn navbar

O fewn tabiau

Defnydd

Trwy briodoleddau data

Ychwanegu data-toggle="dropdown"at ddolen neu fotwm i doglo cwymplen.

<div class = "dropdown" > 
  <a class="dropdown-toggle" data-toggle = " dropdown " href = " # " > Sbardun cwymplen </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

I gadw URLs yn gyfan, defnyddiwch y data-targetpriodoledd yn lle href="#".

<div class = "dropdown" > 
  <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> _ _ _ _ _ _ _ _ _ _ _ _ _      
    Gollwng i lawr
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Trwy JavaScript

Ffoniwch y cwymplenni trwy JavaScript:

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

Opsiynau

Dim

Dulliau

$().dropdown('toglo')

Ap rhaglennol ar gyfer toglo dewislenni ar gyfer bar llywio penodol neu lywio â thabiau.

Enghraifft yn navbar

Mae'r ategyn ScrollSpy ar gyfer diweddaru targedau llywio yn awtomatig yn seiliedig ar safle sgrolio. Sgroliwch yr ardal o dan y bar llywio a gwyliwch y newid dosbarth gweithredol. Bydd yr is-eitemau cwymplen yn cael eu hamlygu hefyd.

Defnydd

Trwy briodoleddau data

Er mwyn ychwanegu ymddygiad ysbïwr sgrolio at eich llywio ar y bar uchaf yn hawdd, ychwanegwch data-spy="scroll"at yr elfen rydych chi am sbïo arno (y corff hwn fyddai'n fwyaf nodweddiadol) a data-target=".navbar"dewis pa lywlyn i'w ddefnyddio. Byddwch chi eisiau defnyddio scrollspy gyda .navchydran.

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

Trwy JavaScript

Ffoniwch y scrollspy trwy JavaScript:

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

Dulliau

.scrollspy('adnewyddu')

Wrth ddefnyddio scrollspy ar y cyd ag ychwanegu neu dynnu elfennau o'r DOM, bydd angen i chi ffonio'r dull adnewyddu fel hyn:

$ ( ' [ data-spy = "scroll" ] ' ). pob ( swyddogaeth ( ) {  
  Var $spy = $ ( hwn ). sgrôlspy ( 'adnewyddu' )
});

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-offset="".

Digwyddiadau

Tabiau enghreifftiol

Ychwanegu ymarferoldeb tab cyflym a deinamig i drosglwyddo trwy baneli o gynnwys lleol, hyd yn oed trwy gwymplenni.

Defnydd

Galluogi tabiau tabadwy trwy JavaScript (mae angen actifadu pob tab yn unigol):

$ ( ' # myTab a ' ). cliciwch ( swyddogaeth ( e ) {  
  e . atalDefault ();
  $ ( hwn ). tab ( 'dangos' );
})

Gallwch chi actifadu tabiau unigol mewn sawl ffordd:

$ ( '#myTab a[href="#profile"] ' ). tab ( 'dangos' ); // Dewiswch tab yn ôl enw 
$ ( '#myTab a:cyntaf' ). tab ( 'dangos' ); // Dewiswch tab cyntaf 
$ ( '#myTab a:last' ). tab ( 'dangos' ); // Dewiswch y tab olaf 
$ ( '# myTab li:eq(2) a' ). tab ( 'dangos' ); // Dewiswch trydydd tab (0-mynegai) 

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. Bydd ychwanegu'r nava nav-tabsdosbarthiadau i'r tab ulyn cymhwyso arddull tab Bootstrap.

<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 nod cynhwysydd data-targetneu hrefnod targedu yn y DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <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 ( ) {  
    $ ( '#myTab a:last' ). tab ( 'dangos' );
  })
</script>

Digwyddiadau

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

Enghreifftiau

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.

Am resymau perfformiad, mae'r cyngor offer a data-apis popover yn optio i mewn, sy'n golygu bod yn rhaid i chi eu cychwyn eich hun .

Hofran dros y dolenni isod i weld awgrymiadau offer:

Pedwar cyfeiriad

Cynghorion offer mewn grwpiau mewnbwn

Wrth ddefnyddio cynghorion offer a popovers gyda'r grwpiau mewnbwn Bootstrap, bydd yn rhaid i chi osod yr containeropsiwn (a ddogfennir isod) i osgoi sgîl-effeithiau diangen.

Defnydd

Sbardunwch y cyngor trwy JavaScript:

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

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-animation="".

Marcio

<a href = " # " data-toggle = " tooltip " title = " cyngor cymorth cyntaf " > hofran drosof </a>   

Dulliau

$().tooltip(opsiynau)

Yn cysylltu triniwr cyngor offer wrth gasgliad elfennau.

.tooltip ('dangos')

Yn datgelu cyngor offer elfen.

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

.tooltip ('cuddio')

Yn cuddio cyngor offer elfen.

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

.tooltip ('toglo')

Toglo cyngor offer elfen.

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

.tooltip ('dinistrio')

Yn cuddio ac yn dinistrio cyngor offer elfen.

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

Enghreifftiau

Ychwanegu troshaenau bach o gynnwys, fel y rhai ar yr iPad, at unrhyw elfen ar gyfer lletya gwybodaeth eilaidd. Hofran dros y botwm i sbarduno'r popover. Angen cynnwys Tooltip .

Popover statig

Mae pedwar opsiwn ar gael: aliniad uchaf, dde, gwaelod a chwith.

Ni chynhyrchir unrhyw farcio a ddangosir fel popovers o JavaScript a chynnwys o fewn datapriodoledd.

Demo byw

Pedwar cyfeiriad

Defnydd

Galluogi popovers trwy JavaScript:

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

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-animation="".

Marcio

Am resymau perfformiad, mae'r Tooltip a'r Popover data-apis yn optio i mewn. Os hoffech eu defnyddio nodwch 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' )

.popover ('dinistrio')

Yn cuddio ac yn dinistrio popover elfen.

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

Rhybuddion enghreifftiol

Ychwanegu swyddogaeth diswyddo i bob neges rhybudd gyda'r ategyn hwn.

Defnydd

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…
})

Defnyddiau enghreifftiol

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

Datganol

Ychwanegu data-loading-text="Loading..."i ddefnyddio cyflwr llwytho ar fotwm.

<button type = "button" class = "btn btn-primary" data-loading-text = "Yn llwytho..." > Cyflwr llwytho </button>   

Togl sengl

Ychwanegu data-toggle="button"at actifadu toggling ar un botwm.

<button type = "button" class = "btn btn-primary" data-toggle = "botwm" > Toglo Sengl </button>   

Blwch ticio

Ychwanegu data-toggle="buttons-checkbox"ar gyfer toggling arddull blwch ticio ar btn-group.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Chwith </button>  
  <button type = "button" class = "btn btn-primary" > Canol </button>  
  <button type = "button" class = "btn btn-primary" > De </button>  
</div>

Radio

Ychwanegu data-toggle="buttons-radio"ar gyfer toggling arddull radio ar btn-group.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Chwith </button>  
  <button type = "button" class = "btn btn-primary" > Canol </button>  
  <button type = "button" class = "btn btn-primary" > De </button>  
</div>

Defnydd

Galluogi botymau trwy JavaScript:

$ ( '.nav-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.

Opsiynau

Dim

Dulliau

$().button('toglo')

Toglo cyflwr gwthio. Yn rhoi'r ymddangosiad i'r botwm ei fod wedi'i actifadu.

<button type = "button" class = "btn" data-toggle = "botwm" > … </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 type = " 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 type = "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.

* Yn gofyn am gynnwys yr ategyn Transitions.

Acordion enghreifftiol

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

<div class = "acordion" id = "acordion2" >  
  <div class = "acordion-group" > 
    <div class = "acordion-heading" > 
      <a class="acordion-toggle" data-toggle="llewygu" data-parent="#acordion2" href="#collapseOne"> _ _ _ _ _ _ _ _ _    
        Eitem Grŵp #1 y gellir ei Chwympo
      </a>
    </div>
    <div id = "collapseOne" class = "acordion-corff yn cwympo i mewn" >  
      <div class = "acordion-mewnol" > 
        Anim pariatur ystrydeb...
      </div>
    </div>
  </div>
  <div class = "acordion-group" > 
    <div class = "acordion-heading" > 
      <a class="acordion-toggle" data-toggle = "cwymp" data-parent = "#acordion2" href = "#collapseTwo"> _ _ _    
        Eitem Grŵp #2 y gellir ei Chwympo
      </a>
    </div>
    <div id = "collapseTwo" class = "cwymp acordion-corff" >  
      <div class = "acordion-mewnol" > 
        Anim pariatur ystrydeb...
      </div>
    </div>
  </div>
</div>
...

Gallwch hefyd ddefnyddio'r ategyn heb y marc acordion. Gwnewch fotwm togl ehangu a dymchwel elfen arall.

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

Defnydd

Trwy briodoleddau data

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.

I ychwanegu rheolaeth grŵp tebyg i acordion at reolydd cwympadwy, ychwanegwch y priodoledd data data-parent="#selector". Cyfeiriwch at y demo i weld hyn ar waith.

Trwy JavaScript

Galluogi â llaw gyda:

$ ( " .collapse " ). dymchwel ()

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-parent="".

Dulliau

.cwymp(opsiynau)

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

$ ( '#myCollapsible' ). dymchwel ({
  togl : ffug 
})

.cwymp ('toglo')

Toglo elfen sy'n cwympo i'w dangos neu ei chuddio.

. cwymp ('dangos')

Yn dangos elfen sy'n cwympo.

.cwymp ('cuddio')

Yn cuddio elfen sy'n cwympo.

Digwyddiadau

Mae dosbarth cwymp Bootstrap yn datgelu ychydig o ddigwyddiadau ar gyfer cysylltu â swyddogaeth cwympo.

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

Carwsél enghreifftiol

Mae'r sioe sleidiau isod yn dangos ategyn generig a chydran ar gyfer beicio trwy elfennau fel carwsél.

Label Mân-lun Cyntaf

Cras justo odio, dapibus ac facilisis yn, egestas eget quam. Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus. Nullam id dolor id ultricies vehicula ut id elit.

Label Ail Fawd

Cras justo odio, dapibus ac facilisis yn, egestas eget quam. Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus. Nullam id dolor id ultricies vehicula ut id elit.

Label Trydydd Bawd

Cras justo odio, dapibus ac facilisis yn, egestas eget quam. Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus. Nullam id dolor id ultricies vehicula ut id elit.

‹ ›

<div id = "myCarousel" class = "sleid carwsél" >  
  <ol class = "carwsél-dangosyddion" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "gweithredol" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Eitemau Carwsél -->
  <div class = "carwsél-mewnol" > 
    <div class = "eitem weithredol" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href = "#myCarousel" data-slide = "cynt" > & lsaquo ; </a>   
  <a class="carousel-control right" href="#myCarousel" data-slide = "nesaf" > & rsaquo ; _ </a>   
</div>

Defnydd

Trwy briodoleddau data

Defnyddio priodoleddau data i reoli lleoliad y carwsél yn hawdd. data-slideyn derbyn yr allweddeiriau prevneu next, sy'n newid safle'r sleidiau o'i gymharu â'i safle presennol. Fel arall, defnyddiwch data-slide-toi basio mynegai sleidiau crai i'r carwsél data-slide-to="2", sy'n neidio safle'r sleidiau i fynegai penodol sy'n dechrau gyda 0.

Trwy JavaScript

Ffoniwch y carwsél â llaw gyda:

$ ( '.carousel' ). carwsél ()

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScriptz. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-interval="".

Dulliau

.carwsél(opsiynau)

Yn cychwyn y carwsél gydag opsiynau dewisol objectac yn dechrau beicio trwy eitemau.

$ ( '.carousel' ). carwsél ({
  egwyl : 2000 
})

.carwsél ('cylch')

Beicio drwy'r eitemau carwsél o'r chwith i'r dde.

.carwsél ('saib')

Yn atal y carwsél rhag beicio trwy eitemau.

.carwsél(rhif)

Yn beicio'r carwsél i ffrâm benodol (0 seiliedig, tebyg i arae).

.carwsél ('blaenorol')

Cylchoedd i'r eitem flaenorol.

.carwsél ('nesaf')

Beiciau i'r eitem nesaf.

Digwyddiadau

Mae dosbarth carwsél Bootstrap yn datgelu dau ddigwyddiad ar gyfer cysylltu â swyddogaethau carwsél.

Enghraifft

Ategyn sylfaenol, hawdd ei ymestyn ar gyfer creu blaen-deip cain yn gyflym gydag unrhyw fewnbwn testun ffurf.

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

Byddwch chi eisiau gosod autocomplete="off"i atal dewislenni porwr diofyn rhag ymddangos dros y cwymplen teipio Bootstrap.

Defnydd

Trwy briodoleddau data

Ychwanegu priodoleddau data i gofrestru elfen gyda swyddogaeth teipio ymlaen llaw fel y dangosir yn yr enghraifft uchod.

Trwy JavaScript

Ffoniwch y teipiadur â llaw gyda:

$ ( '.typehead' ). teip blaen ()

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-source="".

Dulliau

.typehead(opsiynau)

Yn cychwyn mewnbwn gyda blaendeip.

Enghraifft

Mae'r is-llywio ar y chwith yn arddangosiad byw o'r ategyn affix.

Defnydd

Trwy briodoleddau data

Er mwyn ychwanegu ymddygiad affix i unrhyw elfen yn hawdd, ychwanegwch data-spy="affix"at yr elfen rydych chi am sbïo arni. Yna defnyddiwch wrthbwyso i ddiffinio pryd i newid pinio elfen ymlaen ac i ffwrdd.

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

Trwy JavaScript

Ffoniwch yr ategyn affix trwy JavaScript:

$ ( '# navbar' ). gosod ()

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-offset-top="200".