Dwar modali

A simplifikata, iżda flessibbli, tieħu fuq il-plugin modali javascript tradizzjonali biss bil-funzjonalità minima meħtieġa u defaults intelliġenti.

Eżempju statiku

Hawn taħt hemm modal mogħtija b'mod statiku.

Demo live

Aqleb modal permezz ta' javascript billi tikklikkja l-buttuna hawn taħt. Jiżżerżaq 'l isfel u jisparixxi mill-parti ta' fuq tal-paġna.

Bl-użu bootstrap-modal

Ċempel il-modal permezz ta' javascript:

$ ( '#Modal tiegħi' ). modali ( għażliet )

Għażliet

Markup

Tista' tattiva l-modals fuq il-paġna tiegħek faċilment mingħajr ma jkollok tikteb linja waħda ta' javascript. Issettja biss data-toggle="modal"fuq element ta 'kontrollur b'jew data-target="#foo"li href="#foo"jikkorrispondi għal id element modali, u meta għafast, se tniedi l-modal tiegħek.

Ukoll, biex iżżid għażliet mal-istanza modali tiegħek, inkludihom biss bħala attributi tad-dejta addizzjonali jew fuq l-element ta 'kontroll jew fuq il-markup modali innifsu.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Tnedija Modali </a>    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3> Header modali </h3>
  </div>
  <div class = "modal-body" > 
    <p> Korp wieħed fin... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Agħlaq </a>   
    <a href = "#" class = "btn btn-primary" > Issejvja l-bidliet </a>  
  </div>
</div>

Metodi

.modal(għażliet)

Jattiva l-kontenut tiegħek bħala modal. Jaċċetta għażliet fakultattivi object.

$ ( '#Modal tiegħi' ). modali ({
  tastiera : falza 
})

.modal('toggle')

Manwalment toggles modali.

$ ( '#Modal tiegħi' ). modali ( 'toggle' )

.modal('show')

Manwalment tiftaħ modali.

$ ( '#Modal tiegħi' ). modali ( 'turi' )

.modal('hide')

Manwalment jaħbi modali.

$ ( '#Modal tiegħi' ). modali ( 'ħbi' )

Avvenimenti

Il-klassi modali ta 'Bootstrap tesponi ftit avvenimenti biex tgħaqqad il-funzjonalità modali.

$ ( '#Modal tiegħi' ). fuq ( 'moħbi' , funzjoni () {   
  // agħmel xi ħaġa...
})

Dwar dropdowns

Żid menus dropdown għal kważi kull ħaġa f'Bootstrap b'dan il-plugin sempliċi. Bootstrap karatteristiċi appoġġ sħiħ dropdown menu fuq fin-navbar, tabs, u pilloli.

Eżempji

Ikklikkja fuq il-links nav dropdown fin-navbar u pilloli hawn taħt biex tittestja dropdowns.

• Link regolari
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropdown 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropdown 3
  • Action
  • Another action
  • Something else here
  • Separated link

Bl-użu bootstrap-dropdown.js

Ċempel il-dropdowns permezz ta' javascript:

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

Markup

Biex iżżid malajr il-funzjonalità dropdown ma 'kwalunkwe element żid biss data-toggle="dropdown"u kwalunkwe dropdown bootstrap validu jiġi attivat awtomatikament.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Link regolari </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Dropdown
      <b class = "caret" ></b> 
    </a>
    <ul class = "menu dropdown" > 
      <li><a href = "#" > Azzjoni </a></li> 
      <li><a href = "#" > Azzjoni oħra </a></li> 
      <li><a href = "#" > Xi ħaġa oħra hawn </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Rabta separata </a></li> 
    </ul>
  </li>
  ...
</ul>

Biex iżżomm l-URLs intatti, uża l- data-targetattribut minflok href="#".

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Dropdown
      <b class = "caret" ></b> 
    </a>
    <ul class = "menu dropdown" > 
      ...
    </ul>
  </li>
</ul>

Metodi

$().dropdown()

Api programmatiku għall-attivazzjoni tal-menus għal navbar partikolari jew navigazzjoni bit-tabbed.

Il-plugin ScrollSpy huwa għall-aġġornament awtomatiku tal-miri tan-nav ibbażati fuq il-pożizzjoni tal-iscroll.

Eżempju ta 'navbar ma' scrollspy

Skrollja ż-żona hawn taħt u ara l-aġġornament tan-navigazzjoni. Is-sub-oġġetti dropdown se jiġu enfasizzati wkoll. Ippruvaha!

Bl-użu bootstrap-scrollspy.js

Ċempel l-iscrollspy permezz ta' javascript:

