JavaScript dla Bootstrapa

Ożyw komponenty Bootstrap — teraz dzięki 12 niestandardowym wtyczkom jQuery .

Modalne

Usprawniona, ale elastyczna, tradycyjna wtyczka modalna javascript z minimalną wymaganą funkcjonalnością i inteligentnymi ustawieniami domyślnymi.

Menu rozwijane

Dodaj rozwijane menu do prawie wszystkiego w Bootstrap za pomocą tej prostej wtyczki. Bootstrap oferuje pełną obsługę menu rozwijanego na pasku nawigacyjnym, kartach i pigułkach.

Szpieg przewijania

Użyj scrollspy, aby automatycznie aktualizować łącza na pasku nawigacyjnym, aby pokazać bieżące aktywne łącze na podstawie pozycji przewijania.

Przełączalne zakładki

Użyj tej wtyczki, aby zwiększyć użyteczność kart i pigułek, umożliwiając im przełączanie się między panelami z kartami zawartości lokalnej.

Podpowiedzi

Nowe podejście do wtyczki jQuery Tipsy, Tooltips nie opiera się na obrazach — używają CSS3 do animacji i atrybutów danych do lokalnego przechowywania tytułów.

Popovery *

Dodaj małe nakładki treści, takie jak te na iPadzie, do dowolnego elementu, aby pomieścić dodatkowe informacje.

* Wymaga dołączenia podpowiedzi

Komunikaty alarmowe

Wtyczka alertu to niewielka klasa do dodawania bliskiej funkcjonalności alertom.

guziki

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.

Upadek

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

Karuzela

Stwórz karuzelę z dowolnej zawartości, którą chcesz zapewnić interaktywny pokaz slajdów z zawartością.

Pisz z wyprzedzeniem

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

Przejścia *

Aby uzyskać proste efekty przejścia, dołącz plik bootstrap-transition.js raz, aby wsunąć modalne lub wyciszyć alerty.

* Wymagane do animacji we wtyczkach

Heads-up! Wszystkie wtyczki javascript wymagają najnowszej wersji jQuery.

O modalności

Usprawniona, ale elastyczna, tradycyjna wtyczka modalna javascript z minimalną wymaganą funkcjonalnością i inteligentnymi ustawieniami domyślnymi.

Pobieranie pliku

Przykład statyczny

Poniżej znajduje się statycznie renderowany modalny.

Demo na żywo

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

Uruchom tryb demonstracyjny

Korzystanie z bootstrap-modalu

Wywołaj modalne za pomocą javascript:

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

Opcje

Nazwa rodzaj domyślna opis
zasłona logiczne PRAWDA Zawiera modalny element tła. Możesz też określić statictło, które nie zamyka modalnego kliknięcia.
klawiatura logiczne PRAWDA Zamyka modalne po naciśnięciu klawisza Escape
pokazać logiczne PRAWDA Po inicjalizacji pokazuje modalny.

Narzut

Możesz łatwo aktywować mods na swojej stronie bez konieczności pisania ani jednej linii kodu javascript. Wystarczy ustawić data-toggle="modal"na elemencie kontrolera z data-target="#foo"lub href="#foo", który odpowiada identyfikatorowi elementu modalnego, a po kliknięciu uruchomi się modalny.

Ponadto, aby dodać opcje do wystąpienia modalnego, po prostu uwzględnij je jako dodatkowe atrybuty danych w elemencie kontrolnym lub samym znaczniku modalnym.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal"> Uruchom modalne </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = „button” class = „close” data-dismiss = „modal” > × </button>
  4. <h3> Nagłówek modalny </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Jedno piękne ciało… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal"> Zamknij </a> _
  11. <a href = "#" class = "btn btn-primary"> Zapisz zmiany </a>
  12. </div>
  13. </div>
Heads-up! Jeśli chcesz, aby Twój modalny był animowany, po prostu dodaj .fadeklasę do .modalelementu (zobacz demo, aby zobaczyć to w akcji) i dołącz bootstrap-transition.js.

Metody

.modal(opcje)

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

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

.modal('przełącz')

Ręcznie przełącza modalny.

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

.modal('pokaż')

Ręcznie otwiera mod.

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

.modal('ukryj')

Ręcznie ukrywa modalny.

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

Wydarzenia

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

