Olukuluku tabi akopọ

Awọn afikun le wa pẹlu ẹyọkan (botilẹjẹpe diẹ ninu awọn ti nilo awọn igbẹkẹle), tabi gbogbo ni ẹẹkan. Awọn mejeeji bootstrap.js ati bootstrap.min.js ni gbogbo awọn afikun ninu faili kan.

Awọn eroja data

O le lo gbogbo awọn afikun Bootstrap nikan nipasẹ API isamisi laisi kikọ laini kan ti JavaScript. Eyi jẹ API kilasi akọkọ Bootstrap ati pe o yẹ ki o jẹ akiyesi akọkọ rẹ nigbati o nlo ohun itanna kan.

Iyẹn ti sọ, ni awọn ipo miiran o le jẹ iwunilori lati pa iṣẹ ṣiṣe yii. Nitoribẹẹ, a tun pese agbara lati mu awọn abuda data API kuro nipa yiyọ gbogbo awọn iṣẹlẹ lori orukọ ara ti o ni aaye pẹlu `'data-api'`. Eyi dabi eyi:

$ ( 'ara' ). pipa ( '.data-api' )

Ni omiiran, lati fojusi ohun itanna kan pato, kan ṣafikun orukọ ohun itanna bi aaye orukọ kan pẹlu aaye orukọ data-api bii eyi:

$ ( 'ara' ). pipa ( '.alert.data-api' )

API ètò

A tun gbagbọ pe o yẹ ki o ni anfani lati lo gbogbo awọn afikun Bootstrap nikan nipasẹ JavaScript API. Gbogbo API ti gbogbo eniyan jẹ ẹyọkan, awọn ọna ẹwọn, ati da ikojọpọ ti a ṣiṣẹ lori pada.

$ ( ".btn.danger" ). bọtini ( "bayi" ). addClass ( "ọra" )

Gbogbo awọn ọna yẹ ki o gba ohun aṣayan aṣayan, okun ti o fojusi ọna kan pato, tabi ohunkohun (eyiti o bẹrẹ ohun itanna kan pẹlu ihuwasi aiyipada):

$ ( "#myModal" ). modal () // ipilẹṣẹ pẹlu awọn aiyipada                       
$ ( "#myModal" ). modal ({ bọọdù : irọ }) // ti a ṣe ipilẹṣẹ lai si keyboard     
$ ( "#myModal" ). modal ( 'fihan' ) // awọn ipilẹṣẹ ati awọn invokes fihan lẹsẹkẹsẹ                

Ohun itanna kọọkan tun ṣe afihan olupilẹṣẹ aise rẹ lori ohun-ini `Constructor` $.fn.popover.Constructor:. Ti o ba fẹ lati gba apẹẹrẹ itanna kan pato, gba pada taara lati ẹya: $('[rel=popover]').data('popover').

Ko si Rogbodiyan

Nigba miiran o jẹ dandan lati lo awọn afikun Bootstrap pẹlu awọn ilana UI miiran. Ni awọn ipo wọnyi, awọn ikọlu aaye orukọ le waye lẹẹkọọkan. Ti eyi ba ṣẹlẹ, o le pe .noConflictohun itanna ti o fẹ lati yi iye pada.

var bootstrapButton = $ . fn . bọtini . noConflict () // pada $.fn.bọtini si iye ti a yàn tẹlẹ 
$ . fn . bootstrapBtn = bootstrapButton             // fun $ () .bootstrapBtn iṣẹ-ṣiṣe bootstrap

Awọn iṣẹlẹ

Bootstrap n pese awọn iṣẹlẹ aṣa fun ọpọlọpọ awọn iṣe alailẹgbẹ ti ohun itanna. Ni gbogbogbo, iwọnyi wa ni fọọmu ailopin ati ti o ti kọja - nibiti ailopin (fun apẹẹrẹ show) ti jẹ okunfa ni ibẹrẹ iṣẹlẹ, ati fọọmu apakan ti o kọja (fun apẹẹrẹ shown) jẹ okunfa lori ipari iṣẹ kan.

Gbogbo awọn iṣẹlẹ ailopin pese idilọwọ iṣẹ ṣiṣe Aiyipada. Eyi n pese agbara lati da ipaniyan iṣe ṣaaju ki o to bẹrẹ.

$ ( '#myModal' ). lori ( 'fihan' , iṣẹ ( e ) {   
    ti (! data ) pada e . idilọwọDefault () // da modal duro lati han   
})