$ ( '#navbar' ). scrollspy ()

Markup

Biex iżżid faċilment l-imġieba ta 'scrollspy man-navigazzjoni topbar tiegħek, żid biss data-spy="scroll"mal-element li trid tispija fuqu (l-aktar tipikament dan ikun il-korp).

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

Metodi

.scrollspy('aġġornament')

Meta tuża scrollspy flimkien maż-żieda jew it-tneħħija ta 'elementi mid-DOM, ikollok bżonn issejjaħ il-metodu ta' aġġornar hekk:

$ ( '[data-spy="scroll"]' ). kull ( funzjoni () {  
  var $spy = $ ( dan ). scrollspy ( 'aġġornament' )
});

Għażliet

Avvenimenti

Dan il-plugin iżid tab veloċi, dinamiku u funzjonalità tal-pilloli għat-tranżizzjoni permezz tal-kontenut lokali.

Eżempji tabs

Ikklikkja t-tabs hawn taħt biex taqleb bejn panewijiet moħbija, anke permezz ta' menus dropdown.

• Dar
• Profil
• Dropdown
  • @fat
  • @mdo

Bl-użu bootstrap-tab.js

Ippermetti tabs tabbable permezz ta' javascript (kull tab trid tiġi attivata individwalment):

$ ( '#Tab tiegħi a' ). ikklikkja ( funzjoni ( e ) {  
  e . preventDefault ();
  $ ( dan ). tab ( 'juru' );
})

Tista' tattiva tabs individwali b'diversi modi:

$ ( '#myTab a[href="#profil"]' ). tab ( 'juru' ); // Agħżel tab bl-isem 
$ ( '#Tab tiegħi a:l-ewwel' ). tab ( 'juru' ); // Agħżel l-ewwel tab 
$ ( '#Tab tiegħi a:l-aħħar' ). tab ( 'juru' ); // Agħżel l-aħħar tab 
$ ( '#myTab li:eq(2) a' ). tab ( 'juru' ); // Agħżel it-tielet tab (0-indiċi) 

Markup

Tista' tattiva tab jew navigazzjoni ta' pillola mingħajr ma tikteb xi javascript billi sempliċement tispeċifika data-toggle="tab"jew data-toggle="pill"fuq element. Iż-żieda tal- navu nav-tabsklassijiet mat-tab ulse tapplika l-istil tat-tab bootstrap.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Home </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Messaġġi </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Settings </a></li>  
</ul>

Metodi

$().tab

Jattiva element tab u kontenitur tal-kontenut. Tab għandu jkollha jew a data-targetjew hrefnode ta 'kontenitur fil-mira fid-DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Dar </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Messaġġi </a></li> 
  <li><a href = "#settings" > Settings </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "dar" > ... </div>  
  <div class = "tab-pane" id = "profil" > ... </div>  
  <div class = "tab-pane" id = "messaġġi" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<kitba>
  $ ( funzjoni () {  
    $ ( '#Tab tiegħi a:l-aħħar' ). tab ( 'juru' );
  })
</script>

Avvenimenti

$ ( 'a[data-toggle="tab"]' ). fuq ( 'muri' , funzjoni ( e ) {   
  e . mira // tab attivata
  e . relatedTarget // tab preċedenti
})

Dwar Tooltips

Ispirat mill-plugin eċċellenti jQuery.tipsy miktub minn Jason Frame; Tooltips huma verżjoni aġġornata, li ma jiddependux fuq immaġini, jużaw css3 għall-animazzjonijiet, u data-attributi għall-ħażna tat-titlu lokali.

Eżempju ta' użu ta' Tooltips

Passa fuq il-links hawn taħt biex tara l-għodda:

Bl-użu bootstrap-tooltip.js

Agħmel it-tooltip permezz tal-javascript:

$ ( '#eżempju' ). tooltip ( għażliet )

Għażliet

Markup

Għal raġunijiet ta' prestazzjoni, it-Tooltip u l-Popover data-apis huma opt in. Jekk tixtieq tużahom, speċifika għażla ta' selezzjoni.

<a href = "#" rel = "tooltip" title = "l-ewwel tooltip" > iddur fuqi </a>   

Metodi

$().tooltip(għażliet)

Jwaħħal tooltip handler ma' kollezzjoni ta' elementi.

.tooltip('show')

Tiżvela tooltip ta' element.

$ ( '#element' ). tooltip ( 'turi' )

.tooltip('hide')

Jaħbi tooltip ta' element.

$ ( '#element' ). tooltip ( 'ħbi' )

.tooltip('toggle')

Jiddawwar l-għodda ta' element.

