Apie modalus

Supaprastintas, bet lankstus, pritaikytas tradiciniam javascript modaliniam papildiniui, turintis tik minimalias reikalingas funkcijas ir išmaniuosius numatytuosius nustatymus.

Statinis pavyzdys

Žemiau yra statiškai pateiktas modalas.

Tiesioginė demonstracija

Perjunkite modalą per javascript spustelėdami toliau esantį mygtuką. Jis slinks žemyn ir išnyks nuo puslapio viršaus.

Naudojant bootstrap-modal

Iškvieskite modalą per javascript:

$ ( '#myModal' ). modalinis ( parinktys )

Galimybės

Žymėjimas

Galite lengvai suaktyvinti modalus savo puslapyje, neparašydami nė vienos JavaScript eilutės. Tiesiog nustatykite data-toggle="modal"valdiklio elementą su data-target="#foo"arba href="#foo", kuris atitinka modalinio elemento ID, ir spustelėjus jis paleis jūsų modalą.

Be to, norėdami pridėti parinkčių prie savo modalinio egzemplioriaus, tiesiog įtraukite jas kaip papildomus duomenų atributus valdymo elemente arba pačiame modaliniame žymėjime.

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

<div class = "modal hide" id = "myModal" >  
  <div class = "modalinė antraštė" > 
    <button type = "button" class = "uždaryti" data-dismiss = "modalinis" > × </button>   
    <h3> Modalinė antraštė </h3>
  </div>
  <div class = "modal-body" > 
    <p> Vienas puikus kūnas... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Uždaryti </a>   
    <a href = "#" class = "btn btn-primary" > Išsaugoti pakeitimus </a>  
  </div>
</div>

Metodai

.modal(parinktys)

Suaktyvina jūsų turinį kaip modalą. Priima pasirenkamas parinktis object.

$ ( '#myModal' ). modalinis ({
  klaviatūra : klaidinga 
})

.modal('toggle')

Rankiniu būdu perjungia modalą.

$ ( '#myModal' ). modalinis ( 'perjungti' )

.modal('show')

Modalą atidaro rankiniu būdu.

$ ( '#myModal' ). modalinis ( „šou“ )

.modal('hide')

Rankiniu būdu paslepia modalą.

$ ( '#myModal' ). modalinis ( „paslėpti“ )

Renginiai

„Bootstrap“ modalinė klasė atskleidžia keletą įvykių, kad būtų galima prisijungti prie modalinės funkcijos.

$ ( '#myModal' ). on ( 'slėptas' , funkcija () {   
  // daryk ką nors...
})

Apie išskleidžiamuosius meniu

Naudodami šį paprastą įskiepį pridėkite išskleidžiamuosius meniu prie beveik bet ko „Bootstrap“. „Bootstrap“ turi visą išskleidžiamojo meniu palaikymą naršymo juostoje, skirtukuose ir tabletėse.

Pavyzdžiai

Spustelėkite išskleidžiamąsias naršymo nuorodas naršymo juostoje ir toliau esančias tabletes, kad išbandytumėte išskleidžiamuosius meniu.

• Įprasta nuoroda
• Išskleidžiamasis meniu
  • Action
  • Another action
  • Something else here
  • Separated link
• 2 išskleidžiamasis meniu
  • Action
  • Another action
  • Something else here
  • Separated link
• 3 išskleidžiamasis meniu
  • Action
  • Another action
  • Something else here
  • Separated link

Naudojant bootstrap-dropdown.js

Iškvieskite išskleidžiamuosius meniu naudodami javascript:

$ ( '.dropdown-toggle' ). išskleidžiamasis meniu ()

Žymėjimas

Norėdami greitai pridėti išskleidžiamojo meniu funkciją prie bet kurio elemento, tiesiog pridėkite data-toggle="dropdown"ir bet kuris tinkamas įkrovos išskleidžiamasis meniu bus automatiškai suaktyvintas.