Wydarzenie Opis
pokazać To zdarzenie jest wyzwalane natychmiast po showwywołaniu metody wystąpienia.
pokazane To zdarzenie jest wywoływane, gdy modalny został udostępniony użytkownikowi (będzie czekał na zakończenie przejść css).
ukryć To zdarzenie jest wywoływane natychmiast po hidewywołaniu metody wystąpienia.
ukryty To zdarzenie jest wywoływane, gdy modalne zakończy się ukrywanie przed użytkownikiem (poczeka na zakończenie przejść css).
  1. $ ( '#mójModalny' ). on ( 'ukryty' , funkcja () {
  2. // Zrób coś…
  3. })

Wtyczka ScrollSpy służy do automatycznej aktualizacji celów nawigacji na podstawie pozycji przewijania.

Pobieranie pliku

Przykładowy pasek nawigacyjny z scrollspy

Przewiń obszar poniżej i obejrzyj aktualizację nawigacji. Podpunkty rozwijane również zostaną podświetlone. Spróbuj!

@tłuszcz

Reklamowe legginsy keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi, zanim sprzedali qui. Prawa rowerowe Tumblr od farmy do stołu, cokolwiek. Kardigan Anim keffiyeh carles. Fotobudka Velit seitan mcsweeney 3 wolf moon irure. Cosby sweter lomo jean szorty, bluza williamsburg minim qui, o której prawdopodobnie nie słyszałeś i kardigan powierniczy culpa biodiesel wes anderson estetyka. Nihil wytatuowany accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Deskorolka Veniam marfa wąsy, adipisicing broda fugiat velit z widłami. Freegan broda aliqua cupidatat mcsweeney's vero. Cupidatat cztery loko nisi, ea helvetica nulla carles. Food truck z wytatuowanym swetrem w stylu cosby, winyl Mcsweeneya quis non freegan. Lo-fi wes anderson +1 krawiec. Carles nieestetyczne ćwiczenia quis gentrify. Brooklyn adipisicing piwo rzemieślnicze zastępca keytar deserunt.

jeden

Occaecat commodo aliqua delectus. Fap craft beer deserunt deskorolka ea. Prawa rowerowe Lomo adipisicing banh mi, velit ea sunt next level kawa locavore single-origin w magna veniam. Wysokiej jakości winyl id, echo park consequat quis aliquip banh mi widły. Vero VHS est adipisicing. Consectetur nisi DIY minim listonoszka. Cred ex in, zrównoważony delectus consectetur saszetka na iphone'a.

dwa

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, cokolwiek delectus food truck. Sapiente syntezator id zakładanda. Locavore sed helvetica cliche ironia, thundercats, o których prawdopodobnie nie słyszałeś, consequat bezglutenowa bluza z kapturem lo-fi fap aliquip. Elitarne miejsce Labore przed wyprzedaniem, Terry Richardson proident brunch nesciunt quis cosby sweter pariatur keffiyeh ut helvetica artisan. Kardiganowe piwo rzemieślnicze seitan gotowe velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Korzystanie z pliku bootstrap-scrollspy.js

Zadzwoń do scrollspy przez javascript:

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

Narzut

Aby łatwo dodać zachowanie scrollspy do nawigacji w górnym pasku, po prostu dodaj data-spy="scroll"element, który chcesz szpiegować (najczęściej jest to treść).

  1. <body data-spy = "scroll" > ... </body>
Heads-up! Linki paska nawigacyjnego muszą mieć rozpoznawalne cele id. Na przykład a <a href="#home">home</a>musi odpowiadać czemuś w dom jak <div id="home"></div>.

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:

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

Opcje

Nazwa rodzaj domyślna opis
zrównoważyć numer 10 Piksele do przesunięcia od góry podczas obliczania pozycji przewijania.

Wydarzenia

Wydarzenie Opis
Aktywuj Zdarzenie to uruchamia się za każdym razem, gdy scrollspy aktywuje nowy przedmiot.

Ta wtyczka dodaje szybką, dynamiczną funkcję kart i pigułek do przechodzenia przez zawartość lokalną.

Pobieranie pliku

Przykładowe zakładki

Kliknij poniższe karty, aby przełączać się między ukrytymi panelami, nawet za pomocą menu rozwijanych.

Surowy denim, o którym prawdopodobnie nie słyszałeś, dżinsowe szorty Austin. Nesciunt tofu stumptown aliqua, oczyszczanie mistrza syntezatorów w stylu retro. Wąsy cliche tempor, williamsburg carles wegańska helvetica. Reprehenderit rzeźnik retro kefija łapacz snów syntezator. Cosby sweter eu banh mi, qui irure terry richardson ex kałamarnica. Aliquip placeat salvia cillum iphone. Seitan aliquip quis kardigan amerykański odzież, rzeźnik 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.


