Um módel

Straumlínulöguð, en sveigjanleg, taka á hefðbundnu javascript modal viðbótinni með aðeins lágmarks nauðsynlegri virkni og snjöllum sjálfgefnum stillingum.

Statískt dæmi

Hér að neðan er kyrrstætt myndað form.

Sýning í beinni

Skiptu um form með javascript með því að smella á hnappinn hér að neðan. Það mun renna niður og hverfa inn efst á síðunni.

Notar bootstrap-modal

Hringdu í modal í gegnum javascript:

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

Valmöguleikar

Markup

Þú getur virkjað form á síðunni þinni auðveldlega án þess að þurfa að skrifa eina línu af javascript. Stilltu bara data-toggle="modal"á stjórnunareiningu með data-target="#foo"eða href="#foo"sem samsvarar auðkenni mótunarþáttar, og þegar smellt er á það mun það ræsa mótalinn þinn.

Einnig, til að bæta valmöguleikum við formtilvikið þitt, skaltu bara láta þá fylgja með sem viðbótargagnaeiginleika á annaðhvort stjórnhlutann eða sjálft mótunarmerkið.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Ræsa Modal </a>    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3> Modal haus </h3>
  </div>
  <div class = "modal-body" > 
    <p> Einn fínn líkami… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Loka </a>   
    <a href = "#" class = "btn btn-primary" > Vista breytingar </a>  
  </div>
</div>

Aðferðir

.modal(valkostir)

Virkjar efnið þitt sem form. Samþykkir valfrjálsa valkosti object.

$ ( '#myModal' ). módel ({
  lyklaborð : rangt 
})

.modal('toggle')

Skiptir handvirkt um form.

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

.modal('sýning')

Opnar form handvirkt.

$ ( '#myModal' ). modal ( 'sýning' )

.modal('fela')

Felur form handvirkt.

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

Viðburðir

Modal flokkur Bootstrap afhjúpar nokkra atburði til að tengja við formlega virkni.

$ ( '#myModal' ). á ( 'falinn' , fall () {   
  // gera eitthvað…
})

Um fellilista

Bættu fellivalmyndum við næstum hvað sem er í Bootstrap með þessari einföldu viðbót. Bootstrap býður upp á fullan stuðning í fellivalmyndum á navbar, flipa og pillum.

Dæmi

Smelltu á fellivalmyndartenglana í navstikunni og pillurnar hér að neðan til að prófa fellilistann.

• Venjulegur hlekkur
• Fellilisti
  • Action
  • Another action
  • Something else here
  • Separated link
• Fellilisti 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Fellilisti 3
  • Action
  • Another action
  • Something else here
  • Separated link

Með því að nota bootstrap-dropdown.js

Hringdu í fellilistana í gegnum javascript:

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

Markup

Til að bæta fellilistanum fljótt við hvaða þátt sem er skaltu bara bæta við data-toggle="dropdown"og allir gildir fellivalmyndir verða sjálfkrafa virkjaðir.

<ul class = "nav nav-pillur" > 
  <li class = "virkur" ><a href = "#" > Venjulegur hlekkur </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Fellilisti
      <b class = "caret" ></b> 
    </a>
    <ul class = "fellivalmynd" > 
      <li><a href = "#" > Aðgerð </a></li> 
      <li><a href = "#" > Önnur aðgerð </a></li> 
      <li><a href = "#" > Eitthvað annað hér </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Aðskilinn hlekkur </a></li> 
    </ul>
  </li>
  ...
</ul>

Til að halda vefslóðum óskertum skaltu nota data-targeteigindina í stað href="#".

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

Aðferðir

$().dropdown()

Forritaforrit til að virkja valmyndir fyrir tiltekna siglingastiku eða flipaleiðsögn.

ScrollSpy viðbótin er til að uppfæra siglingamarkmið sjálfkrafa á grundvelli skrunstöðu.

Dæmi um navbar með scrollspy

Skrunaðu svæðið hér að neðan og horfðu á leiðsöguuppfærsluna. Undirliðir í fellilistanum verða einnig auðkenndir. Reyna það!

Með því að nota bootstrap-scrollspy.js

Hringdu í scrollspy í gegnum javascript:

$ ( '#navbar' ). scrollspy ()

Markup

Til að bæta scrollspy hegðun auðveldlega við toppstikuna þína skaltu bara bæta data-spy="scroll"við þáttinn sem þú vilt njósna um (oftast væri þetta líkaminn).

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

