Par modāļiem

Vienkāršots, bet elastīgs, izmantojot tradicionālo javascript modālo spraudni ar tikai minimālo nepieciešamo funkcionalitāti un viedajiem noklusējuma iestatījumiem.

Statisks piemērs

Zemāk ir statiski renderēts modāls.

Demo tiešraidē

Pārslēdziet modālu, izmantojot javascript, noklikšķinot uz tālāk esošās pogas. Tas noslīdēs uz leju un pazudīs no lapas augšdaļas.

Izmantojot bootstrap-modal

Zvaniet modālam, izmantojot javascript:

$ ( '#myModal' ). modāls ( opcijas )

Iespējas

Atzīmes

Jūs varat viegli aktivizēt modāļus savā lapā, nerakstot nevienu JavaScript rindiņu. Vienkārši iestatiet data-toggle="modal"kontroliera elementu ar data-target="#foo"vai href="#foo", kas atbilst modālā elementa ID, un, noklikšķinot, tas palaiž modālu.

Turklāt, lai modālajai instancei pievienotu opcijas, vienkārši iekļaujiet tās kā papildu datu atribūtus vai nu vadības elementā, vai pašā modālajā iezīmējumā.

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

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "aizvērt" data-dismiss = "modāls" > × </button>   
    <h3> Modālā galvene </h3>
  </div>
  <div class = "modal-body" > 
    <p> Viens smalks ķermenis... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Aizvērt </a>   
    <a href = "#" class = "btn btn-primary" > Saglabāt izmaiņas </a>  
  </div>
</div>

Metodes

.modal(options)

Aktivizē jūsu saturu kā modālu. Pieņem izvēles opcijas object.

$ ( '#myModal' ). modāls ({
  tastatūra : viltus 
})

.modal('toggle')

Manuāli pārslēdz modālu.

$ ( '#myModal' ). modāls ( 'pārslēgt' )

.modal('show')

Manuāli atver modālu.

$ ( '#myModal' ). modāls ( 'show' )

.modal('hide')

Manuāli slēpj modālu.

$ ( '#myModal' ). modāls ( 'slēpt' )

Pasākumi

Bootstrap modālā klase atklāj dažus notikumus, lai piesaistītu modālo funkcionalitāti.

$ ( '#myModal' ). on ( 'slēpts' , funkcija () {   
  // dari kaut ko…
})

Par nolaižamajām izvēlnēm

Pievienojiet nolaižamās izvēlnes gandrīz visam Bootstrap, izmantojot šo vienkāršo spraudni. Bootstrap ir pieejams pilns nolaižamās izvēlnes atbalsts navigācijas joslā, cilnēs un tabletēs.

Piemēri

Noklikšķiniet uz nolaižamajām navigācijas saitēm navigācijas joslā un tālāk esošajām tabletēm, lai pārbaudītu nolaižamās izvēlnes.

• Regulāra saite
• Nomest lejā
  • Action
  • Another action
  • Something else here
  • Separated link
• Nolaižamā izvēlne 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Nolaižamā izvēlne 3
  • Action
  • Another action
  • Something else here
  • Separated link

Izmantojot bootstrap-dropdown.js

Izsauciet nolaižamās izvēlnes, izmantojot javascript:

$ ( '.dropdown-toggle' ). nolaižamā izvēlne ()

Atzīmes

Lai jebkuram elementam ātri pievienotu nolaižamās izvēlnes funkcionalitāti, vienkārši pievienojiet data-toggle="dropdown", un automātiski tiks aktivizēta jebkura derīga sāknēšanas nolaižamā izvēlne.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Parasta saite </a></li>  
  <li class = "nolaižamā izvēlne" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Nomest lejā
      <b class = "caret" ></b> 
    </a>
    <ul class = "nolaižamā izvēlne" > 
      <li><a href = "#" > Darbība </a></li> 
      <li><a href = "#" > Vēl viena darbība </a></li> 
      <li><a href = "#" > Šeit ir vēl kaut kas </a></li> 
      <li class = "dalītājs" ></li> 
      <li><a href = "#" > Atdalīta saite </a></li> 
    </ul>
  </li>
  ...
</ul>

Lai vietrāžus URL saglabātu neskartus, izmantojiet data-targetatribūtu, nevis href="#".

<ul class = "nav nav-pills" > 
  <li class = "nolaižamā izvēlne" > 
    <a class = "dropdown-toggle" data-toggle = "nolaižamā izvēlne" data-target = "#" href = "ceļš/uz/lapu.html" >    
      Nomest lejā
      <b class = "caret" ></b> 
    </a>
    <ul class = "nolaižamā izvēlne" > 
      ...
    </ul>
  </li>
</ul>

Metodes

$().dropdown()

Programmatūras API izvēlņu aktivizēšanai noteiktai navigācijas joslai vai navigācijai ar cilnēm.

