Indywidualne lub skompilowane

Wtyczki mogą być dołączane pojedynczo (chociaż niektóre mają wymagane zależności) lub wszystkie naraz. Zarówno bootstrap.js , jak i bootstrap.min.js zawierają wszystkie wtyczki w jednym pliku.

Atrybuty danych

Możesz używać wszystkich wtyczek Bootstrap wyłącznie poprzez API znaczników bez pisania ani jednej linii kodu JavaScript. Jest to interfejs API pierwszej klasy Bootstrap i powinien być Twoim pierwszym wyborem podczas korzystania z wtyczki.

To powiedziawszy, w niektórych sytuacjach może być pożądane wyłączenie tej funkcji. W związku z tym zapewniamy również możliwość wyłączenia API atrybutów danych poprzez rozłączenie wszystkich zdarzeń w ciele, które znajdują się w przestrzeni nazw za pomocą `'data-api'`. Wygląda to tak:

$ ( 'ciało' ). wyłączone ( '.data-api' )

Alternatywnie, aby kierować reklamy na konkretną wtyczkę, po prostu uwzględnij nazwę wtyczki jako przestrzeń nazw wraz z przestrzenią nazw data-api w następujący sposób:

$ ( 'ciało' ). wyłączone ( '.alert.data-api' )

Programowy interfejs API

Uważamy również, że powinieneś być w stanie korzystać ze wszystkich wtyczek Bootstrap wyłącznie poprzez API JavaScript. Wszystkie publiczne interfejsy API są pojedynczymi metodami, które można łączyć w łańcuchy, i zwracają kolekcję, na której wykonano działanie.

$ ( ".btn.niebezpieczeństwo" ). przycisk ( "przełącz" ). addClass ( "gruby" )

Wszystkie metody powinny akceptować opcjonalny obiekt opcji, ciąg znaków, który jest skierowany do konkretnej metody lub nic (co inicjuje wtyczkę z zachowaniem domyślnym):

$ ( "#myModal" ). modalne () // zainicjowane z domyślnymi                       
$ ( "#myModal" ). modalny ({ keyboard : false }) // zainicjowany bez klawiatury     
$ ( "#myModal" ). modal ( 'show' ) // inicjuje i natychmiast wywołuje show                

Każda wtyczka udostępnia również swój surowy konstruktor we właściwości `Constructor`: $.fn.popover.Constructor. Jeśli chcesz pobrać konkretną instancję wtyczki, pobierz ją bezpośrednio z elementu: $('[rel=popover]').data('popover').

Brak konfliktu

Czasami konieczne jest użycie wtyczek Bootstrap z innymi frameworkami UI. W takich okolicznościach czasami mogą wystąpić kolizje przestrzeni nazw. Jeśli tak się stanie, możesz wywołać .noConflictwtyczkę, której wartość chcesz przywrócić.

var bootstrapButton = $ . fn . przycisk . noConflict () // powrót $.fn.button do wcześniej przypisanej wartości 
$ . fn . bootstrapBtn = bootstrapButton             // daj $().bootstrapBtn funkcję ładowania początkowego

Wydarzenia

Bootstrap zapewnia niestandardowe zdarzenia dla większości unikalnych akcji wtyczki. Ogólnie rzecz biorąc, mają one formę bezokolicznika i imiesłowu przeszłego - gdzie bezokolicznik (np. show) jest wyzwalany na początku zdarzenia, a jego forma imiesłowu przeszłego (np. shown) jest wyzwalana po zakończeniu działania.

Wszystkie zdarzenia bezokolicznikowe zapewniają funkcjonalność PreventDefault. Daje to możliwość zatrzymania wykonywania akcji przed jej rozpoczęciem.

$ ( '#mójModalny' ). on ( 'pokaż' , funkcja ( e ) {   
    if (! dane ) zwróć e . PreventDefault () // zatrzymuje wyświetlanie modalne   
})

O przejściach

Aby uzyskać proste efekty przejścia, dołącz plik bootstrap-transition.js razem z innymi plikami JS. Jeśli używasz skompilowanego (lub zminimalizowanego) pliku bootstrap.js , nie ma potrzeby dołączania tego — już tam jest.

Przypadków użycia

Kilka przykładów wtyczki przejścia:

• Przesuwanie się lub blaknięcie w modach
• Zanikanie zakładek
• Wygaszanie alertów
• Przesuwne szyby karuzelowe