Nipa awọn iyipada

Fun awọn ipa iyipada ti o rọrun, pẹlu bootstrap-transition.js lẹẹkan lẹgbẹẹ awọn faili JS miiran. Ti o ba nlo bootstrap.js ti a ṣajọpọ (tabi miniified) , ko si ye lati ṣafikun eyi — o ti wa tẹlẹ.

Lo awọn igba

Awọn apẹẹrẹ diẹ ti ohun itanna iyipada:

• Sisun tabi ipare ni modals
• Ipare jade awọn taabu
• Fading jade titaniji
• Sisun carousel PAN

Awọn apẹẹrẹ

Modals ti wa ni ṣiṣan, ṣugbọn rọ, awọn itọsi ọrọ sisọ pẹlu iṣẹ ṣiṣe ti o kere julọ ti a beere ati awọn aṣiṣe ọlọgbọn.

Apẹẹrẹ aimi

Modal ti a ṣe pẹlu akọsori, ara, ati ṣeto awọn iṣe ni ẹlẹsẹ.

<div class = "modal hide ipare" > 
  <div kilasi = "modal-akọsori" > 
    <bọtini iru = "bọtini" kilasi = "sunmọ" data-dismiss = "modal" aria-hidden = "otitọ" > × </bọtini>    
    <h3> Akọsori awoṣe </h3>
  </div>
  <div class = "modal-body" > 
    <p> Ara kan ti o dara… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" kilasi = "btn"> Pade </a> _  
    <a href = "#" kilasi = "btn btn-primary" > Fipamọ awọn ayipada </a>  
  </div>
</div>

Live demo

Yi modal pada nipasẹ JavaScript nipa titẹ bọtini ni isalẹ. Yoo rọra si isalẹ ati ipare ni lati oke ti oju-iwe naa.

<!-- Bọtini lati ṣe okunfa modal -->
<a href = "#myModal" ipa = "bọtini" kilasi = "btn" data-toggle = "modal" > Ifilọlẹ demo modal </a>    
 
<!-- Modal -->
<div id = "myModal" kilasi = "modal hide fade" tabindex = "-1" ipa = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "otitọ" >      
  <div kilasi = "modal-akọsori" > 
    <button type = "bọtini" kilasi = "sunmọ" data-dismiss = "modal" aria-hidden = "otitọ" > × </button>    
    <h3 id = "myModalLabel" > Akọsori awoṣe </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Ara kan ti o dara… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "otitọ" > Pade </button>   
    <bọtini kilasi = "btn btn-primary" > Fipamọ awọn ayipada </button> 
  </div>
</div>

Lilo

Nipasẹ awọn abuda data

Mu modal ṣiṣẹ laisi kikọ JavaScript. Ṣeto data-toggle="modal"lori eroja oludari, bii bọtini kan, pẹlu kan data-target="#foo"tabi href="#foo"lati fojusi modal kan pato lati yi.

<button type = "bọtini" data-toggle = "modal" data-target = "#myModal" > Modal ifilọlẹ </button>   

Nipasẹ JavaScript

Pe modal pẹlu id myModalpẹlu laini JavaScript kan:

$ ( '#myModal' ). modal ( awọn aṣayan )

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-backdrop="".

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

Awọn ọna

.modal(awọn aṣayan)

Mu akoonu rẹ ṣiṣẹ bi modal. Gba awọn aṣayan iyan object.

$ ( '#myModal' ). modal ({
  keyboard : eke 
})

.modal('yí')

Pẹlu ọwọ yipada modal kan.

$ ( '#myModal' ). modal ( 'bayi' )

.modal('ifihan')

Pẹlu ọwọ ṣii modal kan.

$ ( '#myModal' ). modal ( 'ifihan' )

.modal('tọju')

Pẹlu ọwọ hides a modal.

$ ( '#myModal' ). modal ( 'tọju' )

Awọn iṣẹlẹ

Kilasi modal Bootstrap ṣafihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ ṣiṣe modal.

$ ( '#myModal' ). lori ( 'farasin' , iṣẹ () {   
  // se nkan…
})

Awọn apẹẹrẹ

Ṣafikun awọn akojọ aṣayan silẹ si ohunkohun pẹlu ohun itanna ti o rọrun yii, pẹlu navbar, awọn taabu, ati awọn oogun.

Laarin a navbar

Laarin awọn taabu

Lilo