ScrollSpy spraudnis ir paredzēts automātiskai navigācijas mērķu atjaunināšanai, pamatojoties uz ritināšanas pozīciju.

Navigācijas joslas piemērs ar scrollspy

Ritiniet tālāk redzamo apgabalu un skatieties navigācijas atjauninājumu. Tiks izcelti arī nolaižamās izvēlnes apakšvienumi. Pamēģini!

Izmantojot bootstrap-scrollspy.js

Zvaniet scrollspy, izmantojot javascript:

$ ( '#navbar' ). scrollspy ()

Atzīmes

Lai augšējās joslas navigācijai viegli pievienotu scrollspy darbību, vienkārši pievienojiet data-spy="scroll"elementam, kuru vēlaties izspiegot (parasti tas ir pamatteksts).

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

Metodes

.scrollspy('refresh')

Izmantojot scrollspy kopā ar elementu pievienošanu vai noņemšanu no DOM, jums būs jāizsauc atsvaidzināšanas metode, piemēram:

$ ( '[data-spy="scroll"]' ). katrs ( funkcija () {  
  var $spy = $ ( šis ). scrollspy ( 'atsvaidzināt' )
});

Iespējas

Pasākumi

Šis spraudnis pievieno ātru, dinamisku cilnes un tabletes funkcionalitāti, lai pārietu uz vietējo saturu.

Cilņu piemēri

Noklikšķiniet uz tālāk esošajām cilnēm, lai pārslēgtos starp slēptajām rūtīm, pat izmantojot nolaižamās izvēlnes.

• Mājas
• Profils
• Nomest lejā
  • @fat
  • @mdo

Izmantojot bootstrap-tab.js

Iespējot cilnes, kurās var izmantot JavaScript (katra cilne ir jāaktivizē atsevišķi):

$ ( '#myTab a' ). noklikšķiniet ( funkcija ( e ) {  
  e . novērstNoklusējums ();
  $ ( šis ). cilne ( 'rādīt' );
})

Atsevišķas cilnes var aktivizēt vairākos veidos:

$ ( '#myTab a[href="#profile"]' ). cilne ( 'rādīt' ); // Atlasiet cilni pēc nosaukuma 
$ ( '#myTab a:first' ). cilne ( 'rādīt' ); // Atlasiet pirmo cilni 
$ ( '#myTab a:last' ). cilne ( 'rādīt' ); // Atlasīt pēdējo cilni 
$ ( '#myTab li:eq(2) a' ). cilne ( 'rādīt' ); // Atlasīt trešo cilni (indeksēts ar 0) 

Atzīmes

Varat aktivizēt cilni vai tabletes navigāciju, nerakstot JavaScript, vienkārši norādot elementu data-toggle="tab"vai data-toggle="pill"uz tā. Pievienojot cilnei navun nav-tabsklases, ultiks lietots sāknēšanas cilnes stils.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Sākums </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profils </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Ziņojumi </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Iestatījumi </a></li>  
</ul>

Metodes

$().tab

Aktivizē cilnes elementu un satura konteineru. Cilnē DOM ir jābūt vai nu konteinera mezglam, data-targetvai tā mērķauditorijas atlasei.href

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Sākums </a></li>  
  <li><a href = "#profile" > Profils </a></li> 
  <li><a href = "#messages" > Ziņojumi </a></li> 
  <li><a href = "#settings" > Iestatījumi </a></li> 
</ul>
 
<div class = "cilnes saturs" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profils" > ... </div>  
  <div class = "tab-pane" id = "ziņojumi" > ... </div>  
  <div class = "tab-pane" id = "iestatījumi" > ... </div>  
</div>
 
<skripts>
  $ ( funkcija () {  
    $ ( '#myTab a:last' ). cilne ( 'rādīt' );
  })
</script>

Pasākumi

$ ( 'a[data-toggle="tab"]' ). on ( ' redzams ' , funkcija ( e ) {   
  e . mērķis // aktivizēta cilne
  e . relatedTarget // iepriekšējā cilne
})

Par rīka padomiem

Iedvesmojoties no izcilā spraudņa jQuery.tipsy, ko sarakstījis Džeisons Frame; Rīka padomi ir atjaunināta versija, kas nav atkarīga no attēliem, izmanto css3 animācijām un datu atribūtus vietējai nosaukumu glabāšanai.

Rīka padomu izmantošanas piemērs

Virziet kursoru virs tālāk esošajām saitēm, lai skatītu rīka padomus:

Izmantojot bootstrap-tooltip.js

Aktivizējiet rīka padomu, izmantojot JavaScript:

$ ( '#piemērs' ). rīka padoms ( opcijas )

Iespējas

Atzīmes