Przykłady

Modals to uproszczone, ale elastyczne monity dialogowe z minimalną wymaganą funkcjonalnością i inteligentnymi ustawieniami domyślnymi.

Przykład statyczny

Renderowany modalny z nagłówkiem, treścią i zestawem akcji w stopce.

<div class = "modalne ukrywanie zanikania" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3> Nagłówek modalny </h3>
  </div>
  <div class = "modal-body" > 
    <p> Jedno piękne ciało… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn"> Zamknij </a> _  
    <a href = "#" class = "btn btn-primary"> Zapisz zmiany </a>  
  </div>
</div>

Demo na żywo

Przełącz modalny za pomocą JavaScript, klikając poniższy przycisk. Zsunie się i zniknie od góry strony.

<!-- Przycisk wyzwalający modalne -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal"> Uruchom tryb demonstracyjny </a>    
 
<!-- Modalne -->
<div id = "myModal" class = "modalne ukrywanie zanikania" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    <button type = „button” class = „close” data-dismiss = „modal” aria-hidden = „true” > × </button>    
    <h3 id = "myModalLabel" > Modalny nagłówek </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Jedno piękne ciało… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Zamknij </button>   
    <button class = "btn btn-primary" > Zapisz zmiany </button> 
  </div>
</div>

Stosowanie

Poprzez atrybuty danych

Aktywuj modalny bez pisania JavaScript. Ustaw data-toggle="modal"na elemencie kontrolera, takim jak przycisk, wraz z data-target="#foo"lub href="#foo", aby wskazać określony mod do przełączania.

<button type = "button" data-toggle = "modalny" data-target = "#myModal" > Uruchom modalne </button>   

Przez JavaScript

Wywołaj modalne z id myModalz pojedynczą linią JavaScript:

$ ( '#mójModalny' ). modalne ( opcje )

Opcje

Opcje można przekazywać za pomocą atrybutów danych lub kodu JavaScript. W przypadku atrybutów danych dołącz nazwę opcji do data-, jak w data-backdrop="".

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

Metody

.modal(opcje)

Aktywuje treść jako modalną. Akceptuje opcjonalne opcje object.

$ ( '#mójModalny' ). modalny ({
  klawiatura : fałsz 
})

.modal('przełącz')

Ręcznie przełącza modalny.

$ ( '#mójModalny' ). modalny ( 'przełącz' )

.modal('pokaż')

Ręcznie otwiera modalne.

$ ( '#mójModalny' ). modalne ( 'pokaż' )

.modal('ukryj')

Ręcznie ukrywa modalny.

$ ( '#mójModalny' ). modalne ( 'ukryj' )

Wydarzenia

Klasa modalna Bootstrap udostępnia kilka zdarzeń do podłączenia do funkcji modalnej.

$ ( '#mójModalny' ). on ( 'ukryty' , funkcja () {   
  // Zrób coś…
})

Przykłady

Dodaj menu rozwijane do prawie wszystkiego za pomocą tej prostej wtyczki, w tym paska nawigacyjnego, kart i pigułek.

W pasku nawigacyjnym

W zakładkach

Stosowanie

Poprzez atrybuty danych

Dodaj data-toggle="dropdown"do linku lub przycisku, aby przełączyć listę rozwijaną.

<div class = "dropdown" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#"> Reguła rozwijania </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Aby zachować nienaruszone adresy URL, użyj data-targetatrybutu zamiast href="#".

<div class = "dropdown" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html"> >      
    Upuścić
    <b klasa = "karetka" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Przez JavaScript

Wywołaj listy rozwijane za pomocą JavaScript:

$ ( '.dropdown-toggle' ). menu rozwijane ()

Opcje

Nic

Metody

$().dropdown('przełącz')

Programowe API do przełączania menu dla danego paska nawigacyjnego lub nawigacji w kartach.

Przykład w pasku nawigacyjnym

Wtyczka ScrollSpy służy do automatycznej aktualizacji celów nawigacji na podstawie pozycji przewijania. Przewiń obszar poniżej paska nawigacyjnego i obserwuj aktywną zmianę klasy. Podpunkty rozwijane również zostaną podświetlone.

Stosowanie

Poprzez atrybuty danych