$ ( '#element' ). tooltip ( 'toggle' )

Dwar popovers

Żid overlays żgħar ta 'kontenut, bħal dawk fuq l-iPad, ma' kwalunkwe element għall-akkomodazzjoni ta 'informazzjoni sekondarja.

* Jeħtieġ li tiġi inkluża Tooltip

Eżempju hover popover

Passa fuq il-buttuna biex tiskatta l-popover.

Bl-użu bootstrap-popover.js

Ippermetti popovers permezz ta' javascript:

$ ( '#eżempju' ). popover ( għażliet )

Għażliet

Markup

Għal raġunijiet ta' prestazzjoni, it-Tooltip u l-Popover data-apis huma opt in. Jekk tixtieq tużahom, speċifika għażla ta' selezzjoni.

Metodi

$().popover(għażliet)

Inizjalizza popovers għal ġabra ta' elementi.

.popover('show')

Tiżvela popover ta 'elementi.

$ ( '#element' ). popover ( 'turi' )

.popover('hide')

Jaħbi popover ta' elementi.

$ ( '#element' ). popover ( 'ħbi' )

.popover('toggle')

Tiddawwar popover tal-elementi.

$ ( '#element' ). popover ( 'toggle' )

Dwar twissijiet

Il-plugin ta 'twissija huwa klassi ċkejkna biex iżżid funzjonalità mill-qrib mat-twissijiet.

Eżempji ta' twissijiet

Il-plugin ta 'twissijiet jaħdem fuq messaġġi ta' twissija regolari, u jimblokka messaġġi.

Bl-użu bootstrap-alert.js

Ippermetti t-tkeċċija ta' twissija permezz ta' javascript:

$ ( ".twissija" ). twissija ()

Markup

Żid biss data-dismiss="alert"mal-buttuna ta 'qrib tiegħek biex awtomatikament tagħti funzjonalità ta' twissija mill-qrib.

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

Metodi

$().alert()

Igeżwer it-twissijiet kollha b'funzjonalità mill-qrib. Biex it-twissijiet tiegħek janimaw meta jingħalqu, kun żgur li għandhom il- klassi .fadeu .indiġà applikati għalihom.

.alert('qrib')

Jagħlaq allert.

$ ( ".twissija" ). allert ( 'qrib' )

Avvenimenti

Il-klassi ta' twissija ta' Bootstrap tesponi ftit avvenimenti biex tgħaqqad il-funzjonalità ta' twissija.

$ ( '#twissija tiegħi' ). bind ( 'magħluq' , funzjoni () {   
  // agħmel xi ħaġa...
})

Dwar

Agħmel aktar bil-buttuni. Ikkontrolla l-istati tal-buttuna jew toħloq gruppi ta 'buttuni għal aktar komponenti bħal toolbars.

Eżempju użi

Uża l-plugin tal-buttuni għal stati u toggles.

Bl-użu bootstrap-button.js

Ippermetti buttuni permezz ta' javascript:

$ ( '.nav-tabs' ). buttuna ()

Markup

L-attributi tad-dejta huma integrali għall-plugin tal-buttuna. Iċċekkja l-kodiċi eżempju hawn taħt għad-diversi tipi ta 'markup.

<!-- Żid data-toggle="button" biex tattiva t-toggling fuq buttuna waħda -->
<button class = "btn" data-toggle = "button" > Toggle Uniku </button>  
 
<!-- Żid data-toggle="buttons-checkbox" għat-toggling tal-istil tal-kaxxa tal-kontroll fuq btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Xellug </button> 
  <button class = "btn" > Nofsani </button> 
  <button class = "btn" > Dritt </button> 
</div>
 
<!-- Żid data-toggle="buttons-radio" għal toggling stil tar-radju fuq btn-group -->
<div class = "btn-group" data-toggle = "buttuni-radju" >  
  <button class = "btn" > Xellug </button> 
  <button class = "btn" > Nofsani </button> 
  <button class = "btn" > Dritt </button> 
</div>

Metodi

$().button('toggle')

Toggles push state. Jagħti lill-buttuna id-dehra li ġiet attivata.

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

$().button('tagħbija')

Issettja l-istat tal-buttuna għat-tagħbija - tiddiżattiva l-buttuna u tbiddel it-test mat-test tat-tagħbija. It-test tat-tagħbija għandu jiġi definit fuq l-element tal-buttuna bl-użu tal-attribut tad-data data-loading-text.

<button class = "btn" data-loading-text = "jitgħabbi l-affarijiet..." > ... </button>   

$().button('reset')

Irrisettja l-istat tal-buttuna - tbiddel it-test mat-test oriġinali.