Veiktspējas iemeslu dēļ ir izvēlēti rīka padoms un Popover datu apis. Ja vēlaties tos izmantot, vienkārši norādiet atlasītāja opciju.

<a href = "#" rel = "tooltip" title = "pirmais rīka padoms" > virziet kursoru virs manis </a>   

Metodes

$().rīka padoms(opcijas)

Elementu kolekcijai pievieno rīku padomu apdarinātāju.

.tooltip('show')

Parāda elementa rīka padomu.

$ ( '#element' ). rīka padoms ( 'rādīt' )

.tooltip('hide')

Paslēpj elementa rīka padomu.

$ ( '#element' ). rīka padoms ( 'slēpt' )

.tooltip('toggle')

Pārslēdz elementa rīka padomu.

$ ( '#element' ). rīka padoms ( 'pārslēgt' )

Par popoveriem

Pievienojiet mazus satura pārklājumus, piemēram, iPad, jebkuram elementam, lai ievietotu sekundāro informāciju.

* Nepieciešams iekļaut rīka padomu

Uznirstoša ekrāna piemērs

Virziet kursoru virs pogas, lai aktivizētu uznirstošo logu.

Izmantojot bootstrap-popover.js

Iespējot uznirstošos logus, izmantojot javascript:

$ ( '#piemērs' ). popover ( opcijas )

Iespējas

Atzīmes

Veiktspējas iemeslu dēļ ir izvēlēti rīka padoms un Popover datu apis. Ja vēlaties tos izmantot, vienkārši norādiet atlasītāja opciju.

Metodes

$().popover(options)

Inicializē elementu kolekcijas uznirstošos logus.

.popover('show')

Atklāj elementu popover.

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

.popover('hide')

Slēp elementu uznirstošo logu.

$ ( '#element' ). popover ( 'slēpt' )

.popover('toggle')

Pārslēdz elementu uznirstošo logu.

$ ( '#element' ). popover ( 'pārslēgt' )

Par brīdinājumiem

Brīdinājumu spraudnis ir maza klase, lai brīdinājumiem pievienotu ciešu funkcionalitāti.

Brīdinājumu piemēri

Brīdinājumu spraudnis darbojas ar parastajiem brīdinājuma ziņojumiem un bloķētajiem ziņojumiem.

Izmantojot bootstrap-alert.js

Iespējot brīdinājuma noraidīšanu, izmantojot JavaScript:

$ ( ".alert" ). brīdinājums ()

Atzīmes

Vienkārši pievienojiet data-dismiss="alert"savai aizvēršanas pogai, lai automātiski piešķirtu brīdinājuma aizvēršanas funkcionalitāti.

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

Metodes

$().alert()

Apkopo visus brīdinājumus ar ciešu funkcionalitāti. Lai brīdinājumi tiktu aktivizēti, kad tie ir aizvērti, pārliecinieties, vai tiem jau ir piemērotas kategorijas un .fade..in

.alert('close')

Aizver brīdinājumu.

$ ( ".alert" ). brīdinājums ( 'aizvērt' )

Pasākumi

Bootstrap brīdinājumu klase atklāj dažus notikumus, lai piesaistītu brīdinājuma funkcionalitāti.

$ ( '#mans brīdinājums' ). bind ( 'slēgts' , funkcija () {   
  // dari kaut ko…
})

Par

Padariet vairāk ar pogām. Vadības pogu stāvokļi vai izveidot pogu grupas citiem komponentiem, piemēram, rīkjoslām.

Izmantošanas piemēri

Izmantojiet pogu spraudni stāvokļiem un pārslēgšanai.

Izmantojot bootstrap-button.js

Iespējot pogas, izmantojot javascript:

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

Atzīmes

Datu atribūti ir pogas spraudņa sastāvdaļa. Apskatiet tālāk sniegto koda piemēru dažādiem iezīmēšanas veidiem.

<!-- Pievienojiet data-toggle="button", lai aktivizētu pārslēgšanu uz vienas pogas -->
<button class = "btn" data-toggle = "button" > Viena pārslēgšana </button>  
 
<!-- Pievienot data-toggle="buttons-checkbox" izvēles rūtiņas stila pārslēgšanai uz btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Pa kreisi </button> 
  <button class = "btn" > Vidējā </button> 
  <button class = "btn" > Pa labi </button> 
</div>
 
<!-- Pievienot data-toggle="buttons-radio" radio stila pārslēgšanai btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Pa kreisi </button> 
  <button class = "btn" > Vidējā </button> 
  <button class = "btn" > Pa labi </button> 
</div>

Metodes

$().button('toggle')

Pārslēdz push stāvokli. Piešķir pogai tādu izskatu, ka tā ir aktivizēta.

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

$().button('ielādē')

