Pri modaloj

Simpligita, sed fleksebla, alprenu la tradician Javaskripto modalan kromaĵon kun nur la minimuma postulata funkcieco kaj inteligentaj defaŭltoj.

Statika ekzemplo

Malsupre estas statike farita modalo.

Viva demonstraĵo

Ŝaltu modalon per Javaskripto alklakante la suban butonon. Ĝi glitos malsupren kaj velkos de la supro de la paĝo.

Uzante bootstrap-modal

Voku la modalon per Javaskripto:

$ ( '#miaModalo' ). modalo ( opcioj )

Opcioj

Markado

Vi povas facile aktivigi modalojn en via paĝo sen devi skribi unu linion de Javaskripto. Nur agordu data-toggle="modal"sur regila elemento kun data-target="#foo"aŭ href="#foo"kiu respondas al modala elemento id, kaj kiam oni klakas, ĝi lanĉos vian modalon.

Ankaŭ, por aldoni opciojn al via modala petskribo, simple inkluzivu ilin kiel aldonajn datumajn atributojn aŭ sur la kontrolelemento aŭ sur la modala markado mem.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Lanĉi Modalon </a>    

<div class = "modala" id = "miaModala" >  
  <div class = "modala-kapo" > 
    <button class = "close" data-dismiss = "modala" > × </button>  
    <h3> Modala kaplinio </h3>
  </div>
  <div class = "modala-korpo" > 
    <p> Unu bela korpo... </p>
  </div>
  <div class = "modala-piedo" > 
    <a href = "#" class = "btn" > Fermi </a>  
    <a href = "#" class = "btn btn-primary" > Konservi ŝanĝojn </a>  
  </div>
</div>

Metodoj

.modal(opcioj)

Aktivigas vian enhavon kiel modalon. Akceptas laŭvolajn opciojn object.

$ ( '#miaModalo' ). modalo ({
  klavaro : falsa 
})

.modal('ŝanĝu')

Mane ŝanĝas modalon.

$ ( '#miaModalo' ). modala ( 'ŝalti' )

.modal('montri')

Mane malfermas modalon.

$ ( '#miaModalo' ). modalo ( 'montri' )

.modal('kaŝi')

Mane kaŝas modalon.

$ ( '#miaModalo' ). modalo ( 'kaŝi' )

Eventoj

La modala klaso de Bootstrap elmontras kelkajn eventojn por hoki al modala funkcieco.

$ ( '#miaModalo' ). on ( 'kaŝita' , funkcio () {   
  // fari ion…
})

Pri falmenuoj

Aldonu falmenuojn al preskaŭ io ajn en Bootstrap per ĉi tiu simpla kromaĵo. Bootstrap havas plenan falmenuan subtenon en la navbaro, langetoj kaj piloloj.

Ekzemploj

Alklaku la mensajn nav-ligilojn en la navigadbreto kaj pilolojn sube por testi falmenuojn.

• Regula ligilo
• 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

Uzante bootstrap-dropdown.js

Voku la menuojn per Javaskripto:

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

Markado

Por rapide aldoni falmenuman funkcion al iu ajn elemento, nur aldonu data-toggle="dropdown"kaj ajna valida botostrap falmenuo aŭtomate aktiviĝos.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Regula ligilo </a></li>  
  <li class = "menuo" id = "menuo1" >  
    <a class = "dropdown-toggle" data-toggle = "menumenumo" href = "#menuo1" >   
      Dropdown
      <b klaso = "karto" ></b> 
    </a>
    <ul class = "falmenuo" > 
      <li><a href = "#" > Ago </a></li> 
      <li><a href = "#" > Alia ago </a></li> 
      <li><a href = "#" > Io alia ĉi tie </a></li> 
      <li class = "dividanto" ></li> 
      <li><a href = "#" > Apartigita ligilo </a></li> 
    </ul>
  </li>
  ...
</ul>

Por konservi URL-ojn sendifektaj, uzu la data-targetatributon anstataŭ href="#".

<ul class = "nav nav-pills" > 
  <li class = "menuo" > 
    <a class = "dropdown-toggle" data-toggle = "menumenumo" data-target = "#" href = "vojo/al/paĝo.html" >    
      Dropdown
      <b klaso = "karto" ></b> 
    </a>
    <ul class = "falmenuo" > 
      ...
    </ul>
  </li>
</ul>

Metodoj

$(). dropdown()

Programa API por aktivigi menuojn por antaŭfiksita navbar aŭ klapeta navigado.

La ScrollSpy kromaĵo estas por aŭtomate ĝisdatigi nav-celojn bazitajn sur rulpozicio.

Ekzemplo navbar kun scrollspy

Rulumu la suban areon kaj spektu la navigacian ĝisdatigon. La submenuaj suberoj ankaŭ estos reliefigitaj. Provu ĝin!