<ul class = "nav nav-pills" > 
  <li class = "aktyvus" ><a href = "#" > Įprasta nuoroda </a></li>  
  <li class = "išskleidžiamasis sąrašas" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Išskleidžiamasis meniu
      <b klasė = "caret" ></b> 
    </a>
    <ul class = "išskleidžiamasis meniu" > 
      <li><a href = "#" > Veiksmas </a></li> 
      <li><a href = "#" > Kitas veiksmas </a></li> 
      <li><a href = "#" > Čia dar kažkas </a></li> 
      <li class = "daliklis" ></li> 
      <li><a href = "#" > Atskira nuoroda </a></li> 
    </ul>
  </li>
  ...
</ul>

Kad URL nepažeistumėte, naudokite data-targetatributą, o ne href="#".

<ul class = "nav nav-pills" > 
  <li class = "išskleidžiamasis sąrašas" > 
    <a class = "dropdown-toggle" data-toggle = "išskleidžiamasis sąrašas" data-target = "#" href = "kelias/į/puslapį.html" >    
      Išskleidžiamasis meniu
      <b klasė = "caret" ></b> 
    </a>
    <ul class = "išskleidžiamasis meniu" > 
      ...
    </ul>
  </li>
</ul>

Metodai

$().dropdown()

Programinė API, skirta suaktyvinti tam tikros naršymo juostos arba naršymo skirtukais meniu.

„ScrollSpy“ papildinys skirtas automatiškai atnaujinti navigacijos taikinius pagal slinkties padėtį.

Pavyzdys naršymo juosta su scrollspy

Slinkite toliau esančia sritimi ir žiūrėkite navigacijos atnaujinimą. Taip pat bus paryškinti išskleidžiamieji antriniai elementai. Pabandyk tai!

Naudojant bootstrap-scrollspy.js

Paskambinkite scrollspy per javascript:

$ ( '#navbar' ). scrollspy ()

Žymėjimas

Jei norite, kad viršutinės juostos naršymas būtų lengvai įtrauktas į šnipinėjimą, tiesiog pridėkite data-spy="scroll"prie elemento, kurį norite šnipinėti (dažniausiai tai būtų korpusas).

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

Metodai

.scrollspy('refresh')

Kai naudojate scrollspy kartu su elementų pridėjimu arba pašalinimu iš DOM, turėsite iškviesti atnaujinimo metodą, pavyzdžiui:

$ ( '[data-spy="scroll"]' ). kiekvienas ( funkcija () {  
  var $spy = $ ( tai ). scrollspy ( 'atnaujinti' )
});

Galimybės

Renginiai

Šis papildinys prideda greitą, dinamišką skirtukų ir tablečių funkciją, kad būtų galima pereiti per vietinį turinį.

Skirtukų pavyzdžiai

Spustelėkite toliau pateiktus skirtukus, kad perjungtumėte paslėptas sritis, net naudodami išskleidžiamuosius meniu.

• Namai
• Profilis
• Išskleidžiamasis meniu
  • @fat
  • @mdo

Naudojant bootstrap-tab.js

Įgalinti skirtukų skirtukus naudodami „Javascript“ (kiekvieną skirtuką reikia suaktyvinti atskirai):

$ ( '#myTab a' ). spustelėkite ( funkcija ( e ) {  
  e . užkirsti keliąNumatytasis ();
  $ ( tai ). skirtukas ( 'rodyti' );
})

Atskirus skirtukus galite suaktyvinti keliais būdais:

$ ( '#myTab a[href="#profile"]' ). skirtukas ( 'rodyti' ); // Pasirinkite skirtuką pagal pavadinimą 
$ ( '#myTab a:first' ). skirtukas ( 'rodyti' ); // Pasirinkite pirmąjį skirtuką 
$ ( '#myTab a:last' ). skirtukas ( 'rodyti' ); // Pasirinkite paskutinį skirtuką 
$ ( '#myTab li:eq(2) a' ). skirtukas ( 'rodyti' ); // Pasirinkti trečią skirtuką (indeksuotas 0) 

Žymėjimas