Aðferðir

.scrollspy('refresh')

Þegar þú notar scrollspy í tengslum við að bæta við eða fjarlægja þætti úr DOM þarftu að kalla á endurnýjunaraðferðina svona:

$ ( '[data-spy="scroll"]' ). hver ( fall () {  
  var $njósnari = $ ( þetta ). scrollspy ( 'hressa' )
});

Valmöguleikar

Viðburðir

Þessi viðbót bætir við skjótum, kraftmiklum flipa og pilla virkni til að skipta um staðbundið efni.

Dæmi flipar

Smelltu á flipana hér að neðan til að skipta á milli falinna glugga, jafnvel með fellivalmyndum.

• Heim
• Prófíll
• Fellilisti
  • @fat
  • @mdo

Með því að nota bootstrap-tab.js

Virkjaðu flipa sem hægt er að nota með javascript (hverja flipa þarf að virkja fyrir sig):

$ ( '#myTab a' ). smelltu ( fall ( e ) {  
  e . koma í veg fyrir Sjálfgefið ();
  $ ( þetta ). tab ( 'sýna' );
})

Þú getur virkjað einstaka flipa á nokkra vegu:

$ ( '#myTab a[href="#profile"]' ). tab ( 'sýna' ); // Veldu flipa eftir nafni 
$ ( '#myTab a:first' ). tab ( 'sýna' ); // Veldu fyrsta flipa 
$ ( '#myTab a:last' ). tab ( 'sýna' ); // Veldu síðasta flipa 
$ ( '#myTab li:eq(2) a' ). tab ( 'sýna' ); // Veldu þriðja flipa (0-tryggður) 

Markup

Þú getur virkjað flipa eða pilluleiðsögn án þess að skrifa nein javascript með því einfaldlega að tilgreina data-toggle="tab"eða data-toggle="pill"á frumefni. Ef þú bætir flokkunum og við flipann navverður stíllinn á ræsiflipanum beitt.nav-tabsul

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Heim </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Prófíll </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Skilaboð </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Stillingar </a></li>  
</ul>

Aðferðir

$().flipi

Virkjar flipaþátt og innihaldsílát. Tab ætti að hafa annað hvort a data-targeteða hrefmiða á gámahnút í DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Heim </a></li>  
  <li><a href = "#profile" > Prófíll </a></li> 
  <li><a href = "#messages" > Skilaboð </a></li> 
  <li><a href = "#settings" > Stillingar </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "heima" > ... </div>  
  <div class = "tab-pane" id = "prófíl" > ... </div>  
  <div class = "tab-pane" id = "skilaboð" > ... </div>  
  <div class = "tab-pane" id = "stillingar" > ... </div>  
</div>
 
<handrit>
  $ ( fall () {  
    $ ( '#myTab a:last' ). tab ( 'sýna' );
  })
</script>

Viðburðir

$ ( 'a[data-toggle="tab"]' ). á ( 'sýnt' , fall ( e ) {   
  e . target // virkjaður flipi
  e . relatedTarget // fyrri flipi
})

Um Tooltips

Innblásin af frábæru jQuery.tipsy viðbótinni skrifað af Jason Frame; Verkfæraráð eru uppfærð útgáfa, sem treystir ekki á myndir, notar css3 fyrir hreyfimyndir og gagnaeiginleika fyrir staðbundna titlageymslu.

Dæmi um notkun Tooltips

Farðu yfir tenglana hér að neðan til að sjá verkfæraleiðbeiningar:

Með því að nota bootstrap-tooltip.js

Kveiktu á tóli með javascript:

$ ( '#dæmi' ). verkfæraráð ( valkostir )

Valmöguleikar

Markup

Af frammistöðuástæðum eru Tooltip og Popover gagnaforritin valin. Ef þú vilt nota þá skaltu bara tilgreina valmöguleika.

<a href = "#" rel = "tooltip" title = "fyrsta verkfæraráð" > sveima yfir mig </a>   

Aðferðir

$().tooltip(valkostir)

Hengir verkfæraleiðbeiningum við einingarsafn.

.tooltip('sýna')

Sýnir verkfæraábendingu frumefnis.

$ ( '#þáttur' ). tooltip ( 'sýna' )

.tooltip('fela')

Felur ábendingu frumefnis.