Uzante bootstrap-scrollspy.js

Voku la scrollspy per Javaskripto:

$ ( '#navbaro' ). scrollspy ()

Markado

Por facile aldoni scrollspy-konduton al via supra navigado, simple aldonu data-spy="scroll"al la elemento, kiun vi volas spioni (plej kutime ĉi tio estus la korpo).

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

Metodoj

.scrollspy('refreŝigi')

Kiam vi uzas scrollspy kune kun aldono aŭ forigo de elementoj de la DOM, vi devos nomi la refreŝigan metodon tiel:

$ ( '[data-spy="scroll"]' ). ĉiu ( funkcio () {  
  var $spiono = $ ( ĉi ). scrollspy ( 'refreŝigi' )
});

Opcioj

Eventoj

Ĉi tiu kromaĵo aldonas rapidan, dinamikan langeton kaj pilolfunkcion por transiri tra loka enhavo.

Ekzemplaj langetoj

Alklaku la subajn langetojn por ŝanĝi inter kaŝitaj fenestroj, eĉ per falmenuoj.

• Hejmo
• Profilo
• Dropdown
  • @fat
  • @mdo

Uzante bootstrap-tab.js

Ebligu tabulajn langetojn per Javaskripto (ĉiu langeto devas esti aktivigita individue):

$ ( '#miaTab a' ). klaku ( funkcio ( e ) {  
  e . preventDefault ();
  $ ( ĉi ). langeto ( 'montri' );
})

Vi povas aktivigi individuajn langetojn en pluraj manieroj:

$ ( '#miaTab a[href="#profilo"]' ). langeto ( 'montri' ); // Elektu langeton laŭ nomo 
$ ( '#miaTab a:unue' ). langeto ( 'montri' ); // Elektu la unuan langeton 
$ ( '#miaTab a:lasta' ). langeto ( 'montri' ); // Elektu lastan langeton 
$ ( '#miaTab li:eq(2) a' ). langeto ( 'montri' ); // Elektu la trian langeton (0-indeksitan) 

Markado

Vi povas aktivigi langeton aŭ pilolan navigadon sen verki javaskripton per simple specifi data-toggle="tab"aŭ data-toggle="pill"sur elemento. Aldonante la navkaj nav-tabsklasojn al la langeto ulaplikos la bootstrap langeto-stilado.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Hejmo </a></li>  
  <li><a href = "#profile" data-toggle = "langeto" > Profilo </a></li>  
  <li><a href = "#messages" data-toggle = "langeto" > Mesaĝoj </a></li>  
  <li><a href = "#settings" data-toggle = "langeto" > Agordoj </a></li>  
</ul>

Metodoj

$().tab

Aktivigas langeto-elementon kaj enhavujon. Tab devus havi aŭ a data-targetaŭ hrefcelanta ujo-nodon en la DOM.

<ul class = "nav nav-tabs" id = "miaTab" >  
  <li class = "aktiva" ><a href = "#home" > Hejmo </a></li>  
  <li><a href = "#profile" > Profilo </a></li> 
  <li><a href = "#messages" > Mesaĝoj </a></li> 
  <li><a href = "#settings" > Agordoj </a></li> 
</ul>
 
<div class = "tab-enhavo" > 
  <div class = "tab-pane active" id = "hejmo" > ... </div>  
  <div class = "tab-pane" id = "profilo" > ... </div>  
  <div class = "tab-pane" id = "mesaĝoj" > ... </div>  
  <div class = "tab-pane" id = "agordoj" > ... </div>  
</div>
 
<skripto>
  $ ( funkcio () {  
    $ ( '#miaTab a:lasta' ). langeto ( 'montri' );
  })
</script>

Eventoj

$ ( 'a[data-toggle="tab"]' ). on ( 'montrita' , funkcio ( e ) {   
  e . celo // aktivigita langeto
  e . rilataCelo // antaŭa langeto
})

Pri konsiletoj

Inspirite de la bonega jQuery.tipsy kromaĵo verkita de Jason Frame; Konsiletoj estas ĝisdatigita versio, kiu ne dependas de bildoj, uzas css3 por kuraĝigoj kaj datumoj-atributoj por loka titola konservado.

Ekzempla uzo de konsiletoj

Ŝvebu super la subaj ligiloj por vidi konsiletojn:

Uzante bootstrap-tooltip.js

Ekfunkciigu la konsileton per Javaskripto:

$ ( '#ekzemplo' ). konsileto ( opcioj )

Opcioj

Markado

Pro kaŭzoj de rendimento, la Tooltip kaj Popover-datum-apis elektas. Se vi ŝatus uzi ilin, nur specifu elektan opcion.

<a href = "#" rel = "tooltip" title = "unua konsileto" > ŝvebi super mi </a>   

