Over modaliteiten

Een gestroomlijnde, maar flexibele versie van de traditionele modale javascript-plug-in met alleen de minimaal vereiste functionaliteit en slimme standaardinstellingen.

Statisch voorbeeld

Hieronder is een statisch weergegeven modaal.

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.

Bootstrap-modal gebruiken

Bel de modal via javascript:

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

Opties

Markup

U kunt eenvoudig modals op uw pagina activeren zonder een enkele regel javascript te hoeven schrijven. Stel gewoon data-toggle="modal"een controllerelement in met een data-target="#foo"of href="#foo"die overeenkomt met een modaal element-ID, en wanneer erop wordt geklikt, wordt uw modal gestart.

Om opties toe te voegen aan uw modale instantie, voegt u ze ook toe als extra gegevensattributen op het besturingselement of de modale opmaak zelf.

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

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3> Modale kop </h3>
  </div>
  <div class = "modal-body" > 
    <p> Een fijn lichaam… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Sluiten </a>   
    <a href = "#" class = "btn btn-primary" > Wijzigingen opslaan </a>  
  </div>
</div>

Methoden:

.modaal(opties)

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

$ ( '#myModal' ). modaal ({
  toetsenbord : false 
})

.modal('toggle')

Schakelt handmatig een modaal in.

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

.modal('toon')

Opent handmatig een modaal.

$ ( '#myModal' ). modaal ( 'toon' )

.modal('verbergen')

Verbergt handmatig een modaal.

$ ( '#myModal' ). modaal ( 'verbergen' )

Evenementen

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

$ ( '#myModal' ). aan ( 'verborgen' , functie () {   
  // doe iets…
})

Over vervolgkeuzelijsten

Voeg vervolgkeuzemenu's toe aan bijna alles in Bootstrap met deze eenvoudige plug-in. Bootstrap biedt volledige ondersteuning voor vervolgkeuzemenu's in de navigatiebalk, tabbladen en pillen.

Voorbeelden

Klik op de vervolgkeuzelijsten in de navigatiebalk en pillen hieronder om de vervolgkeuzelijsten te testen.

• Reguliere link
• Laten vallen
  • Action
  • Another action
  • Something else here
  • Separated link
• Vervolgkeuzelijst 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Vervolgkeuzelijst 3
  • Action
  • Another action
  • Something else here
  • Separated link

Bootstrap-dropdown.js gebruiken

Bel de dropdowns via javascript:

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

Markup

Om snel dropdown-functionaliteit aan elk element toe te voegen, hoeft u alleen maar toe te voegen data-toggle="dropdown"en elke geldige bootstrap-dropdown wordt automatisch geactiveerd.

<ul class = "nav nav-pillen" > 
  <li class = "actief" ><a href = "#" > Reguliere link </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Laten vallen
      <b class = "caret" ></b> 
    </a>
    <ul class = "vervolgkeuzemenu" > 
      <li><a href = "#" > Actie </a></li> 
      <li><a href = "#" > Nog een actie </a></li> 
      <li><a href = "#" > Hier nog iets </a></li> 
      <li class = "verdeler" ></li> 
      <li><a href = "#" > Aparte link </a></li> 
    </ul>
  </li>
  ...
</ul>

Om URL's intact te houden, gebruikt u het data-targetkenmerk in plaats van href="#".

<ul class = "nav nav-pillen" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Laten vallen
      <b class = "caret" ></b> 
    </a>
    <ul class = "vervolgkeuzemenu" > 
      ...
    </ul>
  </li>
</ul>

Methoden:

$().dropdown()

Een programmatische api voor het activeren van menu's voor een bepaalde navigatiebalk of navigatie met tabbladen.

De ScrollSpy-plug-in is bedoeld voor het automatisch bijwerken van navigatiedoelen op basis van de schuifpositie.

Voorbeeld navigatiebalk met scrollspy

Scroll door het gebied hieronder en bekijk de navigatie-update. De dropdown-subitems worden ook gemarkeerd. Probeer het!