$().button(string)

Irrisettja l-istat tal-buttuna - tbiddel it-test għal kwalunkwe stat tat-test definit tad-dejta.

<button class = "btn" data-complete-text = "lest!" > ... </button>   
<kitba>
  $ ( '.btn' ). buttuna ( 'kompleta' )
</script>

Dwar

Ikseb stili bażi u appoġġ flessibbli għal komponenti kollassabbli bħal accordions u navigazzjoni.

* Jeħtieġ li l-plugin Transitions jiġi inkluż.

Eżempju accordion

Bl-użu tal-plugin tal-kollass, bnejna widget sempliċi stil accordion:

Bl-użu bootstrap-collapse.js

Ippermetti permezz ta' javascript:

$ ( ". kollass" ). kollass ()

Għażliet

Markup

Żid biss data-toggle="collapse"u a data-targetgħall-element biex awtomatikament tassenja l-kontroll ta 'element kollassabbli. L- data-targetattribut jaċċetta selettur css biex japplika l-kollass għalih. Kun żgur li żżid il-klassi collapsemal-element kollassabbli. Jekk tixtieq li tiftaħ awtomatikament, żid il-klassi addizzjonali in.

<button class = "btn btn-danger" data-toggle = "kollass" data-target = "#demo" >   
  sempliċi kollassabbli
</button>
 
<div id = "demo" class = "kollass fi" > … </div>  

Metodi

.kollass(għażliet)

Jattiva l-kontenut tiegħek bħala element kollassabbli. Jaċċetta għażliet fakultattivi object.

$ ( '#myCollapsible' ). kollass ({
  toggle : falza 
})

.kollapse('toggle')

Jitbiddel element kollassabbli biex jintwera jew moħbi.

.kollass('turi')

Juri element kollassabbli.

. kollass('ħbi')

Jaħbi element kollassabbli.

Avvenimenti

Il-klassi tal-kollass ta 'Bootstrap tesponi ftit avvenimenti għall-ganċ fil-funzjonalità tal-kollass.

$ ( '#myCollapsible' ). fuq ( 'moħbi' , funzjoni () {   
  // agħmel xi ħaġa...
})

Dwar

Plugin ġeneriku għaċ-ċikliżmu minn elementi. Merry-go-round.

Eżempju tal-karużell

Ara l-wirja ta' taħt.

L-ewwel tikketta Thumbnail

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.

‹ ›

Bl-użu bootstrap-carousel.js

Ċempel permezz ta' javascript:

$ ( '.carousel' ). karużell ()

Għażliet

Markup

L-attributi tad-dejta jintużaw għall-kontrolli preċedenti u li jmiss. Iċċekkja l-markup eżempju hawn taħt.

<div id = "myCarousel" class = "slajd tal-karużell" >  
  <!-- Oġġetti tal-karużell -->
  <div class = "carousel-inner" > 
    <div class = "oġġett attiv" > … </div> 
    <div class = "oġġett" > … </div> 
    <div class = "oġġett" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "li jmiss" > › </a>   
</div>

Metodi

.carousel(għażliet)

Inizjalizza l-karużell b'għażliet fakultattivi objectu jibda jiċċirkola permezz ta 'oġġetti.

$ ( '.carousel' ). karużell ({
  intervall : 2000 
})

.carousel('ċiklu')

Ċikli permezz tal-oġġetti tal-karużell mix-xellug għal-lemin.

.carousel('pawsa')

Jwaqqaf il-karużell milli jiċċirkola permezz ta' oġġetti.

.carousel(numru)

Iċċekkja l-karużell għal qafas partikolari (ibbażat fuq 0, simili għal firxa).

.carousel('prev')

Ċikli għall-oġġett preċedenti.

.carousel('li jmiss')

Ċikli għall-oġġett li jmiss.

Avvenimenti

Il-klassi tal-karużell tal-Bootstrap tesponi żewġ avvenimenti biex tgħaqqad il-funzjonalità tal-karużell.

Dwar

Plugin bażiku, estiż faċilment għall-ħolqien malajr ta 'typeaheads eleganti bi kwalunkwe input ta' test tal-forma.

Eżempju

Ibda ittajpja fil-qasam hawn taħt biex turi r-riżultati typeahead.

Bl-użu bootstrap-typeahead.js

Ċempel it-typeahead permezz ta' javascript:

$ ( '.typeahead' ). ittajpja ()

Għażliet

Markup

Żid attributi tad-dejta biex tirreġistra element b'funzjonalità typeahead.

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

Metodi

.typeahead(għażliet)

Inizjalizza input b'typeahead.