Metodoj

$(). konsileto (opcioj)

Alligas konsileton pritraktilon al elementkolekto.

.tooltip('montri')

Rivelas la konsileton de elemento.

$ ( '#elemento' ). konsileto ( 'montri' )

.tooltip('kaŝi')

Kaŝas la konsileton de elemento.

$ ( '#elemento' ). konsileto ( 'kaŝi' )

.tooltip('ŝanĝu')

Ŝaltas la konsileton de elemento.

$ ( '#elemento' ). konsileto ( 'ŝalti' )

Pri popovers

Aldonu malgrandajn tegaĵojn de enhavo, kiel tiuj sur la iPad, al iu ajn elemento por loĝigi malĉefajn informojn.

* Necesas ke la konsileto estu inkluzivita

Ekzemplo ŝveba popover

Ŝvebu super la butono por ekigi la popover.

Uzante bootstrap-popover.js

Ebligu popovers per Javaskripto:

$ ( '#ekzemplo' ). popover ( opcioj )

Opcioj

Markado

Pro kaŭzoj de rendimento, la Tooltip kaj Popover-datum-apis elektas. Se vi ŝatus uzi ilin, nur specifu elektan opcion.

Metodoj

$().popover(opcioj)

Inicializas popovers por elemento kolekto.

.popover('montri')

Rivelas elementojn popover.

$ ( '#elemento' ). popover ( 'montri' )

.popover('kaŝi')

Kaŝas elementojn popover.

$ ( '#elemento' ). popover ( 'kaŝi' )

.popover('ŝaltu')

Ŝaltas popover de elementoj.

$ ( '#elemento' ). popover ( 'ŝalti' )

Pri atentigoj

La atentiga kromaĵo estas eta klaso por aldoni proksimajn funkciojn al atentigoj.

Ekzemplaj atentigoj

La alarmaj kromprogramoj funkcias en regulaj atentaj mesaĝoj kaj blokas mesaĝojn.

Uzante bootstrap-alert.js

Ebligu malakcepton de atentigo per Javaskripto:

$ ( ".alerto" ). atentiga ()

Markado

Nur aldonu data-dismiss="alert"al via fermbutono por aŭtomate doni atentan proksiman funkcion.

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

Metodoj

$().alerto()

Envolvas ĉiujn atentigojn kun proksima funkcio. Por ke viaj atentigoj animiĝu kiam fermite, certigu, ke ili havas la klason .fadekaj .injam aplikita al ili.

.alert('fermi')

Fermas alarmon.

$ ( ".alerto" ). atentigo ( 'fermi' )

Eventoj

La atentiga klaso de Bootstrap elmontras kelkajn eventojn por aliĝi al atentiga funkcieco.

$ ( '#mia-atentigo' ). bind ( 'fermita' , funkcio   () { 
  // fari ion…
})

Pri

Faru pli per butonoj. Kontrolu butonajn ŝtatojn aŭ kreu grupojn de butonoj por pli da komponantoj kiel ilobretoj.

Ekzemplaj uzoj

Uzu la butonon kromaĵo por ŝtatoj kaj baskuloj.

Uzante bootstrap-button.js

Ebligu butonojn per Javaskripto:

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

Markado

Datumaj atributoj estas integritaj al la butonaldonaĵo. Rigardu la ekzemplokodon sube por la diversaj markadaj tipoj.

<!-- Aldonu data-toggle="butono" por aktivigi baskulon sur ununura butono -->
<button class = "btn" data-toggle = "butono" > Ununura Baskulo </button>  
 
<!-- Aldonu data-toggle="buttons-checkbox" por markobutono-stilo ŝanĝi sur btn-grupo -->
<div class = "btn-group" data-toggle = "butonoj-markbutono" >  
  <button class = "btn" > Maldekstre </button> 
  <button class = "btn" > Mezo </button> 
  <button class = "btn" > Dekstre </button> 
</div>
 
<!-- Aldonu data-toggle="buttons-radio" por radiostilo ŝanĝanta sur btn-grupo -->
<div class = "btn-group" data-toggle = "butonoj-radio" >  
  <button class = "btn" > Maldekstre </button> 
  <button class = "btn" > Mezo </button> 
  <button class = "btn" > Dekstre </button> 
</div>

Metodoj

$().button('ŝaltu')

Ŝaltigas puŝan staton. Donas al la butono la aspekton, ke ĝi estas aktivigita.

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

$().button('ŝarĝante')

Agordas butonan staton al ŝarĝo - malŝaltas butonon kaj interŝanĝas tekston al ŝarĝo de teksto. Ŝargado de teksto devus esti difinita sur la butonelemento uzante la datuman atributon data-loading-text.

<button class = "btn" data-loading-text = "ŝargi aĵojn..." > ... </button>   