Nipasẹ awọn abuda data

Ṣafikun data-toggle="dropdown"si ọna asopọ kan tabi bọtini lati yi jisilẹ silẹ.

<div kilasi = "silẹ silẹ" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Ohun okunfa sisọ silẹ </a>   
  <ul class = "menu dropdown" ipa = "akojọ-akojọ" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Lati jẹ ki awọn URL wa titi, lo data-targetabuda dipo href="#".

<div kilasi = "silẹ silẹ" > 
  <a class = "dropdown-toggle" id = "dLabel" ipa = "bọtini" data-toggle = " dropdown" data-target = "#" href = "/page.html" >      
    Faa silẹ
    <b kilasi = "abojuto" </b> 
  </a>
  <ul class = "menu dropdown" ipa = "akojọ-akojọ" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Nipasẹ JavaScript

Pe awọn silẹ nipasẹ JavaScript:

$ ( '.dropdown-toggle' ). silẹ ()

Awọn aṣayan

Ko si

Awọn ọna

$() silẹ ('yipada')

Api eto kan fun awọn akojọ aṣayan yipo fun navbar ti a fun tabi lilọ kiri taabu.

Apeere ni navbar

Ohun itanna ScrollSpy jẹ fun mimu dojuiwọn awọn ibi-afẹde nav da lori ipo yi lọ. Yi lọ si agbegbe ni isalẹ navbar ki o wo iyipada kilasi ti nṣiṣe lọwọ. Awọn nkan isọ silẹ yoo jẹ afihan bi daradara.

Lilo

Nipasẹ awọn abuda data

Lati fi awọn iṣọrọ scrollspy ihuwasi si rẹ topbar lilọ, o kan fi data-spy="scroll"si awọn ano ti o fẹ lati ṣe amí lori (julọ ojo melo yi yoo jẹ ara) ati data-target=".navbar"lati yan eyi ti nav lati lo. Iwọ yoo fẹ lati lo scrollspy pẹlu .navpaati kan.

<body data-spy = "yi lọ" data-target = ".navbar" > ... </body>  

Nipasẹ JavaScript

Pe scrollspy nipasẹ JavaScript:

$ ( '#navbar' ). scrollspy ()

Awọn ọna

.scrollspy('itura')

Nigbati o ba nlo scrollspy ni apapo pẹlu fifi kun tabi yiyọ awọn eroja kuro lati DOM, iwọ yoo nilo lati pe ọna isọdọtun bii bẹ:

$ ( '[data-spy="yilọ" ). kọọkan ( iṣẹ () {  
  var $ amí = $ ( eyi ). scrollspy ( 'itura' )
});

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-offset="".

Awọn iṣẹlẹ

Awọn taabu apẹẹrẹ

Ṣafikun iyara, iṣẹ ṣiṣe taabu ti o ni agbara si iyipada nipasẹ awọn pane ti akoonu agbegbe, paapaa nipasẹ awọn akojọ aṣayan silẹ.

Lilo

Mu awọn taabu taabu ṣiṣẹ nipasẹ JavaScript (taabu kọọkan nilo lati muu ṣiṣẹ ni ẹyọkan):

$ ( '#myTab a' ). tẹ ( iṣẹ ( e ) {  
  e . idilọwọ Aiyipada ();
  $ ( eyi ). taabu ( 'ifihan' );
})

O le mu awọn taabu kọọkan ṣiṣẹ ni awọn ọna pupọ:

$ ( '#myTab a[href="#profaili"]' ). taabu ( 'ifihan' ); // Yan taabu nipa orukọ 
$ ( '#myTab a: akọkọ' ). taabu ( 'ifihan' ); // Yan taabu akọkọ 
$ ( '#myTab a: kẹhin' ). taabu ( 'ifihan' ); // Yan kẹhin taabu 
$ ( '#myTab li: eq(2) a' ). taabu ( 'ifihan' ); // Yan taabu kẹta (0-itọkasi) 

Siṣamisi

O le mu taabu kan ṣiṣẹ tabi lilọ kiri egbogi laisi kikọ eyikeyi JavaScript nipa sisọ pato data-toggle="tab"tabi data-toggle="pill"lori nkan kan. Ṣafikun navati nav-tabsawọn kilasi si taabu ulyoo lo iselona taabu Bootstrap.