Korzystanie z pliku bootstrap-tab.js

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

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

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

  1. $ ( '#myTab a[href="#profile"]' ). zakładka ( 'pokaż' ); // Wybierz kartę według nazwy
  2. $ ( '#myTab a:pierwszy' ). zakładka ( 'pokaż' ); // Wybierz pierwszą kartę
  3. $ ( '#myTab a:ostatni' ). zakładka ( 'pokaż' ); // Wybierz ostatnią kartę
  4. $ ( '#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 skryptu java, 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.

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

Metody

$().tab

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

  1. <ul class = „nav nav-tabs” id = „myTab” >
  2. <li class = "active" ><a href = "#home"> Strona główna </a> </li>
  3. <li><a href = "#profile"> Profil </a> </li>
  4. <li><a href = "#messages"> Wiadomości </a> </li>
  5. <li><a href = "#settings"> Ustawienia </a> </li>
  6. </ul>
  7.  
  8. <div class = "zawartość karty" >
  9. <div class = „aktywne okienko kart” id = „home” > ... </div>
  10. <div class = „tab-pane” id = „profil” > ... </div>
  11. <div class = „tab-pane” id = „wiadomości” > ... </div>
  12. <div class = "tab-pane" id = "ustawienia" > ... </div>
  13. </div>
  14.  
  15. <skrypt>
  16. $ ( funkcja () {
  17. $ ( '#myTab a:ostatni' ). zakładka ( 'pokaż' );
  18. })
  19. </script>

Wydarzenia

Wydarzenie Opis
pokazać To zdarzenie jest uruchamiane na pokazie zakładek, ale przed pokazaniem nowej zakładki. Użyj event.targeti event.relatedTarget, aby wybrać odpowiednio aktywną kartę i poprzednią aktywną kartę (jeśli jest dostępna).
pokazane To zdarzenie jest uruchamiane na pokazie kart po wyświetleniu karty. Użyj event.targeti event.relatedTarget, aby wybrać odpowiednio aktywną kartę i poprzednią aktywną kartę (jeśli jest dostępna).
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'pokazano' , funkcja ( e ) {
  2. mi . cel // aktywowana karta
  3. mi . relatedTarget // poprzednia karta
  4. })

Informacje o podpowiedziach

Zainspirowany doskonałą wtyczką jQuery.tipsy napisaną przez Jasona Frame; Podpowiedzi są zaktualizowaną wersją, która nie opiera się na obrazach, używa CSS3 do animacji i atrybutów danych do lokalnego przechowywania tytułów.

Pobieranie pliku

Przykładowe użycie podpowiedzi

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

Obcisłe spodnie następnego poziomu kefija prawdopodobnie o nich nie słyszałeś. Fotobudka broda surowy denim typografia wegańska torba listonoszka stumptown. 8-bitowa amerykańska odzież z komosy ryżowej firmy Mcsweeney firmy Mcsweeney w wersji fixie ma winylowy chambray frotte richardson. Beard Stumptown, swetry rozpinane banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, cztery loko mcsweeney's oczyszczający wegański chambray. Naprawdę ironiczny rzemieślnik , niezależnie od tego , jaka jest kluczowa , scenarzysta od farmy do stołu banksy Austin twitter obsługuje freegan cred surowy denim, wirus kawy jednego pochodzenia.


Korzystanie z bootstrap-tooltip.js

Uruchom podpowiedź za pomocą javascript:

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

Opcje

Nazwa rodzaj domyślna opis
animacja logiczne PRAWDA zastosować do podpowiedzi przejścia zanikania CSS
umieszczenie ciąg|funkcja 'Top' jak ustawić podpowiedź - góra | dół | lewo | prawo
selektor strunowy fałszywy Jeśli podano selektor, obiekty etykietek narzędzi zostaną delegowane do określonych celów.
tytuł ciąg | funkcjonować '' domyślna wartość tytułu, jeśli tag `title` nie jest obecny
cyngiel strunowy 'unosić się' jak uruchamia się podpowiedź - najedź | skupić | podręcznik
opóźnienie numer | obiekt 0

opóźnienie pokazywania i ukrywania podpowiedzi (ms) - nie dotyczy wyzwalania ręcznego

Jeśli podano numer, opóźnienie jest stosowane zarówno do ukrywania, jak i pokazywania

Struktura obiektu to:delay: { show: 500, hide: 100 }