Galite suaktyvinti skirtuką arba piliulės naršymą nerašydami jokio javascript, tiesiog nurodydami data-toggle="tab"arba data-toggle="pill"ant elemento. Pridėjus navir nav-tabsklases prie skirtuko ulbus taikomas įkrovos skirtuko stilius.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Pagrindinis </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profilis </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Pranešimai </a></li>  
  <li><a href = "#settings" data-toggle = "skirtukas" > Nustatymai </a></li>  
</ul>

Metodai

$().tab

Suaktyvina skirtuko elementą ir turinio konteinerį. Skirtuko lape turi būti a data-targetarba hrefDOM sudėtinio rodinio mazgas.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "aktyvus" ><a href = "#home" > Pagrindinis puslapis </a></li>  
  <li><a href = "#profile" > Profilis </a></li> 
  <li><a href = "#messages" > Žinutės </a></li> 
  <li><a href = "#settings" > Nustatymai </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profilis" > ... </div>  
  <div class = "tab-pane" id = "pranešimai" > ... </div>  
  <div class = "tab-pane" id = "nustatymai" > ... </div>  
</div>
 
<script>
  $ ( funkcija () {  
    $ ( '#myTab a:last' ). skirtukas ( 'rodyti' );
  })
</script>

Renginiai

$ ( 'a[data-toggle="tab"]' ). on ( 'rodoma' , funkcija ( e ) {   
  e . taikinys // suaktyvintas skirtukas
  e . relatedTarget // ankstesnis skirtukas
})

Apie patarimus

Įkvėptas puikaus jQuery.tipsy įskiepio, kurį parašė Jason Frame; Patarimai yra atnaujinta versija, kuri nepriklauso nuo vaizdų, naudoja css3 animacijai ir duomenų atributus vietiniam pavadinimui saugoti.

Patarimų naudojimo pavyzdys

Užveskite pelės žymeklį ant toliau pateiktų nuorodų, kad pamatytumėte patarimus:

Naudojant bootstrap-tooltip.js

Suaktyvinkite patarimą naudodami javascript:

$ ( '#pavyzdys' ). patarimas ( parinktys )

Galimybės

Žymėjimas

Dėl našumo priežasčių pasirenkamas įrankių patarimas ir Popover duomenų apis. Jei norite jas naudoti, tiesiog nurodykite parinkiklio parinktį.

<a href = "#" rel = "tooltip" title = "pirmas patarimas" > užveskite pelės žymeklį virš manęs </a>   

Metodai

$().tooltip(parinktys)

Prie elementų rinkinio prideda patarimo tvarkyklę.

.tooltip('show')

Atskleidžia elemento patarimą.