<ul kilasi = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "taabu" > Ile </a></li>  
  <li><a href = "#profile" data-toggle = "taabu" > Profaili </a></li>  
  <li><a href = "#messages" data-toggle = "taabu" > Awọn ifiranṣẹ </a></li>  
  <li><a href = "#settings" data-toggle = "taabu" > Eto </a></li>  
</ul>

Awọn ọna

$().taabu

Mu eroja taabu ṣiṣẹ ati eiyan akoonu. Taabu yẹ ki o ni boya a data-targettabi hrefifọkansi oju ipade apoti kan ninu DOM.

<ul kilasi = "nav nav-tabs" id = "myTab" >  
  <li class = "lọwọ" ><a href = "#ile" > Ile </a></li>  
  <li > <a href = "#profaili"> Profaili </a></li> 
  <li><a href = "#messages" > Awọn ifiranṣẹ </a></li> 
  <li><a href = "#eto" > Eto </a></li> 
</ul>
 
<div class = "akoonu-taabu" > 
  <div class = "tab-pane active" id = "ile" > ... </div>  
  <div class = "tab-pane" id = "profaili" > ... </div>  
  <div class = "tab-pane" id = "awọn ifiranṣẹ" > ... </div>  
  <div class = "tab-pane" id = "awọn eto" > ... </div>  
</div>
 
<akosile>
  $ ( iṣẹ () {  
    $ ( '#myTab a: kẹhin' ). taabu ( 'ifihan' );
  })
</script>

Awọn iṣẹlẹ

$ ( 'a[data-toggle = "taabu"]' ). lori ( 'fi han' , iṣẹ ( e ) {   
  e . afojusun // mu ṣiṣẹ taabu
  e . jẹmọTarget // ti tẹlẹ taabu
})

Awọn apẹẹrẹ

Atilẹyin nipasẹ ohun itanna jQuery.tipsy ti o dara julọ ti a kọ nipasẹ Jason Frame; Awọn imọran irinṣẹ jẹ ẹya imudojuiwọn, eyiti ko gbẹkẹle awọn aworan, lo CSS3 fun awọn ohun idanilaraya, ati awọn abuda data fun ibi ipamọ akọle agbegbe.

Fun awọn idi iṣẹ ṣiṣe, ohun elo irinṣẹ ati popover data-apis ti wọle, afipamo pe o gbọdọ ṣe ipilẹṣẹ wọn funrararẹ .

Raba lori awọn ọna asopọ ni isalẹ lati wo awọn imọran irinṣẹ:

Awọn itọnisọna mẹrin

Awọn imọran irinṣẹ ni awọn ẹgbẹ titẹ sii

Nigbati o ba nlo awọn itọsi irinṣẹ ati awọn agbejade pẹlu awọn ẹgbẹ titẹ sii Bootstrap, iwọ yoo ni lati ṣeto containeraṣayan (ti o ṣe iwe ni isalẹ) lati yago fun awọn ipa ẹgbẹ ti aifẹ.

Lilo

Ṣe okunfa ohun elo irinṣẹ nipasẹ JavaScript:

$ ( '#apẹẹrẹ' ). ohun elo ( awọn aṣayan )

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-animation="".

Siṣamisi

<a href = "#" data-toggle = "tooltip" akọle = "Tooltip akọkọ" > rababa lori mi </a>   

Awọn ọna

$() ohun elo (awọn aṣayan)

So olutọpa ohun elo kan si ikojọpọ eroja.

.tooltip('ifihan')

Ṣe afihan ohun elo irinṣẹ eroja kan.

$ ( '# ano' ). ọpa irinṣẹ ( 'ifihan' )

.tooltip('tọju')

Ìbòmọlẹ ohun ano ká irinṣẹ.

$ ( '# ano' ). ọpa irinṣẹ ( 'tọju' )

.tooltip('yí')

Yipada ohun elo itọsi irinṣẹ.

$ ( '# ano' ). ọpa irinṣẹ ( 'bayi' )

.tooltip('run')

Hides ati ki o run ohun ano ká irinṣẹ.

$ ( '# ano' ). ọpa irinṣẹ ( 'run' )

Awọn apẹẹrẹ

Ṣafikun awọn agbekọja kekere ti akoonu, bii awọn ti o wa lori iPad, si eyikeyi ipin fun alaye Atẹle ile. Raba lori bọtini lati ma nfa popover naa. Nilo Italolobo Irinṣẹ lati wa pẹlu.

Agbejade aimi

Awọn aṣayan mẹrin wa: oke, ọtun, isalẹ, ati ti osi.