$().button('restarigi')

Restarigas butonan staton - interŝanĝas tekston al originala teksto.

$().butono(ŝnuro)

Restarigas butonan staton - interŝanĝas tekston al iu ajn datuma difinita teksto-stato.

<button class = "btn" data-complete-text = "finita!" > ... </butono>   
<skripto>
  $ ( '.btn' ). butono ( 'kompleta' )
</script>

Pri

Akiru bazajn stilojn kaj flekseblan subtenon por faldeblaj komponantoj kiel akordionoj kaj navigado.

* Postulas la transirojn aldonaĵon esti inkluzivita.

Ekzemplo akordiono

Uzante la kolapsan kromaĵon, ni konstruis simplan akordionstilan fenestraĵon:

Uzante bootstrap-collapse.js

Ebligu per Javaskripto:

$ ( ".kolapso" ). kolapsi ()

Opcioj

Markado

Nur aldonu data-toggle="collapse"kaj data-targetal elementon por aŭtomate atribui kontrolon de faldebla elemento. La data-targetatributo akceptas css-elektilon al kiu apliki la kolapson. Nepre aldonu la klason collapseal la faldebla elemento. Se vi ŝatus, ke ĝi defaŭlte malfermu, aldonu la aldonan klason in.

<button class = "btn btn-danger" data-toggle = "kolapsi" data-target = "#demo" >   
  simpla faldebla
</butono>
 
<div id = "demo" class = "kolapsi" > … </div>  

Metodoj

.kolapso(opcioj)

Aktivigas vian enhavon kiel faldebla elemento. Akceptas laŭvolajn opciojn object.

$ ( '#miaKlasebla' ). kolapsi ({
  toggle : malvera 
})

.kolapso('ŝalti')

Ŝaltas faldebla elemento al montrita aŭ kaŝita.

.kolapso('montri')

Montras faldeblan elementon.

.kolapso('kaŝi')

Kaŝas faldeblan elementon.

Eventoj

La kolapsoklaso de Bootstrap elmontras kelkajn eventojn por hoki en kolapfunkciecon.

$ ( '#miaKlasebla' ). on ( 'kaŝita' , funkcio () {   
  // fari ion…
})

Pri

Ĝenerala kromaĵo por bicikli tra elementoj. Karuselo.

Ekzemplo karuselo

Rigardu la bildoprezenton sube.

Unua Bildeto-etikedo

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.

Dua Bildeto-etikedo

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.

Tria Bildeto-etikedo

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.

‹ ›

Uzante bootstrap-carousel.js

Voku per Javaskripto:

$ ( '.karuselo' ). karuselo ()

Opcioj

Markado

Datumaj atributoj estas uzataj por la antaŭaj kaj sekvaj reguloj. Rigardu la ekzemplon de markado sube.

<div id = "miaKaruselo" class = "karuselo" >  
  <!-- Karuselaj eroj -->
  <div class = "karuselo-interna" > 
    <div class = "aktiva ero" > … </div> 
    <div class = "ero" > … </div> 
    <div class = "ero" > … </div> 
  </div>
  <!-- Karuselo nav -->
  <a class = "karusel-control left" href = "#myCarousel" data-slide = "antaŭa" > ‹ </a>   
  <a class = "karusel-control right" href = "#myCarousel" data-slide = "sekva" > › </a>   
</div>

Metodoj

.karuselo(opcioj)

Komencas la karuselon kun laŭvolaj opcioj objectkaj komencas bicikli tra eroj.

$ ( '.karuselo' ). karuselo ({
  intervalo : 2000 
})

.karuselo('ciklo')

Biciklas tra la karuselaj eroj de maldekstre dekstren.

.karuselo('paŭzo')

Maldaŭrigas la karuselon de bicikli tra eroj.

.karuselo(nombro)

Biciklas la karuselon al aparta kadro (bazita 0, simile al tabelo).

.karuselo('antaŭa')

Ciklas al la antaŭa ero.

.karuselo('sekva')

Bicikloj al la sekva ero.

Eventoj

La karuselklaso de Bootstrap elmontras du okazaĵojn por hokado en karuselfunkciecon.

Pri

Baza, facile etendita kromaĵo por rapide krei elegantajn tajpaĵojn kun ajna formo de teksto-enigo.

Ekzemplo

Komencu tajpi en la suba kampo por montri la antaŭajn rezultojn.

Uzante bootstrap-typeahead.js

Voku la tajpu antaŭen per Javaskripto:

$ ( '.typeahead' ). tajpu antaŭe ()

Opcioj

Markado

Aldonu datumajn atributojn por registri elementon kun tajpa funkcio.

<input type = "text" data-provide = "tajpu antaŭe" >  

Metodoj

.typeahead(opcioj)

Inicialigas enigaĵon per tajpu antaŭen.