Bootstrap-scrollspy.js gebruiken

Bel de scrollspy via javascript:

$ ( '#navigatiebalk' ). scrollspion ()

Markup

Om eenvoudig scrollspy-gedrag toe te voegen aan uw navigatie op de bovenste balk, voegt u gewoon toe data-spy="scroll"aan het element dat u wilt bespioneren (meestal is dit de body).

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

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:

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

Opties

Evenementen

Deze plug-in voegt snelle, dynamische tab- en pilfunctionaliteit toe voor het overstappen door lokale inhoud.

Voorbeeldtabbladen

Klik op de onderstaande tabbladen om te schakelen tussen verborgen vensters, zelfs via vervolgkeuzemenu's.

• Huis
• Profiel
• Laten vallen
  • @fat
  • @mdo

Bootstrap-tab.js gebruiken

Tabbladen inschakelen via javascript (elk tabblad moet afzonderlijk worden geactiveerd):

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

U kunt afzonderlijke tabbladen op verschillende manieren activeren:

$ ( '#myTab a[href="#profile"]' ). tabblad ( 'toon' ); // Selecteer tabblad op naam 
$ ( '#mijnTab a:eerste' ). tabblad ( 'toon' ); // Selecteer eerste tabblad 
$ ( '#mijnTab a:laatste' ). tabblad ( 'toon' ); // Selecteer laatste tabblad 
$ ( '#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

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Startpagina </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profiel </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Berichten </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Instellingen </a></li>  
</ul>

Methoden:

$().tab

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

<ul class = "nav nav-tabs" id = "mijnTab" >  
  <li class = "active" ><a href = "#home" > Home </a></li>  
  <li><a href = "#profile" > Profiel </a></li> 
  <li><a href = "#messages" > Berichten </a></li> 
  <li><a href = "#settings" > Instellingen </a></li> 
</ul>
 
<div class = "tab-inhoud" > 
  <div class = "tabvenster actief" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-paneel" id = "berichten" > ... </div>  
  <div class = "tab-paneel" id = "instellingen" > ... </div>  
</div>
 
<script>
  $ ( functie () {  
    $ ( '#mijnTab a:laatste' ). tabblad ( 'toon' );
  })
</script>

Evenementen

$ ( 'a[data-toggle="tab"]' ). aan ( 'getoond' , functie ( e ) {   
  e . doel // geactiveerd tabblad
  e . gerelateerdTarget // vorig tabblad
})

Over knopinfo

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 data-attributen voor lokale titelopslag.

Voorbeeld gebruik van Tooltips

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

Bootstrap-tooltip.js gebruiken

Activeer de tooltip via javascript:

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

Opties

Markup

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

<a href = "#" rel = "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.

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

.tooltip('verbergen')

Verbergt de knopinfo van een element.

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

.tooltip('toggle')

Schakelt de knopinfo van een element in.

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

Over popovers

Voeg kleine overlays van inhoud, zoals die op de iPad, toe aan elk element voor het huisvesten van secundaire informatie.

* Vereist Tooltip om te worden opgenomen

Voorbeeld hover popover

Beweeg over de knop om de popover te activeren.

Bootstrap-popover.js gebruiken

Popovers inschakelen via javascript:

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

Opties

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.

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

.popover('verbergen')

Verbergt een pop-over voor elementen.

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

.popover('toggle')

Schakelt een pop-over voor elementen in.

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

Over meldingen

De alert-plug-in is een kleine klasse voor het toevoegen van close-functionaliteit aan waarschuwingen.

Voorbeeldwaarschuwingen

De plug-in voor waarschuwingen werkt op reguliere waarschuwingsberichten en blokkeert berichten.

Bootstrap-alert.js gebruiken

Afwijzing van een waarschuwing via javascript inschakelen:

$ ( ".waarschuwing" ). waarschuwing ()

Markup

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

<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.

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

Evenementen

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

$ ( '#mijn-waarschuwing' ). bind ( 'gesloten' , functie () {   
  // doe iets…
})

Over

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

Voorbeeldgebruik

Gebruik de plug-in voor knoppen voor statussen en schakelaars.

Bootstrap-button.js gebruiken

Knoppen inschakelen via javascript:

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

Markup

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

<!-- Voeg data-toggle="button" toe om het schakelen op een enkele knop te activeren -->
<button class = "btn" data-toggle = "button" > Enkele schakelaar </button>  
 
<!-- Voeg data-toggle="buttons-checkbox" toe voor het in- en uitschakelen van de checkbox-stijl op btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Links </button> 
  <button class = "btn" > Midden </button> 
  <button class = "btn" > Rechts </button> 
</div>
 
<!-- Voeg data-toggle="buttons-radio" toe voor het omschakelen naar radiostijl op btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Links </button> 
  <button class = "btn" > Midden </button> 
  <button class = "btn" > Rechts </button> 
</div>

Methoden:

$().button('toggle')

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

<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.

<button class = "btn" data-loading-text = "dingen laden..." > ... </button>   

$().button('reset')

Reset knopstatus - wisselt tekst naar originele tekst.

$().knop(tekenreeks)

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

<button class = "btn" data-complete-text = "voltooid!" > ... </knop>   
<script>
  $ ( '.btn' ). knop ( 'voltooid' )
</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:

Bootstrap-collapse.js gebruiken

Inschakelen via javascript:

$ ( ".collapse" ). instorten ()

Opties

Markup

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.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  eenvoudig opvouwbaar
</knop>
 
<div id = "demo" class = "collapse in" > … </div>  

Methoden:

.collapse (opties)

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

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

.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.

$ ( '#mijnInklapbaar' ). aan ( 'verborgen' , functie () {   
  // doe iets…
})

Over

Een generieke plug-in om door elementen te fietsen. Een draaimolen.

Voorbeeld carrousel

Bekijk de diavoorstelling hieronder.

Eerste miniatuurlabel

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

Tweede miniatuurlabel

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

Derde miniatuurlabel

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

ik ›

Bootstrap-carousel.js gebruiken

Bel via javascript:

$ ( '.carrousel' ). carrousel ()

Opties

Markup

Gegevensattributen worden gebruikt voor de vorige en volgende controles. Bekijk de voorbeeldopmaak hieronder.

<div id = "myCarousel" class = "carrouseldia" >  
  <!-- Carrouselitems -->
  <div class = "carrousel-innerlijke" > 
    <div class = "actief item" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carrouselnavigatie -->
  <a class = "carrousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Methoden:

.carrousel(opties)

Initialiseert de carrousel met optionele opties objecten begint door items te bladeren.

$ ( '.carrousel' ). carrousel ({
  interval : 2000 
})

.carrousel('cyclus')

Doorloopt de carrouselitems van links naar rechts.

.carrousel('pauze')

Voorkomt dat de carrousel door items fietst.

.carrousel(nummer)

Fietst de carrousel naar een bepaald frame (gebaseerd op 0, vergelijkbaar met een array).

.carrousel('vorige')

Hiermee gaat u naar het vorige item.

.carrousel('volgende')

Gaat naar het volgende item.

Evenementen

De carrouselklasse van Bootstrap onthult twee gebeurtenissen voor het aansluiten op carrouselfunctionaliteit.

Over

Een eenvoudige, gemakkelijk uitgebreide plug-in voor het snel maken van elegante typeaheads met tekstinvoer in elke vorm.

Voorbeeld

Begin met typen in het onderstaande veld om de typeahead-resultaten weer te geven.

Bootstrap-typeahead.js gebruiken

Bel het typeahead via javascript:

$ ( '.typeahead' ). vooruit typen ()

Opties

Markup

Voeg gegevensattributen toe om een ​​element met typeahead-functionaliteit te registreren.

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

Methoden:

.typeahead(opties)

Initialiseert een invoer met een typeahead.