$ ( '#þáttur' ). tooltip ( 'fela' )

.tooltip('toggle')

Breytir ábendingum frumefnis.

$ ( '#þáttur' ). tooltip ( 'skipta' )

Um popovers

Bættu litlum yfirlagi af efni, eins og á iPad, við hvaða þátt sem er til að hýsa aukaupplýsingar.

* Krefst þess að Tooltip sé innifalið

Dæmi með sveimu um popover

Færðu bendilinn yfir hnappinn til að kveikja á popover.

Með því að nota bootstrap-popover.js

Virkja sprettiglugga með javascript:

$ ( '#dæmi' ). popover ( valkostir )

Valmöguleikar

Markup

Af frammistöðuástæðum eru Tooltip og Popover gagnaforritin valin. Ef þú vilt nota þá skaltu bara tilgreina valmöguleika.

Aðferðir

$().popover(valkostir)

Frumstillir sprettiglugga fyrir þáttasafn.

.popover('sýna')

Afhjúpar þætti sem birtist.

$ ( '#þáttur' ). popover ( 'sýning' )

.popover('fela')

Felur frumefnisskjá.

$ ( '#þáttur' ). popover ( 'fela' )

.popover('toggle')

Breytir yfirlit yfir þætti.

$ ( '#þáttur' ). popover ( 'skipta' )

Um viðvaranir

Viðvörunarviðbótin er pínulítill flokkur til að bæta náinni virkni við tilkynningar.

Dæmi um viðvaranir

Viðvörunarviðbótin virkar á venjulegum viðvörunarskilaboðum og loka fyrir skilaboð.

Með því að nota bootstrap-alert.js

Virkjaðu frávísun á viðvörun með javascript:

$ ( ".viðvörun" ). viðvörun ()

Markup

Bættu bara við data-dismiss="alert"lokunarhnappinn þinn til að gefa sjálfkrafa viðvörunarlokunarvirkni.

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

Aðferðir

$().alert()

Umlykur allar viðvaranir með náinni virkni. Til að láta tilkynningar þínar birtast þegar þær eru lokaðar skaltu ganga úr skugga um að þær hafi .fadeog .inflokkinn þegar notaður fyrir þær.

.alert('loka')

Lokar viðvörun.

$ ( ".viðvörun" ). viðvörun ( 'loka' )

Viðburðir

Viðvörunarflokkur Bootstrap afhjúpar nokkra atburði til að tengjast viðvörunarvirkni.

$ ( '#mín-viðvörun' ). binda ( 'lokað' , fall () {   
  // gera eitthvað…
})

Um

Gerðu meira með hnöppum. Stjórna hnappastöður eða búa til hópa af hnöppum fyrir fleiri hluti eins og tækjastikur.

Dæmi um notkun

Notaðu hnappaviðbótina fyrir ríki og rofa.

Með því að nota bootstrap-button.js

Virkja hnappa með javascript:

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

Markup

Gagnaeiginleikar eru óaðskiljanlegur í hnappaviðbótinni. Skoðaðu dæmikóðann hér að neðan fyrir hinar ýmsu álagningargerðir.

<!-- Bættu við data-toggle="hnappi" til að virkja skipta á einum hnappi -->
<button class = "btn" data-toggle = "button" > Single Toggle </button>  
 
<!-- Bættu við data-toggle="buttons-checkbox" til að skipta um gátreitastíl á btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Vinstri </button> 
  <button class = "btn" > Mið </button> 
  <button class = "btn" > Hægri </button> 
</div>
 
<!-- Bættu við data-toggle="buttons-radio" til að skipta um útvarpsstíl á btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Vinstri </button> 
  <button class = "btn" > Mið </button> 
  <button class = "btn" > Hægri </button> 
</div>

Aðferðir

$().button('skipta')

Skiptir á ýtastöðu. Gefur hnappinum það útlit að hann hafi verið virkjaður.

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

$().button('hleðsla')

Stillir stöðu hnapps á hleðslu - slekkur á hnappi og breytir texta yfir í hleðslutexta. Hleðslutexti ætti að vera skilgreindur á hnappahlutanum með því að nota gagnaeiginleikann data-loading-text.

<button class = "btn" data-loading-text = "hleður efni..." > ... </button>   

$().button('endurstilla')

Endurstillir stöðu hnapps - skiptir texta yfir í upprunalegan texta.

