JavaScript

Breng de componenten van Bootstrap tot leven - nu met 13 aangepaste jQuery-plug-ins.

Kop op! Deze documenten zijn voor v2.3.2, die niet langer officieel wordt ondersteund. Bekijk de nieuwste versie van Bootstrap!

Individueel of samengesteld

Plug-ins kunnen afzonderlijk worden opgenomen (hoewel sommige afhankelijkheden vereisen), of allemaal tegelijk. Zowel bootstrap.js als bootstrap.min.js bevatten alle plug-ins in één bestand.

Gegevenskenmerken

U kunt alle Bootstrap-plug-ins puur via de markup-API gebruiken zonder een enkele regel JavaScript te schrijven. Dit is de eersteklas API van Bootstrap en zou uw eerste overweging moeten zijn bij het gebruik van een plug-in.

Dat gezegd hebbende, kan het in sommige situaties wenselijk zijn om deze functionaliteit uit te schakelen. Daarom bieden we ook de mogelijkheid om de data-attribuut-API uit te schakelen door de binding van alle gebeurtenissen op de body-namespace met `'data-api'` te ontbinden. Dit ziet er zo uit:

  1. $('body').off('.data-api')( 'lichaam' ). uit ( '.data-api' )

Als alternatief kunt u, om een ​​specifieke plug-in te targeten, gewoon de naam van de plug-in opnemen als een naamruimte samen met de data-api-naamruimte als volgt:

  1. $('body').off('.alert.data-api')( 'lichaam' ). uit ( '.alert.data-api' )

Programmatische API

We zijn ook van mening dat u alle Bootstrap-plug-ins puur via de JavaScript-API moet kunnen gebruiken. Alle openbare API's zijn enkele, ketenbare methoden en retourneren de verzameling waarop is gereageerd.

  1. $(".btn.danger").button("toggle").addClass("fat")( ".btn.gevaar" ). knop ( "wisselen" ). addClass ( "vet" )

Alle methoden moeten een optioneel options-object accepteren, een tekenreeks die op een bepaalde methode is gericht, of niets (dat een plug-in start met standaardgedrag):

  1. $("#myModal").modal() // geïnitialiseerd met standaardwaarden( "#myModal" ). modal () // geïnitialiseerd met standaardwaarden
  2. $ ( "#myModal" ). modal ({ keyboard : false }) // geïnitialiseerd zonder toetsenbord
  3. $ ( "#myModal" ). modal ( 'show' ) // initialiseert en roept show onmiddellijk op

Elke plug-in stelt ook zijn onbewerkte constructor bloot aan een eigenschap `Constructor`: $.fn.popover.Constructor. Als u een bepaalde plug-in-instantie wilt ophalen, haalt u deze rechtstreeks op uit een element: $('[rel=popover]').data('popover').

Geen conflict

Soms is het nodig om Bootstrap-plug-ins te gebruiken met andere UI-frameworks. In deze omstandigheden kunnen naamruimte-botsingen af ​​en toe optreden. Als dit gebeurt, kunt u een beroep doen .noConflictop de plug-in waarvan u de waarde wilt terugzetten.

  1. var bootstrapButton = $.fn.button.noConflict() // retourneer $.fn.button naar eerder toegewezen waardebootstrapButton = $ . fn . knop . noConflict () // retourneer $.fn.button naar eerder toegewezen waarde
  2. $ . fn . bootstrapBtn = bootstrapButton // geef $().bootstrapBtn de bootstrap-functionaliteit

Evenementen

Bootstrap biedt aangepaste gebeurtenissen voor de meeste unieke acties van plug-ins. Over het algemeen komen deze in een infinitief en voltooid deelwoordvorm - waarbij de infinitief (bijv. show) wordt geactiveerd aan het begin van een gebeurtenis, en de voltooid deelwoordvorm (bijv. shown) wordt geactiveerd bij de voltooiing van een actie.