Ko si isamisi ti o han bi awọn agbejade ti wa ni ipilẹṣẹ lati JavaScript ati akoonu laarin dataabuda kan.

Live demo

Awọn itọnisọna mẹrin

Lilo

Mu awọn agbejade ṣiṣẹ nipasẹ JavaScript:

$ ( '#apẹẹrẹ' ). popover ( awọn aṣayan )

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-animation="".

Siṣamisi

Fun awọn idi iṣẹ ṣiṣe, Ohun elo irinṣẹ ati Agbejade data-apis n wọle. Ti o ba fẹ lati lo wọn kan pato aṣayan yiyan.

Awọn ọna

$().popover(awọn aṣayan)

Initializes popovers fun ohun akojọpọ eroja.

.popover('ifihan')

Ṣe afihan awọn eroja popover.

$ ( '# ano' ). popover ( 'ifihan' )

.popover('tọju')

Ìbòmọlẹ ohun eroja popover.

$ ( '# ano' ). popover ( 'tọju' )

.popover('toggle')

Yipada awọn eroja agbejade.

$ ( '# ano' ). popover ( 'yii' )

.popover('run')

Hides ati ki o run ohun ano ká popover.

$ ( '# ano' ). popover ( 'run' )

Awọn itaniji apẹẹrẹ

Ṣafikun iṣẹ idasile si gbogbo awọn ifiranṣẹ itaniji pẹlu ohun itanna yii.

Lilo

Jeki yiyọ kuro ti itaniji nipasẹ JavaScript:

$ ( "titaniji" ). gbigbọn ()

Siṣamisi

Kan ṣafikun data-dismiss="alert"si bọtini isunmọ rẹ lati funni ni iṣẹ ṣiṣe isunmọ titaniji laifọwọyi.

<a class = "sunmọ" data-dismiss = "titaniji" href = "#" > & igba; </a>   

Awọn ọna

$() titaniji()

Murasilẹ gbogbo awọn titaniji pẹlu iṣẹ ṣiṣe to sunmọ. Lati jẹ ki awọn titaniji rẹ gbe jade nigba pipade, rii daju pe wọn ni .fadeati .inkilasi ti lo tẹlẹ si wọn.

.titaniji('sunmọ')

Tilekun itaniji.

$ ( "titaniji" ). gbigbọn ( 'sunmọ' )

Awọn iṣẹlẹ

Kilasi gbigbọn Bootstrap ṣafihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ ṣiṣe titaniji.

$ ( '#mi-ititaniji' ). dè ( 'ni pipade' , iṣẹ () {   
  // se nkan…
})

Awọn lilo apẹẹrẹ

Ṣe diẹ sii pẹlu awọn bọtini. Awọn ipinlẹ bọtini iṣakoso tabi ṣẹda awọn ẹgbẹ ti awọn bọtini fun awọn paati diẹ sii bi awọn ọpa irinṣẹ.

Stateful

Fikun -un data-loading-text="Loading..."lati lo ipo ikojọpọ lori bọtini kan.

<button type = "bọtini" kilasi = "btn btn-primary" data-loading-text = "Ṣiṣe ikojọpọ..." > Ipo ikojọpọ </button>   

Yiyi ẹyọkan

Fikun -un data-toggle="button"lati mu yiyi ṣiṣẹ lori bọtini ẹyọkan.

<button type = "bọtini" kilasi = "btn btn-primary" data-toggle = "bọtini" > Yiyi ẹyọkan </button>   

Apoti ayẹwo

Ṣafikun data-toggle="buttons-checkbox"fun aṣa aṣayẹwo toggling lori ẹgbẹ btn.

<div class = "btn-group" data-toggle = "bọtini-checkbox" >  
  <button type = "bọtini" kilasi = "btn btn-primary" > Osi </button>  
  <button type = "bọtini" kilasi = "btn btn-primary" > Aarin </button>  
  <button type = "bọtini" kilasi = "btn btn-primary" > Ọtun </button>  
</div>

Redio

Fikun -un data-toggle="buttons-radio"fun yiyi ara redio lori ẹgbẹ btn.

<div class = "btn-group" data-toggle = "awọn bọtini-redio" >  
  <button type = "bọtini" kilasi = "btn btn-primary" > Osi </button>  
  <button type = "bọtini" kilasi = "btn btn-primary" > Aarin </button>  
  <button type = "bọtini" kilasi = "btn btn-primary" > Ọtun </button>  