Heads-up! Opcje dla poszczególnych podpowiedzi można alternatywnie określić za pomocą atrybutów danych.

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.

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

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

.podpowiedź('ukryj')

Ukrywa podpowiedź elementu.

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

.tooltip('przełącz')

Przełącza podpowiedź elementu.

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

O popoverach

Dodaj małe nakładki treści, takie jak te na iPadzie, do dowolnego elementu, aby pomieścić dodatkowe informacje.

* Wymaga dołączenia podpowiedzi

Pobieranie pliku

Przykład po najechaniu kursorem

Najedź na przycisk, aby uruchomić popover.


Korzystanie z pliku bootstrap-popover.js

Włącz popovery za pomocą javascript:

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

Opcje

Nazwa rodzaj domyślna opis
animacja logiczne PRAWDA zastosować do podpowiedzi przejścia zanikania CSS
umieszczenie ciąg|funkcja 'prawo' jak ustawić popover - góra | dół | lewo | prawo
selektor strunowy fałszywy jeśli podano selektor, obiekty podpowiedzi zostaną delegowane do określonych celów
cyngiel strunowy 'unosić się' jak uruchamia się podpowiedź - najedź | skupić | podręcznik
tytuł ciąg | funkcjonować '' domyślna wartość tytułu, jeśli atrybut „title” nie jest obecny
zawartość ciąg | funkcjonować '' domyślna wartość treści, jeśli atrybut „data-content” nie jest obecny
opóźnienie numer | obiekt 0

opóźnienie pokazywania i ukrywania popovera (ms) - nie dotyczy wyzwalania ręcznego

Jeśli podano numer, opóźnienie jest stosowane zarówno do ukrywania, jak i pokazywania

Struktura obiektu to:delay: { show: 500, hide: 100 }

Heads-up! Opcje dla poszczególnych okienek popover można alternatywnie określić za pomocą atrybutów danych.

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.

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

.popover('ukryj')

Ukrywa okienko z elementami.

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

.popover('przełącz')

Przełącza popover elementów.

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

O alertach

Wtyczka alertu to niewielka klasa do dodawania bliskiej funkcjonalności alertom.

Ściągnij

Przykładowe alerty

Wtyczka alertów działa w przypadku zwykłych wiadomości alertów i blokowania wiadomości.

Święty guacamole! Najlepiej sprawdź sam, nie wyglądasz zbyt dobrze.

Och, pstryk! Masz błąd!

Zmień to i tamto i spróbuj ponownie. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Podejmij tę akcję Albo zrób to


Korzystanie z pliku bootstrap-alert.js

Włącz odrzucanie alertu za pomocą javascript:

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

Narzut

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

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

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

Wydarzenia

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

Wydarzenie Opis
blisko To zdarzenie jest wyzwalane natychmiast po closewywołaniu metody wystąpienia.
Zamknięte To zdarzenie jest wywoływane po zamknięciu alertu (poczeka na zakończenie przejść css).
  1. $ ( '#mój-alert' ). bind ( 'zamknięte' , funkcja () {
  2. // Zrób coś…
  3. })

O

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.

Pobieranie pliku

Przykładowe zastosowania

Użyj wtyczki przycisków dla stanów i przełączników.

Stanowy
Pojedynczy przełącznik
Pole wyboru
Radio

Korzystanie z pliku bootstrap-button.js

