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.

Live demo

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" id = "myModal" >  
  <div class = "modal-header" > 
    <a class = "close" data-dismiss = "modal" > × </a>  
    <h3> Header modali </h3>
  </div>
  <div class = "modal-body" > 
    <p> Korp wieħed fin... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn btn-primary" > Issejvja l-bidliet </a>  
    <a href = "#" class = "btn" > Agħlaq </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 in-navbar, tabs, u pilloli.

Eżempji

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

• Link regolari
• Dropdown
  • Azzjoni
  • Azzjoni oħra
  • Xi ħaġa oħra hawn
  • Link separat
• Dropdown 2
  • Azzjoni
  • Azzjoni oħra
  • Xi ħaġa oħra hawn
  • Link separat
• Dropdown 3
  • Azzjoni
  • Azzjoni oħra
  • Xi ħaġa oħra hawn
  • Link separat

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

Metodi

$().dropdown()

Api programatiku għall-attivazzjoni ta' 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 ta' topbar tiegħek, żid biss data-spy="scroll"mal-element li trid tispy fuq (l-aktar tipikament dan ikun il-ġisem).

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

Għażliet

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

Eżempju tabs

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

• Dar
• Profil
• Dropdown
  • @xaħam
  • @mdo

Bl-użu bootstrap-tab.js

Ippermetti tabs tabbable permezz ta' javascript:

$ ( '#Tab tiegħi' ). tab ( 'turi' )

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.

<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 jkollu jew `data-target` jew `href` li jimmira lejn node tal-kontenitur fid-dom.

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

Avvenimenti

$ ( 'a[data-toggle="tab"]' ). fuq ( 'muri' , funzjoni ( e ) {   
  e . mira // tab attivat
  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' elementi.

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

.tooltip('hide')

Jaħbi tooltip ta' elementi.

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

.tooltip('toggle')

Jiddawwar l-għodda tal-elementi.

$ ( '#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 Popover data-apis huma opt in. Jekk tixtieq tużahom sempliċement speċifika l-għażla tas-selettur.

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

Jiddawwar 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 = "allert" href = "#" > × </a>   

Metodi

$().alert()

Tiġbor 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:

$ ( '.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 lil btn id-dehra li tkun ġ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.

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.

It-tieni 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.

It-Tielet 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.

‹ ›

Bl-użu bootstrap-carousel.js

Ċempel permezz ta' javascript:

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

Għażliet

Markup

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

<div id = "myCarousel" class = "carousel" >  
  <!-- 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.

$ ( '.myCarousel' ). 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 modali ta 'Bootstrap tesponi ftit avvenimenti biex tgħaqqad il-funzjonalità modali.

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.