Ynglŷn â moddau

Cymeriad symlach, ond hyblyg, 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 naill ai ar yr elfen reoli neu'r marcio moddol ei hun.

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

<div class = "cuddio moddal" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3> Pennawd moddol </h3>
  </div>
  <div class = "modal-corff" > 
    <p> Un corff main… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = " # " class = " btn " data-dismiss = " modal " > Cau </a>   
    <a href = " # " class = " btn btn-primary " > Cadw newidiadau </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 dropdown yn y bar llywio a'r pils isod i brofi cwymplenni.

• Cyswllt rheolaidd
• Gollwng i lawr
  • Action
  • Another action
  • Something else here
  • Separated link
• Cwymp 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Cwymp 3
  • Action
  • Another action
  • Something else here
  • Separated link

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 = "nav nav-pills" > 
  < 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>

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

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="llwybr/i/page.html"> _ _ _ _ _ _ _ _ _    
      Gollwng i lawr
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </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 yn hawdd at eich llywio bar uchaf, ychwanegwch data-spy="scroll"at yr elfen rydych chi am sbïo arno (y corff fyddai hwn fel arfer).

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

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

Digwyddiadau

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
  • @fat
  • @mdo

Gan ddefnyddio bootstrap-tab.js

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

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

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

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'u cymhwyso 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:

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

<!-- 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 toggling 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'r ymddangosiad i'r botwm 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')

Ailosod cyflwr botwm - 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.

* Yn gofyn am gynnwys yr ategyn Transitions.

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

Ynghylch

Ategyn generig ar gyfer beicio trwy elfennau. A llawen-go-rownd.

Carwsél enghreifftiol

Gwyliwch y sioe sleidiau isod.

Label Mân-lun Cyntaf

Cras justo odio, dapibus ac facilisis mewn, 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 mewn, 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 mewn, egestas eget quam. Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus. Nullam id dolor id ultricies vehicula ut id elit.

‹ ›

Defnyddio bootstrap-carousel.js

Ffoniwch trwy javascript:

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

Opsiynau

Marcio

Defnyddir priodoleddau data ar gyfer y rheolaethau blaenorol a'r rheolaethau nesaf. Edrychwch ar y marcio enghreifftiol isod.

<div id = "myCarousel" class = "sleid carwsél" >  
  <!-- 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>

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.

Ynghylch

Ategyn sylfaenol, hawdd ei ymestyn ar gyfer creu blaenau teip cain yn gyflym gydag unrhyw fewnbwn testun ffurf.

Enghraifft

Dechreuwch deipio yn y maes isod i ddangos y canlyniadau teipio ymlaen llaw.

Defnyddio bootstrap-typeahead.js

Ffoniwch y teip ymlaen trwy javascript:

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

Opsiynau

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.