Aby łatwo dodać zachowanie scrollspy do nawigacji w górnym pasku, po prostu dodaj data-spy="scroll"do elementu, który chcesz szpiegować (najczęściej jest to treść) i data-target=".navbar"wybierz nawigację, której chcesz użyć. Będziesz chciał użyć scrollspy z .navkomponentem.

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

Przez JavaScript

Wywołaj scrollspy przez JavaScript:

$ ( '#pasek nawigacyjny' ). scrollszpieg ()

Metody

.scrollspy('odśwież')

Używając scrollspy w połączeniu z dodawaniem lub usuwaniem elementów z DOM, musisz wywołać metodę refresh w następujący sposób:

$ ( '[data-spy="scroll"]' ). każdy ( funkcja () {  
  var $szpieg = $ ( to ). scrollspy ( 'odśwież' )
});

Opcje

Opcje można przekazywać za pomocą atrybutów danych lub kodu JavaScript. W przypadku atrybutów danych dołącz nazwę opcji do data-, jak w data-offset="".

Wydarzenia

Przykładowe zakładki

Dodaj szybką, dynamiczną funkcję kart, aby przechodzić przez panele zawartości lokalnej, nawet za pomocą menu rozwijanych.

Stosowanie

Włącz karty z zakładkami za pomocą JavaScript (każda karta musi być aktywowana osobno):

$ ( '#myTab a' ). kliknij ( funkcja ( e ) {  
  mi . zapobiecDefault ();
  $ ( to ). zakładka ( 'pokaż' );
})

Poszczególne zakładki możesz aktywować na kilka sposobów:

$ ( '#myTab a[href="#profile"]' ). zakładka ( 'pokaż' ); // Wybierz kartę według nazwy 
$ ( '#myTab a:pierwszy' ). zakładka ( 'pokaż' ); // Wybierz pierwszą kartę 
$ ( '#myTab a:ostatni' ). zakładka ( 'pokaż' ); // Wybierz ostatnią kartę 
$ ( '#myTab li:eq(2) a' ). zakładka ( 'pokaż' ); // Wybierz trzecią kartę (0-indeksowana) 

Narzut

Możesz aktywować nawigację po karcie lub pigułce bez pisania kodu JavaScript, po prostu określając data-toggle="tab"lub data-toggle="pill"na elemencie. Dodanie klas navi nav-tabsdo zakładki ulspowoduje zastosowanie stylu zakładki Bootstrap.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab"> Strona główna </a> </li>  
  <li><a href = "#profile" data-toggle = "tab"> Profil </a></li >  
  <li><a href = "#messages" data-toggle = "tab"> Wiadomości </a></li >  
  <li><a href = "#settings" data-toggle = "tab"> Ustawienia </a></li >  
</ul>

Metody

$().tab

Aktywuje element tab i kontener treści. Karta powinna mieć węzeł kontenera data-targetlub docelowy w DOM.href

<ul class = „nav nav-tabs” id = „myTab” >  
  <li class = "active" ><a href = "#home"> Strona główna </a> </li>  
  <li><a href = "#profile"> Profil </a> </li> 
  <li><a href = "#messages"> Wiadomości </a> </li> 
  <li><a href = "#settings"> Ustawienia </a> </li> 
</ul>
 
<div class = "zawartość karty" > 
  <div class = „aktywne okienko kart” id = „home” > ... </div>  
  <div class = „tab-pane” id = „profil” > ... </div>  
  <div class = „tab-pane” id = „wiadomości” > ... </div>  
  <div class = "tab-pane" id = "ustawienia" > ... </div>  
</div>
 
<skrypt>
  $ ( funkcja () {  
    $ ( '#myTab a:ostatni' ). zakładka ( 'pokaż' );
  })
</script>

Wydarzenia

$ ( 'a[data-toggle="tab"]' ). on ( 'pokazano' , funkcja ( e ) {   
  mi . cel // aktywowana karta
  mi . relatedTarget // poprzednia karta
})

Przykłady

Zainspirowany doskonałą wtyczką jQuery.tipsy napisaną przez Jasona Frame; Etykietki narzędzi to zaktualizowana wersja, która nie opiera się na obrazach, używa CSS3 do animacji i atrybutów danych do lokalnego przechowywania tytułów.

Ze względu na wydajność etykietka narzędzi i interfejsy danych popover są włączone, co oznacza, że ​​musisz je zainicjować samodzielnie .

Najedź na poniższe linki, aby zobaczyć podpowiedzi:

Cztery kierunki