</div>

Lilo

Mu awọn bọtini ṣiṣẹ nipasẹ JavaScript:

$ ( '.nav-tabs' ). bọtini ()

Siṣamisi

Awọn abuda data jẹ pataki si ohun itanna bọtini. Ṣayẹwo koodu apẹẹrẹ ni isalẹ fun awọn oriṣi isamisi oriṣiriṣi.

Awọn aṣayan

Ko si

Awọn ọna

$()bọtini ('yipo')

Toggles titari ipinle. Yoo fun bọtini naa hihan ti o ti muu ṣiṣẹ.

<bọtini iru = "bọtini" kilasi = "btn" data-toggle = "bọtini" > … </button>    

$().bọtini('ikojọpọ')

Ṣeto ipo bọtini si ikojọpọ - mu bọtini ṣiṣẹ ati yi ọrọ pada si ọrọ ikojọpọ. Ọrọ ikojọpọ yẹ ki o ṣalaye lori bọtini bọtini ni lilo abuda data data-loading-text.

<button type = "bọtini" kilasi = "btn" data-loading-text = "ikojọpọ nkan..." > ... </button>    

$().bọtini('tunto')

Tun ipo bọtini atunto - yi ọrọ pada si ọrọ atilẹba.

$().bọtini (okun)

Tun ipo bọtini atunto - yi ọrọ pada si eyikeyi ipo ọrọ asọye data.

<button type = "bọtini" kilasi = "btn" data-complete-text = "pari!" > ... </bọtini>    
<akosile>
  $ ( '.btn' ). bọtini ( 'pari' )
</script>

Nipa

Gba awọn aza ipilẹ ati atilẹyin to rọ fun awọn paati ikojọpọ bi accordions ati lilọ kiri.

* Nilo ohun itanna Awọn iyipada lati wa pẹlu.

Accordion apẹẹrẹ

Lilo ohun itanna idapọ, a kọ ẹrọ ailorukọ ara accordion ti o rọrun:

<div class = "accordion" id = "accordion2" >  
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Collapsible Ẹgbẹ Nkan # 1
      </a>
    </div>
    <div id = "collapseOne" kilasi = "accordion-body Collapse ni" >  
      <div class = "accordion-inner" > 
        Animu pariatur cliche...
      </div>
    </div>
  </div>
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Collapsible Ẹgbẹ Nkan #2
      </a>
    </div>
    <div id = "collapseTwo" kilasi = "accordion-body Collapse" >  
      <div class = "accordion-inner" > 
        Animu pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

O tun le lo ohun itanna laisi ami ami accordion. Ṣe bọtini kan yi iyipada ti o pọ si ati fifọ ti nkan miiran.

<button type = "bọtini" kilasi = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  o rọrun collapsible
</bọtini>
 
<div id = "demo" kilasi = "kolula sinu" > … </div>  

Lilo

Nipasẹ awọn abuda data

Kan ṣafikun data-toggle="collapse"ati ipin data-targetkan lati fi iṣakoso laifọwọyi ti nkan kan ti o le kọlu. Ẹya naa data-targetgba oluyan css kan lati lo iṣubu si. Rii daju lati ṣafikun kilasi collapsenaa si nkan ti o le ṣubu. Ti o ba fẹ ki o ṣii aiyipada, ṣafikun afikun kilasi in.

Lati ṣafikun iṣakoso ẹgbẹ bi accordion si iṣakoso ikojọpọ, ṣafikun abuda data naa data-parent="#selector". Tọkasi demo lati wo eyi ni iṣe.

Nipasẹ JavaScript

Mu ṣiṣẹ pẹlu ọwọ pẹlu:

$ ( ".collapse" ). ṣubu ()

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-parent="".

Awọn ọna

.collapse(awọn aṣayan)

Mu akoonu rẹ ṣiṣẹ bi eroja ti o le kolu. Gba awọn aṣayan iyan object.

$ ( '#myCollapsible' ). ṣubu ({
  toggle : iro 
})

.kolapse('yii')

Yi eroja ti o le kolu pada si ifihan tabi pamọ.

.kolapse('ifihan')

Ṣe afihan eroja ti o le ṣubu.

.kolapse('tọju')

Ìbòmọlẹ ohun kan collapsible.

Awọn iṣẹlẹ

Kilasi Collapse Bootstrap ṣafihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ ṣiṣe iṣubu.