Włącz przyciski za pomocą javascript:

  1. $ ( '.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.

  1. <!-- Dodaj data-toggle="button", aby aktywować przełączanie jednym przyciskiem -->
  2. <button class = "btn" data-toggle = "button" > Pojedynczy przełącznik </button>
  3.  
  4. <!-- Dodaj data-toggle="buttons-checkbox" do przełączania stylu pola wyboru w grupie btn -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Lewo </button>
  7. <button class = "btn" > Środkowy </button>
  8. <button class = "btn" > Prawo </button>
  9. </div>
  10.  
  11. <!-- Dodaj data-toggle="buttons-radio" do przełączania stylu radia w btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Lewo </button>
  14. <button class = "btn" > Środkowy </button>
  15. <button class = "btn" > Prawo </button>
  16. </div>

Metody

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

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

Heads-up! Możesz włączyć automatyczne przełączanie przycisku za pomocą data-toggleatrybutu.
  1. <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.

  1. <button class = "btn" data-loading-text = "ładowanie rzeczy..." > ... </button>
Heads-up! Firefox utrzymuje stan wyłączenia podczas wczytywania strony . Obejściem tego jest użycie autocomplete="off".

$().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.

  1. <button class = "btn" data-complete-text = "zakończono!" > ... </button>
  2. <skrypt>
  3. $ ( '.btn' ). przycisk ( 'zakończ' )
  4. </script>

O

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

Pobieranie pliku

* Wymaga dołączenia wtyczki Transitions.

Przykładowy akordeon

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

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat deskorolka dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua połóż na nim ptaka kalmary kawa jednorodna nulla zakładanda Shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad wegański wyjątek rzeźnik vice lomo. Legginsy occaecat rzemieślnicze z farmy na stół, surowy denim, estetyczny synth nesciunt, o którym prawdopodobnie nie słyszałeś accusamus labore zrównoważony VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat deskorolka dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua połóż na nim ptaka kalmary kawa jednorodna nulla zakładanda Shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad wegański wyjątek rzeźnik vice lomo. Legginsy occaecat rzemieślnicze z farmy na stół, surowy denim, estetyczny synth nesciunt, o którym prawdopodobnie nie słyszałeś accusamus labore zrównoważony VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat deskorolka dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua połóż na nim ptaka kalmary kawa jednorodna nulla zakładanda Shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad wegański wyjątek rzeźnik vice lomo. Legginsy occaecat rzemieślnicze z farmy na stół, surowy denim, estetyczny synth nesciunt, o którym prawdopodobnie nie słyszałeś accusamus labore zrównoważony VHS.

Korzystanie z pliku bootstrap-collapse.js

Włącz przez JavaScript:

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

Opcje

Nazwa rodzaj domyślna opis
rodzic selektor fałszywy Jeśli selektor to wszystkie zwijalne elementy pod określonym rodzicem zostaną zamknięte, gdy ten zwijalny element zostanie wyświetlony. (podobne do tradycyjnego zachowania akordeonowego)
przełącznik logiczne PRAWDA Przełącza zwijany element przy wywołaniu

Narzut

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.

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. prosty składany
  3. </button>
  4.  
  5. <div id = „demo” class = „zwiń w” > </div>
Heads-up! 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.

Metody

.zwiń(opcje)

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

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

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

Wydarzenie Opis
pokazać To zdarzenie jest wyzwalane natychmiast po showwywołaniu metody wystąpienia.
pokazane To zdarzenie jest wywoływane, gdy element zwinięcia jest widoczny dla użytkownika (poczeka na zakończenie przejść CSS).
ukryć To zdarzenie jest wywoływane natychmiast po hidewywołaniu metody.
ukryty To zdarzenie jest wywoływane, gdy element zwinięcia zostanie ukryty przed użytkownikiem (poczeka na zakończenie przejścia CSS).
  1. $ ( '#myCollapsible' ). on ( 'ukryty' , funkcja () {
  2. // Zrób coś…
  3. })

O

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

Pobieranie pliku

Przykład

Zacznij pisać w polu poniżej, aby wyświetlić wyniki z wyprzedzeniem.


Korzystanie z pliku bootstrap-typeahead.js

Wywołaj pismo z wyprzedzeniem za pomocą javascript:

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

Opcje

Nazwa rodzaj domyślna opis
źródło szyk [ ] Źródło danych do zapytania.
przedmiotów numer 8 Maksymalna liczba elementów do wyświetlenia w menu.
dopasowanie funkcjonować wielkość liter nie jest rozróżniana Metoda używana do określenia, czy zapytanie pasuje do elementu. Akceptuje pojedynczy argument, itemwzględem którego ma zostać przetestowane zapytanie. Uzyskaj dostęp do bieżącego zapytania za pomocą this.query. Zwraca wartość logiczną true, jeśli zapytanie jest zgodne.
sorter funkcjonować dokładne dopasowanie, wielkość liter
,
wielkość liter bez rozróżniania
Metoda używana do sortowania wyników autouzupełniania. Akceptuje pojedynczy argument itemsi ma zakres wystąpienia Typeahead. Odwołaj się do bieżącego zapytania za pomocą this.query.
Zakreślacz funkcjonować podświetla wszystkie domyślne dopasowania Metoda używana do wyróżnienia wyników autouzupełniania. Akceptuje pojedynczy argument itemi ma zakres wystąpienia Typeahead. Powinien zwrócić html.

Narzut

Dodaj atrybuty danych, aby zarejestrować element z funkcją wyprzedzenia.

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

Metody

.typeahead(opcje)

Inicjuje dane wejściowe z wyprzedzeniem.