Podpowiedzi w grupach wejściowych

Używając podpowiedzi i okienek popover z grupami wejściowymi Bootstrap, musisz ustawić containeropcję (udokumentowaną poniżej), aby uniknąć niepożądanych efektów ubocznych.

Stosowanie

Uruchom podpowiedź za pomocą JavaScript:

$ ( '#przykład' ). podpowiedź ( opcje )

Opcje

Opcje można przekazywać za pomocą atrybutów danych lub kodu JavaScript. W przypadku atrybutów danych dołącz nazwę opcji do data-, jak w data-animation="".

Narzut

<a href = "#" data-toggle = "tooltip" title = "pierwszy tooltip"> najedź na mnie </a>   

Metody

$().tooltip(opcje)

Dołącza obsługę podpowiedzi do kolekcji elementów.

.tooltip('pokaż')

Odsłania opis elementu.

$ ( '#element' ). podpowiedź ( 'pokaż' )

.podpowiedź('ukryj')

Ukrywa podpowiedź elementu.

$ ( '#element' ). podpowiedź ( 'ukryj' )

.tooltip('przełącz')

Przełącza podpowiedź elementu.

$ ( '#element' ). podpowiedź ( 'przełącz' )

.tooltip('zniszcz')

Ukrywa i niszczy opis elementu.

$ ( '#element' ). podpowiedź ( 'zniszcz' )

Przykłady

Dodaj małe nakładki treści, takie jak te na iPadzie, do dowolnego elementu, aby pomieścić dodatkowe informacje. Najedź na przycisk, aby uruchomić popover. Wymaga dołączenia podpowiedzi .

Popover statyczny

Dostępne są cztery opcje: wyrównanie do góry, do prawej, do dołu i do lewej.

Żadne znaczniki wyświetlane jako popovery nie są generowane z JavaScript i treści w dataatrybucie.

Demo na żywo

Cztery kierunki

Stosowanie

Włącz popovery przez JavaScript:

$ ( '#przykład' ). popover ( opcje )

Opcje

Opcje można przekazywać za pomocą atrybutów danych lub kodu JavaScript. W przypadku atrybutów danych dołącz nazwę opcji do data-, jak w data-animation="".

Narzut

Ze względu na wydajność, Tooltip i Popover data-apis są włączone. Jeśli chcesz ich użyć, po prostu określ opcję selektora.

Metody

$().popover(opcje)

Inicjuje popovery dla kolekcji elementów.

.popover('pokaż')

Odsłania okienko z elementami.

$ ( '#element' ). popover ( 'pokaż' )

.popover('ukryj')

Ukrywa okienko z elementami.

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

.popover('przełącz')

Przełącza popover elementów.

$ ( '#element' ). popover ( 'przełącz' )

.popover('zniszcz')

Ukrywa i niszczy popover elementu.

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

Przykładowe alerty

Dodaj funkcję odrzucania do wszystkich komunikatów ostrzegawczych za pomocą tej wtyczki.

Stosowanie

Włącz odrzucanie alertu przez JavaScript:

$ ( ".alert" ). ostrzeżenie ()

Narzut

Po prostu dodaj data-dismiss="alert"do przycisku zamknięcia, aby automatycznie włączyć funkcję zamknięcia alertu.

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

Metody

$().alert()

Zawija wszystkie alerty z bliską funkcjonalnością. Aby Twoje alerty były animowane po zamknięciu, upewnij się, że mają już do nich przypisane klasy .fadei ..in

.alert('zamknij')

Zamyka alert.

$ ( ".alert" ). alert ( 'zamknij' )

Wydarzenia

Klasa alertu Bootstrap udostępnia kilka zdarzeń do podłączenia do funkcji alertów.

$ ( '#mój-alert' ). bind ( 'zamknięte' , funkcja () {   
  // Zrób coś…
})

Przykładowe zastosowania

Zrób więcej za pomocą przycisków. Kontroluj stany przycisków lub twórz grupy przycisków dla większej liczby komponentów, takich jak paski narzędzi.

Stanowy

Dodaj data-loading-text="Loading...", aby użyć stanu ładowania przycisku.

<button type = "button" class = "btn btn-primary" data-loading-text = "Ładowanie..." > Stan ładowania </button>   

Pojedynczy przełącznik

Dodaj data-toggle="button", aby aktywować przełączanie jednym przyciskiem.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Pojedynczy przełącznik </button>   