$ ( '#myCollapsible' ). lori ( 'farasin' , iṣẹ () {   
  // se nkan…
})

Apeere carousel

Ni agbelera ni isalẹ fihan ohun itanna jeneriki ati paati fun gigun kẹkẹ nipasẹ awọn eroja bii carousel kan.

Aami eekanna atanpako akọkọ

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit ti kii mi porta gravida ati 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.

‹ ›

<div id = "myCarousel" kilasi = " ifaworanhan carousel " >  
  <ol kilasi = "carousel-itọkasi" > 
    <li data-target = "#myCarousel" data-slide-to = "0" kilasi = "lọwọ" </li>   
    <li data-target = "#myCarousel" data-slide-to = "1" </li>  
    <li data-target = "#myCarousel" data-slide-to = "2" </li>  
  </ol>
  <!-- Awọn nkan Carousel -->
  <div class = "carousel-inner" > 
    <div class = "ohun ti nṣiṣe lọwọ" > … </div> 
    <div class = "ohun kan" > … </div> 
    <div class = "ohun kan" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control osi" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "tókàn" > & rsaquo; </a>   
</div>

Lilo

Nipasẹ awọn abuda data

Lo awọn abuda data lati ṣakoso ni irọrun ipo ti carousel. data-slidegba awọn koko-ọrọ prevtabi next, eyiti o paarọ ipo ifaworanhan ni ibatan si ipo lọwọlọwọ. Ni omiiran, lo data-slide-tolati kọja atọka ifaworanhan aise si carousel data-slide-to="2", eyiti o fo ni ipo ifaworanhan si atọka kan pato ti o bẹrẹ pẹlu 0.

Nipasẹ JavaScript

Pe carousel pẹlu ọwọ pẹlu:

$ ( '.carousel' ). carousel ()

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScriptz. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-interval="".

Awọn ọna

.carousel(awọn aṣayan)

Ti bẹrẹ carousel pẹlu awọn aṣayan iyan objectati bẹrẹ gigun kẹkẹ nipasẹ awọn ohun kan.

$ ( '.carousel' ). carousel ({
  aarin : 2000 
})

.carousel('cycle')

Yiyipo nipasẹ awọn ohun carousel lati osi si otun.

.carousel('daduro')

Da carousel duro lati gigun kẹkẹ nipasẹ awọn ohun kan.

.carousel(nọmba)

Yi kẹkẹ carousel lọ si fireemu kan pato (orisun 0, iru si orun).

.carousel('tẹlẹ')

Awọn iyipo si nkan ti tẹlẹ.

.carousel('tókàn')

Awọn iyipo si nkan atẹle.

Awọn iṣẹlẹ

Kilasi carousel Bootstrap ṣafihan awọn iṣẹlẹ meji fun sisọ sinu iṣẹ ṣiṣe carousel.

Apeere

Ipilẹ kan, ohun itanna ti o gbooro ni irọrun fun ṣiṣẹda ni iyara awọn oriṣi ti o wuyi pẹlu titẹ ọrọ fọọmu eyikeyi.

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

Iwọ yoo fẹ lati ṣeto autocomplete="off"lati yago fun awọn akojọ aṣayan aṣawakiri aiyipada lati han lori sisọ silẹ iru-ori Bootstrap.

Lilo

Nipasẹ awọn abuda data

Ṣafikun awọn abuda data lati forukọsilẹ nkan kan pẹlu iṣẹ ṣiṣe oriṣi bi o ṣe han ninu apẹẹrẹ loke.

Nipasẹ JavaScript

Pe typehead pẹlu ọwọ pẹlu:

$ ( '.typehead' ). oriṣi ori ()

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-source="".

Awọn ọna

.typehead(awọn aṣayan)

Ti bẹrẹ titẹ sii pẹlu ori oriṣi.

Apeere

Subnavigation ti o wa ni apa osi jẹ demo ifiwe ti ohun itanna affix.

Lilo

Nipasẹ awọn abuda data

Lati fi irọrun ṣafikun ihuwasi affix si eyikeyi eroja, kan ṣafikun data-spy="affix"si ipin ti o fẹ ṣe amí lori. Lẹhinna lo awọn aiṣedeede lati ṣalaye nigbati o ba yipada pinning ti nkan kan tan ati pipa.

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

Nipasẹ JavaScript

Pe ohun itanna affix nipasẹ JavaScript:

$ ( '#navbar' ). so ()

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-offset-top="200".