$().hnappur(strengur)

Endurstillir hnappastöðu - skiptir um texta í hvaða gagnaskilgreinda textastöðu sem er.

<button class = "btn" data-complete-text = "lokið!" > ... </hnappur>   
<handrit>
  $ ( '.btn' ). hnappur ( 'lokið' )
</script>

Um

Fáðu grunnstíl og sveigjanlegan stuðning fyrir samanbrjótanlega hluti eins og harmonikkur og siglingar.

* Krefst þess að Transitions viðbótin sé innifalin.

Dæmi um harmonikku

Með því að nota samrunaviðbótina bjuggum við til einfalda harmonikkustílgræju:

Með því að nota bootstrap-collapse.js

Virkja með javascript:

$ ( ".collapse" ). hrynja ()

Valmöguleikar

Markup

Bættu bara við data-toggle="collapse"og a data-targettil þáttur til að úthluta sjálfkrafa stjórn á fellanlegum þætti. Eigindin data-targetsamþykkir css val til að beita samdrættinum á. Vertu viss um að bæta bekknum collapsevið samanbrjótanlega þáttinn. Ef þú vilt að það opni sjálfgefið skaltu bæta við viðbótarflokknum in.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  einfalt samanbrjótanlegt
</hnappur>
 
<div id = "demo" class = "hrynja inn" > … </div>  

Aðferðir

.collapse(valkostir)

Virkjar efnið þitt sem samanbrjótanlegan þátt. Samþykkir valfrjálsa valkosti object.

$ ( '#my Collapsible' ). hrynja ({
  skipta : rangt 
})

.collapse('toggle')

Skiptir um að fellanlegur þáttur sé sýndur eða falinn.

.collapse('show')

Sýnir samanbrjótanlegan þátt.

.collapse('fela')

Felur samanbrjótanlegt frumefni.

Viðburðir

Hrunflokkur Bootstrap afhjúpar nokkra atburði til að tengja sig við hrunvirkni.

$ ( '#my Collapsible' ). á ( 'falinn' , fall () {   
  // gera eitthvað…
})

Um

Almenn viðbót til að hjóla í gegnum þætti. Gleðileikur.

Dæmi um hringekju

Horfðu á myndasýninguna hér að neðan.

Fyrsta smámyndamerki

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.

Annað smámyndamerki

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.

Þriðja smámyndamerki

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.

‹ ›

Að nota bootstrap-carousel.js

Hringdu í gegnum javascript:

$ ( '.carousel' ). hringekja ()

Valmöguleikar

Markup

Gagnaeiginleikar eru notaðir fyrir fyrri og næstu stýringar. Skoðaðu sýnishornið hér að neðan.

<div id = "myCarousel" class = "carousel rennibraut" >  
  <!-- Hringekjuhlutir -->
  <div class = "carousel-inner" > 
    <div class = "virkur hlutur" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "næsta" > › </a>   
</div>

Aðferðir

.carousel(valkostir)

Frumstillir hringekjuna með valkvæðum valkostum objectog byrjar að hjóla í gegnum hluti.

$ ( '.carousel' ). hringekkja ({
  bil : 2000 
})

.carousel('hringrás')

Hringur í gegnum hringekjuhlutina frá vinstri til hægri.

.carousel('hlé')

Kemur í veg fyrir að hringekjan hjóli í gegnum hluti.

.carousel(númer)

Hringir hringekjuna að tilteknum ramma (miðað við 0, svipað og fylki).

.carousel('prev')

Fer að fyrra atriði.

.carousel('næsta')

Fer í næsta atriði.

Viðburðir

Hringekjuflokkur Bootstrap afhjúpar tvo atburði til að tengjast hringekjuvirkni.

Um

Grunnviðbót, sem auðvelt er að útvíkka, til að búa til glæsilega innslátt á fljótlegan hátt með hvaða textainnslátt sem er.

Dæmi

Byrjaðu að slá inn í reitinn hér að neðan til að birta niðurstöðurnar.

Með því að nota bootstrap-typeahead.js

Hringdu í typeahead í gegnum javascript:

$ ( '.typeahead' ). slá fram ()

Valmöguleikar

Markup

Bættu við gagnaeiginleikum til að skrá þátt með typeahead virkni.

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

Aðferðir

.typeahead(valkostir)

Frumstillir inntak með innslátt.