Pole wyboru

Dodaj data-toggle="buttons-checkbox"do przełączania stylu pola wyboru w grupie btn.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Lewo </button>  
  <button type = „button” class = „btn btn-primary” > Middle </button>  
  <button type = "button" class = "btn btn-primary" > Prawo </button>  
</div>

Radio

Dodaj data-toggle="buttons-radio"do przełączania stylu radia w grupie btn.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Lewo </button>  
  <button type = „button” class = „btn btn-primary” > Middle </button>  
  <button type = "button" class = "btn btn-primary" > Prawo </button>  
</div>

Stosowanie

Włącz przyciski przez JavaScript:

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

Narzut

Atrybuty danych są integralną częścią wtyczki przycisku. Sprawdź poniższy przykładowy kod dla różnych typów znaczników.

Opcje

Nic

Metody

$().button('przełącz')

Przełącza stan wypychania. Nadaje przyciskowi wygląd, w którym został aktywowany.

<button type = „button” class = „btn” data-toggle = „button” > … </button>    

$().button('ładowanie')

Ustawia stan przycisku na ładowanie - wyłącza przycisk i zamienia tekst na tekst wczytujący. Ładowanie tekstu należy zdefiniować na elemencie przycisku za pomocą atrybutu data data-loading-text.

<button type = "button" class = "btn" data-loading-text = "ładowanie rzeczy..." > ... </button>    

$().button('reset')

Resetuje stan przycisku — zamienia tekst na tekst oryginalny.

$().button(ciąg)

Resetuje stan przycisku — zamienia tekst na dowolny stan tekstowy zdefiniowany w danych.

<button type = "button" class = "btn" data-complete-text = "gotowe!" > ... </button>    
<skrypt>
  $ ( '.btn' ). przycisk ( 'zakończ' )
</script>

O

Uzyskaj podstawowe style i elastyczną obsługę składanych komponentów, takich jak akordeony i nawigacja.

* Wymaga dołączenia wtyczki Transitions.

Przykładowy akordeon

Korzystając z wtyczki zwijania, zbudowaliśmy prosty widżet w stylu akordeonu:

<div class = "accordion" id = "accordion2" >  
  <div class = "akordeon-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne"> >    
        Składany element grupowy nr 1
      </a>
    </div>
    <div id = "collapseOne" class = "zwinięcie ciała akordeonu" >  
      <div class = "akordeon-inner" > 
        Animowany frazes pariatur...
      </div>
    </div>
  </div>
  <div class = "akordeon-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Składany element grupowy nr 2
      </a>
    </div>
    <div id = "collapseTwo" class = "zwinięcie akordeonu" >  
      <div class = "akordeon-inner" > 
        Animowany frazes pariatur...
      </div>
    </div>
  </div>
</div>
...

Możesz także użyć wtyczki bez znaczników akordeonu. Stwórz przycisk, aby przełączać rozwijanie i zwijanie innego elementu.

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  prosty składany
</button>
 
<div id = „demo” class = „zwiń w” > … </div>  

Stosowanie

Poprzez atrybuty danych

Wystarczy dodać data-toggle="collapse"i data-targetdo elementu, aby automatycznie przypisać kontrolę nad zwijanym elementem. data-targetAtrybut akceptuje selektor css, do którego ma zostać zastosowane zwinięcie . Pamiętaj, aby dodać klasę collapsedo zwijanego elementu. Jeśli chcesz, aby była domyślnie otwarta, dodaj dodatkowe zajęcia in.

Aby dodać zarządzanie grupami w stylu akordeonu do zwijanej kontrolki, dodaj atrybut data data-parent="#selector". Zapoznaj się z demo, aby zobaczyć to w akcji.

Przez JavaScript

Włącz ręcznie za pomocą:

$ ( ".zwiń" ). zwiń ()

Opcje

Opcje można przekazywać za pomocą atrybutów danych lub kodu JavaScript. W przypadku atrybutów danych dołącz nazwę opcji do data-, jak w data-parent="".

Metody

.zwiń(opcje)

Aktywuje zawartość jako zwijany element. Akceptuje opcjonalne opcje object.

$ ( '#myCollapsible' ). zwiń ({
  przełącz : fałszywy 
})

.zwiń('przełącz')

Przełącza zwijany element na pokazany lub ukryty.

.zwiń('pokaż')