Iestata pogas stāvokli uz ielādi — atspējo pogu un apmaina tekstu ar teksta ielādi. Ielādes teksts ir jādefinē pogas elementā, izmantojot datu atribūtu data-loading-text.

<button class = "btn" data-loading-text = "ielādē lietas..." > ... </button>   

$().button('atiestatīt')

Atiestata pogas stāvokli — apmaina tekstu ar sākotnējo tekstu.

$().poga(virkne)

Atiestata pogas stāvokli — maina tekstu uz jebkuru datu definēto teksta stāvokli.

<button class = "btn" data-complete-text = "pabeigts!" > ... </button>   
<skripts>
  $ ( '.btn' ). poga ( 'pabeigt' )
</script>

Par

Iegūstiet pamata stilus un elastīgu atbalstu saliekamām sastāvdaļām, piemēram, akordeoniem un navigācijai.

* Nepieciešams iekļaut pāreju spraudni.

Akordeona piemērs

Izmantojot sakļautības spraudni, mēs izveidojām vienkāršu akordeona stila logrīku:

Izmantojot bootstrap-collapse.js

Iespējot, izmantojot javascript:

$ ( ".sabrukums" ). sabrukt ()

Iespējas

Atzīmes

Vienkārši pievienojiet data-toggle="collapse"un data-targetelementam, lai automātiski piešķirtu saliekamā elementa vadību. Atribūts data-targetakceptē css atlasītāju, kam lietot sakļauto. Noteikti pievienojiet klasi collapsesaliekamajam elementam. Ja vēlaties, lai tas tiktu atvērts pēc noklusējuma, pievienojiet papildu klasi in.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  vienkārši saliekams
</button>
 
<div id = "demo" class = "sabrukt" > … </div>  

Metodes

.collapse(options)

Aktivizē jūsu saturu kā saliekamu elementu. Pieņem izvēles opcijas object.

$ ( '#mySaliekams' ). sakļaut ({
  pārslēgt : viltus 
})

.collapse('toggle')

Pārslēdz saliekamo elementu uz parādīto vai paslēpto.

.collapse('show')

Parāda saliekamu elementu.

.collapse('slēpt')

Slēpj saliekamu elementu.

Pasākumi

Bootstrap sabrukšanas klase atklāj dažus notikumus, lai piesaistītu sabrukšanas funkcionalitāti.

$ ( '#mySaliekams' ). on ( 'slēpts' , funkcija () {   
  // dari kaut ko…
})

Par

Universāls spraudnis, lai pārvietotos pa elementiem. Karuselis.

Piemēra karuselis

Skatieties slaidrādi zemāk.

Pirmā sīktēla etiķete

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida un eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Otrā sīktēla etiķete

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

‹ ›

Izmantojot bootstrap-carousel.js

Zvanīt, izmantojot javascript:

$ ( '.karuselis' ). karuselis ()

Iespējas

Atzīmes

Datu atribūti tiek izmantoti iepriekšējai un nākamajai kontrolei. Apskatiet tālāk redzamo marķējuma piemēru.

<div id = "myCarousel" class = "karuseļa slaids" >  
  <!-- Karuseļa preces -->
  <div class = "carousel-inner" > 
    <div class = "aktīvs vienums" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Karuseļa nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "iepriekšējā" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "nākamais" > › </a>   
</div>

Metodes

.carousel(options)

Inicializē karuseli ar papildu opcijām objectun sāk pārvietoties pa vienumiem.

$ ( '.karuselis' ). karuselis ({
  intervāls : 2000 
})

.carousel('cycle')

Pārvietojas pa karuseļa vienumiem no kreisās puses uz labo.

.carousel('pause')

Neļauj karuselim pārvietoties pa priekšmetiem.

.carousel(number)

Pārvieto karuseli uz noteiktu kadru (0, kas ir līdzīgs masīvam).

.carousel('iepriekšējā')

Pāriet uz iepriekšējo vienumu.

.carousel('next')

Pāriet uz nākamo vienumu.

Pasākumi

Bootstrap karuseļa klase atklāj divus notikumus, lai pievienotos karuseļa funkcionalitātei.

Par

Vienkāršs, viegli paplašināms spraudnis, lai ātri izveidotu elegantas veidlapas ar jebkura veida teksta ievadi.

Piemērs

Sāciet rakstīt tālāk esošajā laukā, lai parādītu priekšraksta rezultātus.

Izmantojot bootstrap-typeahead.js

Izsauciet ievadrakstu, izmantojot javascript:

$ ( '.typeahead' ). uz priekšu ()

Iespējas

Atzīmes

Pievienojiet datu atribūtus, lai reģistrētu elementu ar priekšraksta funkcionalitāti.

<ievades veids = "teksts" data-provide = "ierakstīt priekšpusi" >  

Metodes

.typeahead(options)

Inicializē ievadi ar ievadrakstu.