$ ( „#elementas“ ). patarimas ( „rodyti“ )

.tooltip('hide')

Slepia elemento patarimą.

$ ( „#elementas“ ). patarimas ( 'slėpti' )

.tooltip('toggle')

Perjungia elemento patarimą.

$ ( „#elementas“ ). patarimas ( 'perjungti' )

Apie popovers

Prie bet kurio elemento pridėkite mažas turinio perdangas, pvz., esančias iPad.

* Reikia įtraukti patarimą

Užvedimo ant pelės žymeklio pavyzdys

Užveskite pelės žymeklį virš mygtuko, kad suaktyvintumėte iššokantįjį ekraną.

Naudojant bootstrap-popover.js

Įgalinti iššokančius langus per javascript:

$ ( '#pavyzdys' ). popover ( parinktys )

Galimybės

Žymėjimas

Dėl našumo priežasčių pasirenkamas įrankių patarimas ir Popover duomenų apis. Jei norite jas naudoti, tiesiog nurodykite parinkiklio parinktį.

Metodai

$().popover(parinktys)

Inicijuoja elementų rinkinio iššokančius langus.

.popover('show')

Atskleidžia elementų iššokimą.

$ ( „#elementas“ ). popover ( "show" )

.popover('hide')

Slepia elementų iššokimą.

$ ( „#elementas“ ). popover ( „paslėpti“ )

.popover('toggle')

Perjungia elementų iššokimą.

$ ( „#elementas“ ). popover ( 'perjungti' )

Apie įspėjimus

Įspėjimų įskiepis yra maža klasė, skirta įspėjimams papildyti artimą funkciją.

Įspėjimų pavyzdžiai

Įspėjimų papildinys veikia su įprastais įspėjimo pranešimais ir blokuoja pranešimus.

Naudojant bootstrap-alert.js

Įgalinti įspėjimo atmetimą naudojant javascript:

$ ( ".alert" ). įspėjimas ()

Žymėjimas

Tiesiog pridėkite data-dismiss="alert"prie uždarymo mygtuko, kad automatiškai suteiktų įspėjimo uždarymo funkciją.

<a class = "uždaryti" data-dismiss = "alert" href = "#" > × </a>   

Metodai

$().alert()

Apima visus įspėjimus glaudžiais funkcionalumu. Jei norite, kad įspėjimai būtų aktyvūs uždarius, įsitikinkite, kad jiems jau pritaikyta .fadeir .inklasė.

.alert('close')

Uždaro įspėjimą.

$ ( ".alert" ). įspėjimas ( 'uždaryti' )

Renginiai

„Bootstrap“ įspėjimų klasė atskleidžia keletą įvykių, kad būtų galima prisijungti prie įspėjimo funkcijų.

$ ( '#mano įspėjimas' ). bind ( 'closed' , function () {   
  // daryk ką nors...
})

Apie

Padarykite daugiau naudodami mygtukus. Valdykite mygtukų būsenas arba sukurkite mygtukų grupes daugiau komponentų, pvz., įrankių juostoms.

Naudojimo pavyzdžiai

Būsenoms ir perjungimams naudokite mygtukų papildinį.

Naudojant bootstrap-button.js

Įgalinti mygtukus per javascript:

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

Žymėjimas

Duomenų atributai yra neatsiejami mygtuko papildinio dalis. Peržiūrėkite toliau pateiktą įvairių žymėjimo tipų kodo pavyzdį.

<!-- Add data-toggle="button", kad suaktyvintumėte perjungimą ant vieno mygtuko -->
<button class = "btn" data-toggle = "button" > Vienas perjungimas </button>  
 
<!-- Pridėkite data-toggle="buttons-checkbox", kad perjungtumėte žymimąjį laukelį btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Kairėn </button> 
  <button class = "btn" > Vidurinis </button> 
  <button class = "btn" > Dešinėn </button> 
</div>
 
<!-- Pridėkite data-toggle="buttons-radio", kad perjungtumėte radijo stilių btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Kairėn </button> 
  <button class = "btn" > Vidurinis </button> 
  <button class = "btn" > Dešinėn </button> 
</div>

Metodai

$().button('toggle')

Perjungia stūmimo būseną. Mygtukui atrodo, kad jis buvo suaktyvintas.

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

$().button('kraunama')

Nustato mygtuko būseną į įkėlimą – išjungia mygtuką ir pakeičia tekstą į įkeliamą tekstą. Įkeliamas tekstas turi būti apibrėžtas mygtuko elemente naudojant duomenų atributą data-loading-text.

<button class = "btn" data-loading-text = "įkeliama medžiaga..." > ... </button>   

$().button('atstatyti')

Iš naujo nustato mygtuko būseną – pakeičia tekstą į pradinį tekstą.

$().mygtukas(eilutė)

Iš naujo nustato mygtuko būseną – pakeičia tekstą į bet kurią duomenų apibrėžtą teksto būseną.

<button class = "btn" data-complete-text = "baigta!" > ... </button>   
<script>
  $ ( '.btn' ). mygtukas ( 'užbaigti' )
</script>

Apie

Gaukite pagrindinius stilius ir lankstų sulankstomų komponentų, pvz., akordeonų ir navigacijos, palaikymą.

* Reikia įtraukti Transitions įskiepį.

Pavyzdys akordeonas

Naudodami sutraukimo papildinį sukūrėme paprastą akordeono stiliaus valdiklį:

Naudojant bootstrap-collapse.js

Įgalinti per javascript:

$ ( ".sutraukti" ). griūti ()

Galimybės

Žymėjimas

Tiesiog pridėkite data-toggle="collapse"ir data-targetprie elemento, kad automatiškai priskirtumėte sulankstomo elemento valdymą. data-targetAtributas priima css parinkiklį, kuriam taikomas sutraukimas . Būtinai pridėkite klasę collapseprie sutraukiamo elemento. Jei norite, kad jis būtų atidarytas pagal numatytuosius nustatymus, pridėkite papildomą klasę in.

<button class = "btn btn-danger" data-toggle = "sutraukti" data-target = "#demo" >   
  paprastas sulankstomas
</button>
 
<div id = "demo" class = "sutraukti" > … </div>  

Metodai

.collapse(parinktys)

Suaktyvina turinį kaip sulankstomą elementą. Priima pasirenkamas parinktis object.

$ ( '#myCollapsible' ). sutraukti ({
  perjungti : klaidinga 
})

.collapse('toggle')

Perjungia sutraukiamą elementą į rodomą arba paslėptą.

.collapse('show')

Rodo sulankstomą elementą.

.collapse('slėpti')

Paslepia sulankstomą elementą.

Renginiai

„Bootstrap“ sutraukimo klasė atskleidžia keletą įvykių, kad būtų galima prisijungti prie sutraukimo funkcijos.

$ ( '#myCollapsible' ). on ( 'slėptas' , funkcija () {   
  // daryk ką nors...
})

Apie

Bendras papildinys, skirtas važiuoti per elementus. Karuselė.

Karuselės pavyzdys

Žiūrėkite žemiau esančią skaidrių demonstraciją.

Pirmoji miniatiūros etiketė

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.

Antroji miniatiūros etiketė

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.

Trečioji miniatiūros etiketė

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.

‹ ›

Naudojant bootstrap-carousel.js

Skambinti per javascript:

$ ( '.karuselė' ). karuselė ()

Galimybės

Žymėjimas

Duomenų atributai naudojami ankstesniam ir kitam valdymui. Peržiūrėkite toliau pateiktą žymėjimo pavyzdį.

<div id = "myCarousel" class = "karuselės skaidrė" >  
  <!-- Karuselės elementai -->
  <div class = "carousel-inner" > 
    <div class = "aktyvus elementas" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "ankstesnis" > ‹ </a>   
  <a class = "carousel-control right" href = "#manoKaruselė" data-slide = "kitas" > › </a>   
</div>

Metodai

.carousel(parinktys)

Inicijuoja karuselę su pasirenkamomis parinktimis objectir pradeda važiuoti per elementus.

$ ( '.karuselė' ). karuselė ({
  intervalas : 2000 
})

.carousel('cycle')

Važiuoja per karuselės elementus iš kairės į dešinę.

.carousel('pause')

Sustabdo karuselės judėjimą per daiktus.

.carousel(number)

Perkelia karuselę į tam tikrą kadrą (pagrįsta 0, panašiai kaip masyvas).

.carousel('ankstesnis')

Perkeliama į ankstesnį elementą.

.carousel('kitas')

Perkeliama į kitą elementą.

Renginiai

„Bootstrap“ karuselės klasė atskleidžia du įvykius, kad būtų galima prisijungti prie karuselės funkcijų.

Apie

Pagrindinis, lengvai išplečiamas papildinys, skirtas greitai sukurti elegantiškas antraštes naudojant bet kokios formos teksto įvestį.

Pavyzdys

Pradėkite vesti tekstą į žemiau esantį lauką, kad būtų rodomi išankstiniai rezultatai.

Naudojant bootstrap-typeahead.js

Iškvieskite įvestį per javascript:

$ ( '.typeahead' ). į priekį ()

Galimybės

Žymėjimas

Pridėkite duomenų atributus, kad užregistruotumėte elementą su išankstinio rašymo funkcija.

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

Metodai

.typeahead(parinktys)

Inicijuoja įvestį su į priekį.