Pokazuje składany element.

.zwiń('ukryj')

Ukrywa składany element.

Wydarzenia

Klasa zwijania Bootstrap udostępnia kilka zdarzeń umożliwiających podłączenie do funkcji zwijania.

$ ( '#myCollapsible' ). on ( 'ukryty' , funkcja () {   
  // Zrób coś…
})

Przykładowa karuzela

Poniższy pokaz slajdów pokazuje ogólną wtyczkę i komponent do przechodzenia przez elementy, takie jak karuzela.

Pierwsza etykieta miniatury

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.

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

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.

ja ›

<div id = klasa „myCarousel” = „slajd karuzeli” >  
  <ol class = "wskaźniki karuzeli" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Elementy karuzeli -->
  <div class = "carousel-inner" > 
    <div class = „aktywny element” > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Nawigacja karuzeli -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev"> & lsaquo; </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next"> & rsaquo ; </a>   
</div>

Stosowanie

Poprzez atrybuty danych

Użyj atrybutów danych, aby łatwo kontrolować pozycję karuzeli. data-slideakceptuje słowa kluczowe prevlub next, co zmienia pozycję slajdu w stosunku do jego aktualnej pozycji. Możesz też użyć , data-slide-toaby przekazać nieprzetworzony indeks slajdu do karuzeli data-slide-to="2", która przeskakuje pozycję slajdu do określonego indeksu rozpoczynającego się od 0.

Przez JavaScript

Wywołaj karuzelę ręcznie za pomocą:

$ ( '.karuzela' ). karuzela ()

Opcje

Opcje można przekazywać za pomocą atrybutów danych lub JavaScriptz. W przypadku atrybutów danych dołącz nazwę opcji do data-, jak w data-interval="".

Metody

.karuzela(opcje)

Inicjuje karuzelę z opcjonalnymi opcjami objecti rozpoczyna przełączanie między elementami.

$ ( '.karuzela' ). karuzela ({
  interwał : 2000 
})

.karuzela('cykl')

Przechodzi przez elementy karuzeli od lewej do prawej.

.karuzela('pauza')

Zatrzymuje karuzelę przed przechodzeniem przez elementy.

.karuzela(liczba)

Przełącza karuzelę do określonej klatki (na podstawie 0, podobnie do tablicy).

.karuzela('poprzednia')

Przechodzi do poprzedniej pozycji.

.karuzela('następny')

Przechodzi do następnego elementu.

Wydarzenia

Klasa karuzeli Bootstrap udostępnia dwa zdarzenia do podłączenia do funkcji karuzeli.

Przykład

Podstawowa, łatwo rozszerzalna wtyczka do szybkiego tworzenia eleganckich krojów pisma z dowolnym wprowadzaniem tekstu w formularzu.

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

Będziesz chciał ustawić autocomplete="off", aby zapobiec wyświetlaniu domyślnych menu przeglądarki w menu rozwijanym Bootstrap.

Stosowanie

Poprzez atrybuty danych

Dodaj atrybuty danych, aby zarejestrować element z funkcją wyprzedzenia, jak pokazano w powyższym przykładzie.

Przez JavaScript

Wywołaj czcionkę ręcznie za pomocą:

$ ( '.typeahead' ). pisać z wyprzedzeniem ()

Opcje

Opcje można przekazywać za pomocą atrybutów danych lub kodu JavaScript. W przypadku atrybutów danych dołącz nazwę opcji do data-, jak w data-source="".

Metody

.typeahead(opcje)

Inicjuje dane wejściowe z wyprzedzeniem.

Przykład

Podnawigacja po lewej stronie to demo wtyczki afiksu na żywo.

Stosowanie

Poprzez atrybuty danych

Aby łatwo dodać zachowanie afiksu do dowolnego elementu, po prostu dodaj data-spy="affix"do elementu, który chcesz szpiegować. Następnie użyj przesunięć, aby zdefiniować, kiedy włączać i wyłączać przypinanie elementu.

<div data-spy = "affix" data-offset-top = "200" > ... </div>  

Przez JavaScript

Wywołaj wtyczkę afiksu przez JavaScript:

$ ( '#pasek nawigacyjny' ). przyrostek ()

Opcje

Opcje można przekazywać za pomocą atrybutów danych lub kodu JavaScript. W przypadku atrybutów danych dołącz nazwę opcji do data-, jak w data-offset-top="200".