Alle infinitieve gebeurtenissen bieden de functionaliteit preventDefault. Dit biedt de mogelijkheid om de uitvoering van een actie te stoppen voordat deze begint.

  1. $('#myModal').on('show', functie (e) {( '#myModal' ). aan ( 'toon' , functie ( e ) {
  2. if (! data ) retourneert e . voorkomenDefault () // stopt de weergave van modal
  3. })

Over overgangen

Voeg voor eenvoudige overgangseffecten bootstrap-transition.js een keer toe naast de andere JS-bestanden. Als je de gecompileerde (of verkleinde) bootstrap.js gebruikt, is het niet nodig om dit op te nemen - het is er al.

Gebruiksgevallen

Een paar voorbeelden van de transitie-plug-in:

  • Sliding of fade in modals
  • Tabbladen uitfaden
  • Waarschuwingen uitfaden
  • Schuifbare carrouselruiten

Voorbeelden

Modals zijn gestroomlijnde, maar flexibele dialoogvensters met de minimaal vereiste functionaliteit en slimme standaardinstellingen.

Statisch voorbeeld

Een gerenderd modaal met koptekst, hoofdtekst en reeks acties in de voettekst.

  1. <div class="modal hide fade"> class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </knop>
  4. <h3> Modale kop </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Een fijn lichaam… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" > Sluiten </a>
  11. <a href = "#" class = "btn btn-primary" > Wijzigingen opslaan </a>
  12. </div>
  13. </div>

Live demonstratie

Schakel een modaal via JavaScript door op de onderstaande knop te klikken. Het schuift naar beneden en verdwijnt in beeld vanaf de bovenkant van de pagina.

  1. <!-- Knop om modaal te activeren -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Demo-modaal starten </a>
  3. <!-- Modaal -->
  4. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
  5. <div class = "modal-header" >
  6. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  7. <h3 id = "myModalLabel" > Modale kop </h3>
  8. </div>
  9. <div class = "modal-body" >
  10. <p> Een fijn lichaam… </p>
  11. </div>
  12. <div class = "modal-footer" >
  13. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Sluiten </button>
  14. <button class = "btn btn-primary" > Wijzigingen opslaan </button>
  15. </div>
  16. </div>

Gebruik

Via gegevensattributen

Activeer een modaal zonder JavaScript te schrijven. Stel data-toggle="modal"in op een controller-element, zoals een knop, samen met een data-target="#foo"of href="#foo"om een ​​specifieke modaal te targeten om te schakelen.

  1. <button type="button" data-toggle="modal" data-target="#myModal">Modaal starten</button> type = "button" data-toggle = "modal" data-target = "#myModal" > Modaal starten </button>

Via JavaScript

Roep een modaal met id myModalaan met een enkele regel JavaScript:

  1. $('#myModal').modal(opties)( '#myModal' ). modaal ( opties )

Opties

Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-, zoals in data-backdrop="".

Naam type standaard Omschrijving
achtergrond booleaans WAAR Bevat een modaal-achtergrondelement. U kunt ook een achtergrond opgeven staticdie de modal niet sluit bij klikken.
toetsenbord booleaans WAAR Sluit de modal wanneer de escape-toets wordt ingedrukt
show booleaans WAAR Toont de modal wanneer geïnitialiseerd.
op afstand pad vals

Als er een externe url is opgegeven, wordt inhoud geladen via de loadmethode van jQuery en geïnjecteerd in de .modal-body. Als u de gegevens-API gebruikt, kunt u ook de hreftag gebruiken om de externe bron op te geven. Een voorbeeld hiervan is hieronder weergegeven:

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Methoden:

.modaal(opties)

Activeert uw inhoud als modaal. Accepteert een optionele optie object.

  1. $('#myModal').modal({( '#myModal' ). modaal ({
  2. toetsenbord : false
  3. })

.modal('toggle')

Schakelt handmatig een modaal in.

  1. $('#myModal').modal('toggle')( '#myModal' ). modaal ( 'toggle' )

.modal('toon')

Opent handmatig een modaal.

  1. $('#myModal').modal('show')( '#myModal' ). modaal ( 'toon' )

.modal('verbergen')

Verbergt handmatig een modaal.

  1. $('#myModal').modal('hide')( '#myModal' ). modaal ( 'verbergen' )

Evenementen

De modale klasse van Bootstrap onthult een paar gebeurtenissen voor het aansluiten op modale functionaliteit.

Evenement Beschrijving
show Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de showinstantiemethode wordt aangeroepen.
getoond Deze gebeurtenis wordt geactiveerd wanneer de modal zichtbaar is gemaakt voor de gebruiker (wacht tot de css-overgangen zijn voltooid).
verbergen Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de hideinstantiemethode is aangeroepen.
verborgen Deze gebeurtenis wordt geactiveerd wanneer de modal klaar is met verborgen zijn voor de gebruiker (wacht tot de css-overgangen zijn voltooid).
  1. $('#myModal').on('hidden', function () {( '#myModal' ). aan ( 'verborgen' , functie () {
  2. // doe iets…
  3. })

Voorbeeld in navbar

De ScrollSpy-plug-in is bedoeld voor het automatisch bijwerken van navigatiedoelen op basis van de schuifpositie. Scroll door het gebied onder de navigatiebalk en kijk hoe de actieve klas verandert. De dropdown-subitems worden ook gemarkeerd.

@dik

Ad legging keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi voordat ze uitverkocht waren. Tumblr fietsrechten van boer tot bord. Anim keffiyeh carles vest. Velit seitan mcsweeney's fotohokje 3 wolf moon irure. Cosby sweater lomo jeansshort, williamsburg hoodie minim qui je hebt er waarschijnlijk nog nooit van gehoord et cardigan trust fund culpa biodiesel wes anderson esthetiek. Nihil getatoeëerde accusamus, cred ironie biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa snor skateboard, adipisicing fugiat velit hooivork baard. Freegan baard aliqua cupidatat mcsweeney's vero. Cupidatat vier loko nisi, ea helvetica nulla carles. Getatoeëerde cosby sweater foodtruck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 kleermaker. Carles niet-esthetische inspanning quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

een

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo fietsrechten adipisicing banh mi, velit ea sunt next level locavore single-origin koffie in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, duurzame delectus consectetur heuptasje iphone.

twee

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa wat dan ook delectus foodtruck. Sapiente synth id veronderstelnda. Locavore sed helvetica cliché ironie, donderkatten waarvan je waarschijnlijk nog nooit hebt gehoord, consequat hoodie glutenvrije lo-fi fap aliquip. Labore elit placeat voordat ze uitverkocht waren, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Vest ambachtelijk bier seitan kant en klare velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Gebruik

Via gegevensattributen

Om eenvoudig scrollspy-gedrag toe te voegen aan uw navigatie op de bovenste balk, voegt data-spy="scroll"u gewoon het element toe dat u wilt bespioneren (meestal is dit de body) en data-target=".navbar"selecteert u welke navigatie u wilt gebruiken. U wilt scrollspy gebruiken met een .navcomponent.

  1. <body data-spy="scroll" data-target=".navbar">...</body> data-spy = "scroll" data-target = ".navbar" > ... </body>

Via JavaScript

Bel de scrollspy via JavaScript:

  1. $('#navbar').scrollspy() ( '#navbar' ). scrollspion ()
Kop op! Navbar-links moeten oplosbare id-doelen hebben. Een <a href="#home">home</a>moet bijvoorbeeld overeenkomen met iets in de dom zoals <div id="home"></div>.

Methoden:

.scrollspy('vernieuwen')

Wanneer u scrollspy gebruikt in combinatie met het toevoegen of verwijderen van elementen uit de DOM, moet u de vernieuwingsmethode als volgt aanroepen:

  1. $ ( '[data-spy="scroll"]' ). elke ( functie () {
  2. var $spy = $ ( dit ). scrollspy ( 'vernieuwen' )
  3. });

Opties

Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-, zoals in data-offset="".

Naam type standaard Omschrijving
offset nummer 10 Pixels die vanaf de bovenkant moeten worden verschoven bij het berekenen van de scrollpositie.

Evenementen

Evenement Beschrijving
activeren Deze gebeurtenis wordt geactiveerd wanneer een nieuw item wordt geactiveerd door de scrollspy.

Voorbeeldtabbladen

Voeg snelle, dynamische tabbladfunctionaliteit toe om door deelvensters met lokale inhoud te bladeren, zelfs via vervolgkeuzemenu's.

Raw denim, je hebt waarschijnlijk nog nooit van die jeansshort Austin gehoord. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Snor cliche tempor, williamsburg carles veganistische helvetica. Reprehenderit slager retro keffiyeh dromenvanger synth. Cosby trui eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis vest amerikaanse kleding, slager voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


Gebruik

Tabbladen met tabbladen inschakelen via JavaScript (elk tabblad moet afzonderlijk worden geactiveerd):

  1. $ ( '#mijnTab a' ). klik ( functie ( e ) {
  2. e . voorkomenStandaard ();
  3. $ ( dit ). tabblad ( 'toon' );
  4. })

U kunt afzonderlijke tabbladen op verschillende manieren activeren:

  1. $ ( '#myTab a[href="#profile"]' ). tabblad ( 'toon' ); // Selecteer tabblad op naam
  2. $ ( '#mijnTab a:eerste' ). tabblad ( 'toon' ); // Selecteer eerste tabblad
  3. $ ( '#mijnTab a:laatste' ). tabblad ( 'toon' ); // Selecteer laatste tabblad
  4. $ ( '#myTab li:eq(2) a' ). tabblad ( 'toon' ); // Selecteer derde tabblad (0-geïndexeerd)

Markup

U kunt een tab- of pill-navigatie activeren zonder JavaScript te schrijven door simpelweg data-toggle="tab"of data-toggle="pill"op een element te specificeren. Door de klassen naven aan het tabblad toe te voegen, wordt de stijl van het Bootstrap-tabblad toegepast.nav-tabsul

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Startpagina </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profiel </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Berichten </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Instellingen </a></li>
  6. </ul>

Methoden:

$().tab

Activeert een tabelement en inhoudcontainer. Tab moet een data-targetof een hrefgericht hebben op een containerknooppunt in de DOM.

  1. <ul class = "nav nav-tabs" id = "mijnTab" >
  2. <li class = "active" ><a href = "#home" > Home </a></li>
  3. <li><a href = "#profile" > Profiel </a></li>
  4. <li><a href = "#messages" > Berichten </a></li>
  5. <li><a href = "#settings" > Instellingen </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-inhoud" >
  9. <div class = "tabvenster actief" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-paneel" id = "berichten" > ... </div>
  12. <div class = "tab-paneel" id = "instellingen" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( functie () {
  17. $ ( '#mijnTab a:laatste' ). tabblad ( 'toon' );
  18. })
  19. </script>

Evenementen

Evenement Beschrijving
show Deze gebeurtenis wordt geactiveerd bij tabshow, maar voordat het nieuwe tabblad is weergegeven. Gebruik event.targeten event.relatedTargetom respectievelijk het actieve tabblad en het vorige actieve tabblad (indien beschikbaar) te targeten.
getoond Deze gebeurtenis wordt geactiveerd bij tabshow nadat een tabblad is weergegeven. Gebruik event.targeten event.relatedTargetom respectievelijk het actieve tabblad en het vorige actieve tabblad (indien beschikbaar) te targeten.
  1. $ ( 'a[data-toggle="tab"]' ). aan ( 'getoond' , functie ( e ) {
  2. e . doel // geactiveerd tabblad
  3. e . gerelateerdTarget // vorig tabblad
  4. })

Voorbeelden

Geïnspireerd door de uitstekende jQuery.tipsy-plug-in geschreven door Jason Frame; Tooltips zijn een bijgewerkte versie, die niet afhankelijk zijn van afbeeldingen, CSS3 gebruiken voor animaties en gegevenskenmerken voor lokale titelopslag.

Om prestatieredenen zijn de tooltip en popover data-api's opt-in, wat betekent dat u ze zelf moet initialiseren .

Plaats de muisaanwijzer op de onderstaande links om tooltips te zien:

Strakke broeken van het volgende niveau keffiyeh , je hebt er waarschijnlijk nog nooit van gehoord. Photo booth baard raw denim boekdruk veganistische messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie duurzame quinoa 8-bit amerikaanse kleding heeft een terry richardson vinyl chambray. Baardstumptown, vesten banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, vier loko mcsweeney's cleanse veganistische chambray. Een echt ironische ambachtsman , ongeacht keytar , scenester farm-to-table banksy Austin twitter omgaan met freegan cred raw denim single-origin coffee viral.

Vier richtingen

Knopinfo in invoergroepen

Wanneer u tooltips en popovers gebruikt met de Bootstrap-invoergroepen, moet u de container(hieronder beschreven) optie instellen om ongewenste neveneffecten te voorkomen.


Gebruik

Activeer de knopinfo via JavaScript:

  1. $ ( '#voorbeeld' ). knopinfo ( opties )

Opties

Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-, zoals in data-animation="".

Naam type standaard Omschrijving
animatie booleaans WAAR pas een css fade-overgang toe op de tooltip
html booleaans vals Voeg html in de tooltip in. Indien onwaar, wordt de textmethode van jQuery gebruikt om inhoud in de dom in te voegen. Gebruik sms als je je zorgen maakt over XSS-aanvallen.
plaatsing tekenreeks | functie 'bovenkant' hoe de tooltip te positioneren - top | onderaan | links | Rechtsaf
selector snaar vals Als er een selector is, worden knopinfo-objecten gedelegeerd aan de opgegeven doelen.
titel tekenreeks | functie '' standaard titelwaarde als de tag 'title' niet aanwezig is
trekker snaar 'zwevende focus' hoe knopinfo wordt geactiveerd - klik op | zweven | focus | handleiding. Merk op dat u meerdere triggers doorgeeft, gescheiden door spaties, triggertypes.
vertraging nummer | object 0

vertraging bij het tonen en verbergen van de knopinfo (ms) - is niet van toepassing op het handmatige triggertype

Als een nummer wordt opgegeven, wordt vertraging toegepast op zowel verbergen/weergeven

Objectstructuur is:delay: { show: 500, hide: 100 }

container tekenreeks | vals vals

Voegt de knopinfo toe aan een specifiek elementcontainer: 'body'

Kop op! Opties voor individuele tooltips kunnen ook worden gespecificeerd door het gebruik van data-attributen.

Markup

  1. <a href = "#" data-toggle = "tooltip" title = "first tooltip" > beweeg over mij </a>

Methoden:

$().tooltip(opties)

Koppelt een tooltip-handler aan een elementverzameling.

.tooltip('toon')

Onthult de tooltip van een element.

  1. $ ( '#element' ). knopinfo ( 'toon' )

.tooltip('verbergen')

Verbergt de knopinfo van een element.

  1. $ ( '#element' ). knopinfo ( 'verbergen' )

.tooltip('toggle')

Schakelt de knopinfo van een element in.

  1. $ ( '#element' ). knopinfo ( 'toggle' )

.tooltip('vernietigen')

Verbergt en vernietigt de tooltip van een element.

  1. $ ( '#element' ). knopinfo ( 'vernietigen' )

Voorbeelden

Voeg kleine overlays van inhoud, zoals die op de iPad, toe aan elk element voor het huisvesten van secundaire informatie. Beweeg over de knop om de popover te activeren. Vereist Tooltip om te worden opgenomen.

Statische popover

Er zijn vier opties beschikbaar: boven, rechts, onder en links uitgelijnd.

Popover-top

Sed posuere consectetur est bij lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover rechts

Sed posuere consectetur est bij lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover onderkant

Sed posuere consectetur est bij lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover links

Sed posuere consectetur est bij lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Er wordt geen opmaak weergegeven omdat popovers worden gegenereerd op basis van JavaScript en inhoud binnen een dataattribuut.

Live demonstratie

Vier richtingen


Gebruik

Popovers inschakelen via JavaScript:

  1. $ ( '#voorbeeld' ). popover ( opties )

Opties

Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-, zoals in data-animation="".

Naam type standaard Omschrijving
animatie booleaans WAAR pas een css fade-overgang toe op de tooltip
html booleaans vals Voeg html in de popover in. Indien onwaar, wordt de textmethode van jQuery gebruikt om inhoud in de dom in te voegen. Gebruik sms als je je zorgen maakt over XSS-aanvallen.
plaatsing tekenreeks | functie 'Rechtsaf' hoe de popover te plaatsen - top | onderaan | links | Rechtsaf
selector snaar vals als er een selector is, worden knopinfo-objecten gedelegeerd aan de opgegeven doelen
trekker snaar 'Klik' hoe popover wordt geactiveerd - klik op | zweven | focus | handleiding
titel tekenreeks | functie '' standaard titelwaarde als het kenmerk 'titel' niet aanwezig is
inhoud tekenreeks | functie '' standaard inhoudswaarde als het kenmerk 'data-content' niet aanwezig is
vertraging nummer | object 0

vertraging bij het tonen en verbergen van de popover (ms) - is niet van toepassing op het handmatige triggertype

Als een nummer wordt opgegeven, wordt vertraging toegepast op zowel verbergen/weergeven

Objectstructuur is:delay: { show: 500, hide: 100 }

container tekenreeks | vals vals

Voegt de popover toe aan een specifiek elementcontainer: 'body'

Kop op! Opties voor individuele popovers kunnen ook worden gespecificeerd door het gebruik van data-attributen.

Markup

Om prestatieredenen zijn de Tooltip en Popover data-api's aangemeld. Als u ze wilt gebruiken, geeft u gewoon een selectoroptie op.

Methoden:

$().popover(opties)

Initialiseert popovers voor een elementverzameling.

.popover('toon')

Onthult een pop-over voor elementen.

  1. $ ( '#element' ). popover ( 'toon' )

.popover('verbergen')

Verbergt een pop-over voor elementen.

  1. $ ( '#element' ). popover ( 'verbergen' )

.popover('toggle')

Schakelt een pop-over voor elementen in.

  1. $ ( '#element' ). popover ( 'toggle' )

.popover('vernietigen')

Verbergt en vernietigt de popover van een element.

  1. $ ( '#element' ). popover ( 'vernietigen' )

Voorbeeldwaarschuwingen

Voeg afwijzingsfunctionaliteit toe aan alle waarschuwingsberichten met deze plug-in.

Heilige guacamole! U kunt het beste zelf controleren, u ziet er niet al te best uit.

Oh nee! Je hebt een fout!

Verander dit en dat en probeer het opnieuw. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Voer deze actie uit Of doe dit


Gebruik

Afwijzing van een waarschuwing via JavaScript inschakelen:

  1. $ ( ".waarschuwing" ). waarschuwing ()

Markup

Voeg gewoon toe data-dismiss="alert"aan uw sluitknop om automatisch een waarschuwingsfunctie voor sluiten te geven.

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

Methoden:

$().waarschuwing()

Omhult alle waarschuwingen met sluitfunctionaliteit. Om ervoor te zorgen dat uw waarschuwingen worden geanimeerd wanneer ze zijn gesloten, moet u ervoor zorgen dat de klasse .fadeen .inal op hen is toegepast.

.alert('sluiten')

Sluit een waarschuwing.

  1. $ ( ".waarschuwing" ). waarschuwing ( 'sluiten' )

Evenementen

De waarschuwingsklasse van Bootstrap onthult een paar gebeurtenissen voor het aansluiten op de waarschuwingsfunctionaliteit.

Evenement Beschrijving
dichtbij Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de closeinstantiemethode wordt aangeroepen.
gesloten Deze gebeurtenis wordt geactiveerd wanneer de waarschuwing is gesloten (wacht tot de CSS-overgangen zijn voltooid).
  1. $ ( '#mijn-waarschuwing' ). bind ( 'gesloten' , functie () {
  2. // doe iets…
  3. })

Voorbeeldgebruik

Doe meer met knoppen. Beheer knopstatussen of maak groepen knoppen voor meer componenten zoals werkbalken.

Stateful

Toevoegen data-loading-text="Loading..."om een ​​laadstatus op een knop te gebruiken.

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Bezig met laden..." > Laadstatus </button>

Enkele schakelaar

Toevoegen data-toggle="button"om schakelen op een enkele knop te activeren.

  1. <button type = "button" class = "btn btn-primary" data-toggle = "button" > Enkele schakelaar </button>

Selectievakje

Toevoegen data-toggle="buttons-checkbox"voor het omschakelen van selectievakjes naar btn-group.

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > Links </button>
  3. <button type = "button" class = "btn btn-primary" > Midden </button>
  4. <button type = "button" class = "btn btn-primary" > Rechts </button>
  5. </div>

Radio

Toevoegen data-toggle="buttons-radio"voor omschakelen van radiostijl op btn-group.

  1. <div class = "btn-group" data-toggle = "buttons-radio" >
  2. <button type = "button" class = "btn btn-primary" > Links </button>
  3. <button type = "button" class = "btn btn-primary" > Midden </button>
  4. <button type = "button" class = "btn btn-primary" > Rechts </button>
  5. </div>

Gebruik

Knoppen inschakelen via JavaScript:

  1. $ ( '.nav-tabbladen' ). knop ()

Markup

Gegevensattributen zijn een integraal onderdeel van de plug-in voor knoppen. Bekijk de voorbeeldcode hieronder voor de verschillende opmaaktypen.

Opties

Geen

Methoden:

$().button('toggle')

Schakelt de push-status in. Geeft de knop de indruk dat deze is geactiveerd.

Kop op! U kunt automatisch wisselen van een knop inschakelen door het data-toggleattribuut te gebruiken.
  1. <button type = "button" class = "btn" data-toggle = "button" > </button>

$().button('bezig met laden')

Stelt knopstatus in op laden - schakelt knop uit en wisselt tekst naar laadtekst. Laadtekst moet worden gedefinieerd op het knopelement met behulp van het data-attribuut data-loading-text.

  1. <button type = "button" class = "btn" data-loading-text = "dingen laden..." > ... </button>
Kop op! Firefox behoudt de uitgeschakelde status bij het laden van pagina's . Een oplossing hiervoor is het gebruik van autocomplete="off".

$().button('reset')

Reset knopstatus - wisselt tekst naar originele tekst.

$().knop(tekenreeks)

Stelt de knopstatus opnieuw in - verwisselt tekst naar een door gegevens gedefinieerde tekststatus.

  1. <knop type = "button" class = "btn" data-complete-text = "voltooid!" > ... </knop>
  2. <script>
  3. $ ( '.btn' ). knop ( 'voltooid' )
  4. </script>

Over

Krijg basisstijlen en flexibele ondersteuning voor opvouwbare componenten zoals accordeons en navigatie.

* Vereist dat de plug-in Transitions is opgenomen.

Voorbeeld accordeon

Met behulp van de inklapplug-in hebben we een eenvoudige widget in accordeonstijl gebouwd:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Foodtruck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua zet er een vogel op inktvis single-origin koffie nulla veronderstelnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan behalve slager vice lomo. Leggings voor ambachtelijk bier van boer tot bord, ruwe denim esthetische synth nesciunt je hebt er waarschijnlijk nog nooit van gehoord accusamus labore duurzame VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Foodtruck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua zet er een vogel op inktvis single-origin koffie nulla veronderstelnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan behalve slager vice lomo. Leggings voor ambachtelijk bier van boer tot bord, ruwe denim esthetische synth nesciunt je hebt er waarschijnlijk nog nooit van gehoord accusamus labore duurzame VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Foodtruck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua zet er een vogel op inktvis single-origin koffie nulla veronderstelnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan behalve slager vice lomo. Leggings voor ambachtelijk bier van boer tot bord, ruwe denim esthetische synth nesciunt je hebt er waarschijnlijk nog nooit van gehoord accusamus labore duurzame VHS.
  1. <div class = "accordeon" id = "accordeon2" >
  2. <div klasse = "accordeon-groep" >
  3. <div klasse = "accordeon-heading" >
  4. <a class = "accordeon-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. Opvouwbaar groepsitem #1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "accordeon-body ineenstorting in" >
  9. <div klasse = "accordeon-inner" >
  10. Anim pariatur cliché...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "accordeon-groep" >
  15. <div class = "accordeon-heading" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. Opvouwbaar groepsitem #2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "accordeon-body ineenstorting" >
  21. <div class = "accordeon-inner" >
  22. Anim pariatur cliché...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

U kunt de plug-in ook gebruiken zonder de accordeon-opmaak. Maak een knop om het uitvouwen en samenvouwen van een ander element te wisselen.

  1. <button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. eenvoudig opvouwbaar
  3. </knop>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>

Gebruik

Via gegevensattributen

Voeg gewoon data-toggle="collapse"en een data-targetaan element toe om automatisch de besturing van een opvouwbaar element toe te wijzen. Het data-targetattribuut accepteert een CSS-selector om het samenvouwen op toe te passen. Zorg ervoor dat u de klasse toevoegt collapseaan het opvouwbare element. Als u wilt dat deze standaard wordt geopend, voegt u de extra klasse toe in.

Om accordeonachtig groepsbeheer toe te voegen aan een opvouwbaar besturingselement, voegt u het data-attribuut toe data-parent="#selector". Raadpleeg de demo om dit in actie te zien.

Via JavaScript

Handmatig inschakelen met:

  1. $ ( ".collapse" ). instorten ()

Opties

Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-, zoals in data-parent="".

Naam type standaard Omschrijving
ouder selector vals Indien selector dan worden alle samenvouwbare elementen onder de gespecificeerde ouder gesloten wanneer dit samenvouwbare item wordt getoond. (vergelijkbaar met traditioneel accordeongedrag)
schakelaar booleaans WAAR Schakelt het opvouwbare element in bij aanroepen

Methoden:

.collapse (opties)

Activeert uw inhoud als een opvouwbaar element. Accepteert een optionele optie object.

  1. $ ( '#mijnInklapbaar' ). instorten ({
  2. toggle : false
  3. })

.collapse('toggle')

Schakelt een samenvouwbaar element om naar weergegeven of verborgen.

.collapse('toon')

Toont een opvouwbaar element.

.collapse('hide')

Verbergt een opvouwbaar element.

Evenementen

De collapsklasse van Bootstrap onthult een paar gebeurtenissen voor het aansluiten op de ineenstortingsfunctionaliteit.

Evenement Beschrijving
show Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de showinstantiemethode wordt aangeroepen.
getoond Deze gebeurtenis wordt geactiveerd wanneer een samenvouwelement zichtbaar is gemaakt voor de gebruiker (wacht tot css-overgangen zijn voltooid).
verbergen Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de hidemethode is aangeroepen.
verborgen Deze gebeurtenis wordt geactiveerd wanneer een samengevouwen element is verborgen voor de gebruiker (wacht tot de css-overgangen zijn voltooid).
  1. $ ( '#mijnInklapbaar' ). aan ( 'verborgen' , functie () {
  2. // doe iets…
  3. })

Example

A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.

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

You'll want to set autocomplete="off" to prevent default browser menus from appearing over the Bootstrap typeahead dropdown.


Usage

Via data attributes

Add data attributes to register an element with typeahead functionality as shown in the example above.

Via JavaScript

Call the typeahead manually with:

  1. $('.typeahead').typeahead()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-source="".

Name type default description
source array, function [ ] The data source to query against. May be an array of strings or a function. The function is passed two arguments, the query value in the input field and the process callback. The function may be used synchronously by returning the data source directly or asynchronously via the process callback's single argument.
items number 8 The max number of items to display in the dropdown.
minLength number 1 The minimum character length needed before triggering autocomplete suggestions
matcher function case insensitive The method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Access the current query with this.query. Return a boolean true if query is a match.
sorter function exact match,
case sensitive,
case insensitive
Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query.
updater function returns selected item The method used to return selected item. Accepts a single argument, the item and has the scope of the typeahead instance.
highlighter function highlights all default matches Method used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html.

Methods

.typeahead(options)

Initializes an input with a typeahead.

Example

The subnavigation on the left is a live demo of the affix plugin.


Usage

Via data attributes

To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.

  1. <div data-spy="affix" data-offset-top="200">...</div>
Heads up! You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by affix, affix-top, and affix-bottom. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.

Via JavaScript

Call the affix plugin via JavaScript:

  1. $('#navbar').affix()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".

Name type default description
offset number | function | object 10 Pixels die van het scherm moeten worden verschoven bij het berekenen van de scrollpositie. Als een enkel nummer wordt opgegeven, wordt de offset zowel in de boven- als in de linkerrichting toegepast. Om te luisteren naar een enkele richting of meerdere unieke offsets, geeft u gewoon een object op offset: { x: 10 }. Gebruik een functie wanneer u dynamisch een offset moet geven (handig voor sommige responsieve ontwerpen).