JavaScript
Ożyw komponenty Bootstrap za pomocą kilkunastu niestandardowych wtyczek jQuery. Z łatwością uwzględnij je wszystkie lub pojedynczo.
Ożyw komponenty Bootstrap za pomocą kilkunastu niestandardowych wtyczek jQuery. Z łatwością uwzględnij je wszystkie lub pojedynczo.
Wtyczki mogą być dołączane pojedynczo (przy użyciu pojedynczych *.js
plików Bootstrapa) lub wszystkie naraz (przy użyciu bootstrap.js
lub zminifikowanego bootstrap.min.js
).
Oba bootstrap.js
i bootstrap.min.js
zawierają wszystkie wtyczki w jednym pliku. Uwzględnij tylko jeden.
Niektóre wtyczki i komponenty CSS zależą od innych wtyczek. Jeśli dołączasz wtyczki pojedynczo, sprawdź te zależności w dokumentach. Pamiętaj też, że wszystkie wtyczki zależą od jQuery (oznacza to, że jQuery musi być dołączone przed plikami wtyczek). Skonsultuj się z naszymbower.json
, aby dowiedzieć się, które wersje jQuery są obsługiwane.
Możesz używać wszystkich wtyczek Bootstrap wyłącznie poprzez API znaczników bez pisania ani jednej linii kodu JavaScript. Jest to pierwszorzędny interfejs API 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. Dlatego zapewniamy również możliwość wyłączenia interfejsu API atrybutów danych poprzez usunięcie powiązania wszystkich zdarzeń w dokumencie z przestrzenią nazw za pomocą data-api
. Wygląda to tak:
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:
Nie używaj atrybutów danych z wielu wtyczek w tym samym elemencie. Na przykład przycisk nie może mieć jednocześnie podpowiedzi i przełączać modalnego. Aby to osiągnąć, użyj elementu owijającego.
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.
Wszystkie metody powinny akceptować opcjonalny obiekt opcji, ciąg znaków, który wskazuje konkretną metodę, lub nic (co inicjuje wtyczkę z zachowaniem domyślnym):
Każda wtyczka udostępnia również swój surowy konstruktor we Constructor
właściwości: $.fn.popover.Constructor
. Jeśli chcesz pobrać konkretną instancję wtyczki, pobierz ją bezpośrednio z elementu: $('[rel="popover"]').data('popover')
.
Możesz zmienić domyślne ustawienia wtyczki, modyfikując Constructor.DEFAULTS
obiekt wtyczki:
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ć .noConflict
wtyczkę, której wartość chcesz przywrócić.
Bootstrap zapewnia niestandardowe zdarzenia dla większości unikalnych działań wtyczek. 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.
Od 3.0.0 wszystkie zdarzenia Bootstrap mają przestrzeń nazw.
Wszystkie zdarzenia bezokolicznikowe zapewniają preventDefault
funkcjonalność. Daje to możliwość zatrzymania wykonywania akcji przed jej rozpoczęciem.
Dostęp do wersji każdej z wtyczek Bootstrap jQuery można uzyskać za pośrednictwem VERSION
właściwości konstruktora wtyczki. Na przykład dla wtyczki podpowiedzi:
Wtyczki Bootstrap nie wycofują się szczególnie wdzięcznie, gdy JavaScript jest wyłączony. Jeśli zależy Ci na wrażeniach użytkownika w tym przypadku, użyj, <noscript>
aby wyjaśnić sytuację (i jak ponownie włączyć JavaScript) użytkownikom i/lub dodaj własne niestandardowe rozwiązania zastępcze.
Bootstrap oficjalnie nie obsługuje bibliotek JavaScript innych firm, takich jak Prototype lub jQuery UI. Pomimo .noConflict
zdarzeń w przestrzeni nazw mogą występować problemy ze zgodnością, które trzeba naprawić samodzielnie.
Aby uzyskać proste efekty przejścia, dołącz transition.js
raz obok innych plików JS. Jeśli używasz skompilowanego (lub zminimalizowanego) bootstrap.js
, nie ma potrzeby dołączania tego — już tam jest.
Transition.js to podstawowy helper dla transitionEnd
zdarzeń, a także emulator przejścia CSS. Jest używany przez inne wtyczki do sprawdzania obsługi przejść CSS i wyłapywania zawieszonych przejść.
Przejścia można globalnie wyłączyć za pomocą następującego fragmentu kodu JavaScript, który musi nastąpić po załadowaniu transition.js
(lub bootstrap.js
albo bootstrap.min.js
, w zależności od przypadku):
Modals to uproszczone, ale elastyczne monity dialogowe z minimalną wymaganą funkcjonalnością i inteligentnymi ustawieniami domyślnymi.
Pamiętaj, aby nie otwierać modalu, gdy inny jest nadal widoczny. Pokazywanie więcej niż jednego modu na raz wymaga niestandardowego kodu.
Zawsze staraj się umieścić kod HTML modalu na najwyższym poziomie w dokumencie, aby uniknąć innych komponentów wpływających na wygląd i/lub funkcjonalność modala.
Istnieją pewne zastrzeżenia dotyczące korzystania z modali na urządzeniach mobilnych. Szczegółowe informacje można znaleźć w naszych dokumentach dotyczących obsługi przeglądarek.
Ze względu na sposób, w jaki HTML5 definiuje swoją semantykę, autofocus
atrybut HTML nie działa w modach Bootstrap. Aby osiągnąć ten sam efekt, użyj niestandardowego JavaScriptu:
Renderowany modalny z nagłówkiem, treścią i zestawem akcji w stopce.
Przełącz modalny za pomocą JavaScript, klikając poniższy przycisk. Zsunie się i zniknie od góry strony.
Pamiętaj, aby dodać role="dialog"
i aria-labelledby="..."
, odwołując się do tytułu modalnego, do .modal
i role="document"
do .modal-dialog
samego siebie.
Dodatkowo możesz podać opis swojego modalnego okna dialogowego za pomocą aria-describedby
on .modal
.
Osadzanie filmów z YouTube w modach wymaga dodatkowego JavaScriptu, który nie jest dostępny w Bootstrap, aby automatycznie zatrzymać odtwarzanie i nie tylko. Zobacz ten pomocny post Stack Overflow , aby uzyskać więcej informacji.
Modale mają dwa opcjonalne rozmiary, dostępne za pośrednictwem klas modyfikatorów, które można umieścić na .modal-dialog
.
W przypadku modów, które po prostu pojawiają się, a nie pojawiają się w widoku, usuń .fade
klasę ze znaczników modalnych.
Aby skorzystać z systemu siatek Bootstrap w ramach modalnego, wystarczy zagnieździć .row
je w obrębie .modal-body
klas, a następnie użyć normalnych klas systemu siatek.
Masz kilka przycisków, które uruchamiają ten sam mod, tylko z nieco inną zawartością? Użyj atrybutówevent.relatedTarget
i HTMLdata-*
(prawdopodobnie za pośrednictwem jQuery ), aby zmienić zawartość modu w zależności od tego, który przycisk został kliknięty. Szczegółowe informacje na temat wydarzeń modalnych można znaleźć w dokumentacji relatedTarget
,
Wtyczka modalna przełącza Twoje ukryte treści na żądanie, za pomocą atrybutów danych lub JavaScript. Dodaje również .modal-open
do <body>
zastąpienia domyślnego zachowania przewijania i generuje .modal-backdrop
obszar kliknięcia do odrzucania wyświetlanych modów w przypadku kliknięcia poza nim.
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.
Wywołaj modalne z id myModal
z pojedynczą linią JavaScript:
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=""
.
Nazwa | rodzaj | domyślna | opis |
---|---|---|---|
zasłona | wartość logiczna lub ciąg'static' |
PRAWDA | Zawiera modalny element tła. Możesz też określić static tł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. |
zdalny | ścieżka | fałszywy | Ta opcja jest przestarzała od wersji 3.3.0 i została usunięta w wersji 4. Zamiast tego zalecamy korzystanie z szablonów po stronie klienta lub struktury wiązania danych albo samodzielne wywołanie jQuery.load . Jeśli podany zostanie zdalny adres URL, zawartość zostanie załadowana raz za pomocą metody jQuery |
.modal(options)
Aktywuje treść jako modalną. Akceptuje opcjonalne opcje object
.
.modal('toggle')
Ręcznie przełącza modalny. Powraca do wywołującego, zanim modalny został faktycznie pokazany lub ukryty (tj. przed wystąpieniem zdarzenia shown.bs.modal
lub ).hidden.bs.modal
.modal('show')
Ręcznie otwiera mod. Powraca do wywołującego, zanim modalny został faktycznie pokazany (tj. przed shown.bs.modal
wystąpieniem zdarzenia).
.modal('hide')
Ręcznie ukrywa modalny. Powraca do wywołującego, zanim modalny został faktycznie ukryty (tj. przed hidden.bs.modal
wystąpieniem zdarzenia).
.modal('handleUpdate')
Dopasowuje położenie modalu, aby przeciwdziałać paskowi przewijania na wypadek, gdyby pojawił się, co spowodowałoby przeskok modalny w lewo.
Potrzebne tylko wtedy, gdy wysokość modu zmienia się, gdy jest otwarty.
Klasa modalna Bootstrap udostępnia kilka zdarzeń do podłączenia do funkcji modalnej.
Wszystkie zdarzenia modalne są uruchamiane w samym module (tj. w <div class="modal">
).
Typ wydarzenia | Opis |
---|---|
show.bs.modal | To zdarzenie jest wyzwalane natychmiast po show wywołaniu metody wystąpienia. W przypadku kliknięcia kliknięty element jest dostępny jako relatedTarget właściwość zdarzenia. |
pokazano.bs.modalny | To zdarzenie jest wywoływane, gdy modalny zostanie udostępniony użytkownikowi (będzie czekał na zakończenie przejść CSS). W przypadku kliknięcia kliknięty element jest dostępny jako relatedTarget właściwość zdarzenia. |
hide.bs.modal | To zdarzenie jest wywoływane natychmiast po hide wywołaniu metody wystąpienia. |
ukryty.bs.modalny | To zdarzenie jest wywoływane po zakończeniu ukrywania modalności przed użytkownikiem (poczeka na zakończenie przejść CSS). |
załadowany.bs.modalny | To zdarzenie jest wywoływane, gdy modalny załadował zawartość za pomocą remote opcji. |
Dodaj menu rozwijane do prawie wszystkiego za pomocą tej prostej wtyczki, w tym paska nawigacyjnego, kart i pigułek.
Poprzez atrybuty danych lub JavaScript, rozwijana wtyczka przełącza ukrytą zawartość (menu rozwijane), przełączając .open
klasę w elemencie listy nadrzędnej.
Na urządzeniach mobilnych otwarcie listy rozwijanej dodaje obszar .dropdown-backdrop
jako obszar dotknięcia do zamykania menu rozwijanych podczas stukania poza menu, co jest wymogiem odpowiedniej obsługi systemu iOS. Oznacza to, że przejście z otwartego menu rozwijanego do innego menu rozwijanego wymaga dodatkowego dotknięcia na urządzeniu mobilnym.
Uwaga: data-toggle="dropdown"
Atrybut jest wykorzystywany do zamykania menu rozwijanych na poziomie aplikacji, dlatego warto zawsze go używać.
Dodaj data-toggle="dropdown"
do linku lub przycisku, aby przełączyć listę rozwijaną.
Aby zachować nienaruszone adresy URL za pomocą przycisków linków, użyj data-target
atrybutu zamiast href="#"
.
Wywołaj listy rozwijane za pomocą JavaScript:
data-toggle="dropdown"
nadal wymaganeNiezależnie od tego, czy wywołasz listę rozwijaną za pomocą JavaScript, czy zamiast tego użyjesz interfejsu API danych, data-toggle="dropdown"
zawsze wymagane jest, aby był obecny w elemencie wyzwalacza listy rozwijanej.
Nic
$().dropdown('toggle')
Przełącza menu rozwijane danego paska nawigacyjnego lub nawigacji na kartach.
Wszystkie zdarzenia rozwijane są uruchamiane w .dropdown-menu
elemencie nadrzędnym .
Wszystkie zdarzenia rozwijane mają relatedTarget
właściwość, której wartością jest przełączający element kotwicy.
Typ wydarzenia | Opis |
---|---|
show.bs.dropdown | To zdarzenie jest wyzwalane natychmiast po wywołaniu metody wystąpienia show. |
pokazane.bs.dropdown | To zdarzenie jest wywoływane, gdy lista rozwijana jest widoczna dla użytkownika (poczeka na przejście CSS, aby zakończyć). |
hide.bs.dropdown | To zdarzenie jest wywoływane natychmiast po wywołaniu metody hide wystąpienia. |
ukryte.bs.dropdown | To zdarzenie jest wywoływane, gdy lista rozwijana jest ukrywana przed użytkownikiem (poczeka na przejście CSS, aby się zakończyć). |
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.
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.
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.
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.
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.
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.
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>
.
:visible
docelowe zostały zignorowaneElementy docelowe, które nie są :visible
zgodne z jQuery , zostaną zignorowane, a odpowiadające im elementy nawigacyjne nigdy nie zostaną podświetlone.
Bez względu na metodę implementacji scrollspy wymaga użycia position: relative;
na elemencie, który śledzisz. W większości przypadków jest to <body>
. Podczas przeglądania elementów innych niż <body>
, upewnij się, że masz height
ustawiony i overflow-y: scroll;
zastosowany.
Aby łatwo dodać zachowanie scrollspy do nawigacji w górnym pasku, dodaj data-spy="scroll"
element, który chcesz szpiegować (najczęściej jest to <body>
). Następnie dodaj data-target
atrybut z identyfikatorem lub klasą elementu nadrzędnego dowolnego .nav
komponentu Bootstrap.
Po dodaniu position: relative;
kodu CSS wywołaj scrollspy przez JavaScript:
.scrollspy('refresh')
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:
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=""
.
Nazwa | rodzaj | domyślna | opis |
---|---|---|---|
zrównoważyć | numer | 10 | Piksele do przesunięcia od góry podczas obliczania pozycji przewijania. |
Typ wydarzenia | Opis |
---|---|
aktywuj.bs.scrollspy | Zdarzenie to uruchamia się za każdym razem, gdy scrollspy aktywuje nowy przedmiot. |
Dodaj szybką, dynamiczną funkcję kart, aby przechodzić przez panele zawartości lokalnej, nawet za pomocą menu rozwijanych. Karty zagnieżdżone nie są obsługiwane.
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.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Ta wtyczka rozszerza komponent nawigacji z zakładkami, aby dodać obszary z zakładkami.
Włącz karty z zakładkami za pomocą JavaScript (każda karta musi być aktywowana osobno):
Poszczególne zakładki możesz aktywować na kilka sposobów:
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 nav
i do zakładki zastosuje stylizację zakładki Bootstrap , natomiast dodanie klas i zastosuje stylizację pigułki .nav-tabs
ul
nav
nav-pills
Aby karty pojawiały się, dodaj .fade
do każdego .tab-pane
. Pierwszy panel z zakładkami musi również .in
uwidaczniać początkową zawartość.
$().tab
Aktywuje element tab i kontener treści. Karta powinna mieć węzeł kontenera data-target
lub docelowy w DOM. href
W powyższych przykładach zakładkami są <a>
s z data-toggle="tab"
atrybutami.
.tab('show')
Wybiera daną zakładkę i pokazuje powiązaną z nią zawartość. Każda inna karta, która została wcześniej wybrana, zostanie odznaczona, a powiązana z nią zawartość zostanie ukryta. Powraca do dzwoniącego przed faktycznym wyświetleniem okienka kart (tj. przed shown.bs.tab
wystąpieniem zdarzenia).
Po wyświetleniu nowej karty zdarzenia są uruchamiane w następującej kolejności:
hide.bs.tab
(na aktualnie aktywnej zakładce)show.bs.tab
(w zakładce do pokazania)hidden.bs.tab
(na poprzedniej aktywnej zakładce, taka sama jak dla hide.bs.tab
wydarzenia)shown.bs.tab
(na nowo aktywnej właśnie wyświetlonej zakładce, takiej samej jak dla show.bs.tab
wydarzenia)Jeżeli żadna zakładka nie była już aktywna, to zdarzenia hide.bs.tab
i hidden.bs.tab
nie zostaną wywołane.
Typ wydarzenia | Opis |
---|---|
show.bs.tab | To zdarzenie jest uruchamiane na pokazie zakładek, ale przed pokazaniem nowej zakładki. Użyj event.target i event.relatedTarget , aby wybrać odpowiednio aktywną kartę i poprzednią aktywną kartę (jeśli jest dostępna). |
pokazano.bs.tab | To zdarzenie jest uruchamiane na pokazie kart po wyświetleniu karty. Użyj event.target i event.relatedTarget , aby wybrać odpowiednio aktywną kartę i poprzednią aktywną kartę (jeśli jest dostępna). |
ukryj.bs.tab | To zdarzenie jest wyzwalane, gdy ma być pokazana nowa zakładka (a tym samym ukryta poprzednia aktywna zakładka). Użyj event.target i event.relatedTarget do kierowania odpowiednio na bieżącą aktywną kartę i nową wkrótce aktywną kartę. |
ukryta.bs.tab | To zdarzenie jest uruchamiane po wyświetleniu nowej karty (a tym samym ukrycie poprzedniej aktywnej karty). Użyj event.target i event.relatedTarget do kierowania odpowiednio na poprzednią aktywną kartę i nową aktywną kartę. |
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.
Etykietki narzędzi z tytułami o zerowej długości nigdy nie są wyświetlane.
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.
Dostępne są cztery opcje: wyrównanie do góry, do prawej, do dołu i do lewej.
Ze względu na wydajność interfejsy danych Tooltip i Popover są dostępne, co oznacza, że musisz je zainicjować samodzielnie .
Jednym ze sposobów na zainicjowanie wszystkich podpowiedzi na stronie byłoby wybranie ich według ich data-toggle
atrybutów:
Wtyczka podpowiedzi generuje treść i znaczniki na żądanie i domyślnie umieszcza podpowiedzi po elemencie wyzwalacza.
Uruchom podpowiedź za pomocą JavaScript:
Wymagane znaczniki podpowiedzi to tylko data
atrybut i title
element HTML, który chcesz mieć podpowiedź. Wygenerowany znacznik podpowiedzi jest dość prosty, chociaż wymaga pozycji (domyślnie ustawionej top
przez wtyczkę).
Czasami chcesz dodać podpowiedź do hiperłącza, która otacza wiele wierszy. Domyślnym zachowaniem wtyczki podpowiedzi jest wyśrodkowanie jej w poziomie iw pionie. Dodaj white-space: nowrap;
do swoich kotwic, aby tego uniknąć.
Używając podpowiedzi na elementach wewnątrz a .btn-group
lub .input-group
na elementach związanych z tabelą ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), musisz określić opcję container: 'body'
(udokumentowaną poniżej), aby uniknąć niepożądanych efektów ubocznych (takich jak powiększanie się elementu i/ lub traci zaokrąglone rogi po uruchomieniu podpowiedzi).
W przypadku użytkowników korzystających z nawigacji za pomocą klawiatury, a w szczególności użytkowników technologii wspomagających, należy dodawać podpowiedzi tylko do elementów, które można aktywować za pomocą klawiatury, takich jak łącza, kontrolki formularzy lub dowolny dowolny element z tabindex="0"
atrybutem.
Aby dodać podpowiedź do elementu disabled
lub .disabled
, umieść element wewnątrz a i zamiast tego <div>
zastosuj do niego podpowiedź .<div>
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=""
.
Nazwa | Rodzaj | Domyślna | Opis |
---|---|---|---|
animacja | logiczne | PRAWDA | Zastosuj zanikające przejście CSS do podpowiedzi |
pojemnik | ciąg | fałszywy | fałszywy | Dołącza podpowiedź do określonego elementu. Przykład: |
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: |
html | logiczne | fałszywy | Wstaw kod HTML do podpowiedzi. Jeśli false, metoda jQuery text zostanie użyta do wstawienia treści do DOM. Użyj tekstu, jeśli martwisz się atakami XSS. |
umieszczenie | ciąg | funkcjonować | 'Top' | Jak ustawić podpowiedź - góra | dół | lewo | prawo | automatyczny. Gdy funkcja jest używana do określenia położenia, jest wywoływana z węzłem DOM podpowiedzi jako pierwszym argumentem i węzłem DOM elementu wyzwalającego jako drugim. Kontekst |
selektor | strunowy | fałszywy | Jeśli podano selektor, obiekty etykietek narzędzi zostaną delegowane do określonych celów. W praktyce służy to umożliwieniu dodawania podpowiedzi do dynamicznej zawartości HTML. Zobacz to i przykład informacyjny . |
szablon | strunowy | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Podstawowy kod HTML do użycia podczas tworzenia podpowiedzi. Etykietka
Najbardziej zewnętrzny element opakowania powinien mieć |
tytuł | ciąg | funkcjonować | '' | Domyślna wartość tytułu, jeśli Jeśli podana zostanie funkcja, zostanie wywołana z |
cyngiel | strunowy | „skup się na najechaniu” | Jak uruchamia się podpowiedź - kliknij | najedź | skupić | podręcznik. Możesz przekazać wiele wyzwalaczy; oddziel je spacją. manual nie można łączyć z żadnym innym wyzwalaczem. |
rzutnia | ciąg | obiekt | funkcjonować | { selektor: 'ciało', dopełnienie: 0 } | Utrzymuje etykietkę w granicach tego elementu. Przykład: Jeśli podano funkcję, jest ona wywoływana z węzłem DOM elementu wyzwalającego jako jedynym argumentem. Kontekst |
Opcje dla poszczególnych podpowiedzi można alternatywnie określić za pomocą atrybutów danych, jak wyjaśniono powyżej.
$().tooltip(options)
Dołącza obsługę podpowiedzi do kolekcji elementów.
.tooltip('show')
Odsłania opis elementu. Wraca do wywołującego przed wyświetleniem podpowiedzi (tj. przed shown.bs.tooltip
wystąpieniem zdarzenia). Jest to uważane za „ręczne” wyzwalanie podpowiedzi. Etykietki narzędzi z tytułami o zerowej długości nigdy nie są wyświetlane.
.tooltip('hide')
Ukrywa podpowiedź elementu. Wraca do wywołującego, zanim podpowiedź została faktycznie ukryta (tj. przed hidden.bs.tooltip
wystąpieniem zdarzenia). Jest to uważane za „ręczne” wyzwalanie podpowiedzi.
.tooltip('toggle')
Przełącza podpowiedź elementu. Powraca do wywołującego, zanim podpowiedź została faktycznie pokazana lub ukryta (tj. przed wystąpieniem zdarzenia shown.bs.tooltip
lub ). hidden.bs.tooltip
Jest to uważane za „ręczne” wyzwalanie podpowiedzi.
.tooltip('destroy')
Ukrywa i niszczy opis elementu. Etykietki narzędzi korzystające z delegowania (utworzone za pomocą opcji selector
) nie mogą być indywidualnie niszczone w elementach podrzędnych wyzwalaczy.
Typ wydarzenia | Opis |
---|---|
pokaż.bs.podpowiedź | To zdarzenie jest wyzwalane natychmiast po show wywołaniu metody wystąpienia. |
pokazana.bs.podpowiedź | To zdarzenie jest wywoływane, gdy etykietka narzędzi jest widoczna dla użytkownika (poczeka na zakończenie przejścia CSS). |
ukryj.bs.podpowiedź | To zdarzenie jest wywoływane natychmiast po hide wywołaniu metody wystąpienia. |
ukryta.bs.podpowiedź | To zdarzenie jest wywoływane po zakończeniu ukrywania podpowiedzi przed użytkownikiem (poczeka na zakończenie przejścia CSS). |
wstawiono.bs.podpowiedź | To zdarzenie jest uruchamiane po show.bs.tooltip zdarzeniu, gdy szablon podpowiedzi został dodany do DOM. |
Dodaj małe nakładki treści, takie jak te na iPadzie, do dowolnego elementu, aby pomieścić dodatkowe informacje.
Popovery, których zarówno tytuł, jak i treść mają zerową długość, nigdy nie są wyświetlane.
Popovery wymagają, aby wtyczka podpowiedzi była dołączona do twojej wersji Bootstrap.
Ze względu na wydajność interfejsy danych Tooltip i Popover są dostępne, co oznacza, że musisz je zainicjować samodzielnie .
Jednym ze sposobów na zainicjowanie wszystkich okienek popover na stronie byłoby wybranie ich według ich data-toggle
atrybutów:
Używając okienek popover na elementach wewnątrz a .btn-group
lub .input-group
na elementach związanych z tabelą ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), musisz określić opcję container: 'body'
(udokumentowaną poniżej), aby uniknąć niepożądanych efektów ubocznych (takich jak powiększanie się elementu i/ lub traci swoje zaokrąglone rogi po uruchomieniu popover).
Aby dodać popover do elementu disabled
lub , umieść go wewnątrz a i zastosuj do niego popover ..disabled
<div>
<div>
Czasami chcesz dodać popover do hiperłącza, które otacza wiele wierszy. Domyślnym zachowaniem wtyczki popover jest wyśrodkowanie jej w poziomie i pionie. Dodaj white-space: nowrap;
do swoich kotwic, aby tego uniknąć.
Dostępne są cztery opcje: wyrównanie do góry, do prawej, do dołu i do lewej.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Użyj focus
wyzwalacza, aby odrzucić wyskakujące okienka przy następnym kliknięciu, które wykona użytkownik.
Aby zapewnić prawidłowe działanie w różnych przeglądarkach i na różnych platformach, należy użyć <a>
tagu, a nie<button>
tagu, a także uwzględnić atrybuty role="button"
i .tabindex
Włącz popovery przez JavaScript:
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=""
.
Nazwa | Rodzaj | Domyślna | Opis |
---|---|---|---|
animacja | logiczne | PRAWDA | Zastosuj zanikające przejście CSS do popover |
pojemnik | ciąg | fałszywy | fałszywy | Dołącza popover do określonego elementu. Przykład: |
zawartość | ciąg | funkcjonować | '' | Domyślna wartość treści, jeśli Jeśli podana zostanie funkcja, zostanie wywołana z |
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: |
html | logiczne | fałszywy | Wstaw kod HTML do popovera. Jeśli false, metoda jQuery text zostanie użyta do wstawienia treści do DOM. Użyj tekstu, jeśli martwisz się atakami XSS. |
umieszczenie | ciąg | funkcjonować | 'prawo' | Jak ustawić popover - góra | dół | lewo | prawo | automatyczny. Gdy funkcja jest używana do określenia położenia, jest wywoływana z węzłem DOM popover jako pierwszym argumentem i węzłem DOM elementu wyzwalającego jako drugim. Kontekst |
selektor | strunowy | fałszywy | Jeśli podano selektor, obiekty popover zostaną delegowane do określonych celów. W praktyce służy to umożliwieniu dynamicznej zawartości HTML dodawania okienek popover. Zobacz to i przykład informacyjny . |
szablon | strunowy | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Podstawowy kod HTML do użycia podczas tworzenia popovera. Popover Popover
Najbardziej zewnętrzny element opakowania powinien mieć |
tytuł | ciąg | funkcjonować | '' | Domyślna wartość tytułu, jeśli Jeśli podana zostanie funkcja, zostanie wywołana z |
cyngiel | strunowy | 'Kliknij' | Jak uruchamia się popover - kliknij | najedź | skupić | podręcznik. Możesz przekazać wiele wyzwalaczy; oddziel je spacją. manual nie można łączyć z żadnym innym wyzwalaczem. |
rzutnia | ciąg | obiekt | funkcjonować | { selektor: 'ciało', dopełnienie: 0 } | Utrzymuje popover w granicach tego elementu. Przykład: Jeśli podano funkcję, jest ona wywoływana z węzłem DOM elementu wyzwalającego jako jedynym argumentem. Kontekst |
Opcje dla poszczególnych okienek popover można alternatywnie określić za pomocą atrybutów danych, jak wyjaśniono powyżej.
$().popover(options)
Inicjuje popovery dla kolekcji elementów.
.popover('show')
Ujawnia popover elementu. Wraca do dzwoniącego przed faktycznym wyświetleniem popovera (tj. przed shown.bs.popover
wystąpieniem zdarzenia). Jest to uważane za „ręczne” wyzwalanie popover. Popovery, których zarówno tytuł, jak i treść mają zerową długość, nigdy nie są wyświetlane.
.popover('hide')
Ukrywa popover elementu. Powraca do dzwoniącego, zanim popover został faktycznie ukryty (tj. przed hidden.bs.popover
wystąpieniem zdarzenia). Jest to uważane za „ręczne” wyzwalanie popover.
.popover('toggle')
Przełącza popover elementu. Powraca do dzwoniącego, zanim popover został faktycznie wyświetlony lub ukryty (tj. przed wystąpieniem zdarzenia shown.bs.popover
lub ). hidden.bs.popover
Jest to uważane za „ręczne” wyzwalanie popover.
.popover('destroy')
Ukrywa i niszczy popover elementu. Popovery korzystające z delegowania (utworzone za pomocą opcji selector
) nie mogą być indywidualnie niszczone w potomnych elementach wyzwalających.
Typ wydarzenia | Opis |
---|---|
pokaż.bs.popover | To zdarzenie jest wyzwalane natychmiast po show wywołaniu metody wystąpienia. |
pokazano.bs.popover | To zdarzenie jest uruchamiane, gdy popover jest widoczny dla użytkownika (poczeka na zakończenie przejścia CSS). |
ukryj.bs.popover | To zdarzenie jest wywoływane natychmiast po hide wywołaniu metody wystąpienia. |
ukryta.bs.popover | To zdarzenie jest uruchamiane po zakończeniu ukrywania popovera przed użytkownikiem (poczeka na zakończenie przejścia CSS). |
wstawiony.bs.popover | To zdarzenie jest wywoływane po show.bs.popover zdarzeniu, gdy szablon popover został dodany do DOM. |
Dodaj funkcję odrzucania do wszystkich komunikatów ostrzegawczych za pomocą tej wtyczki.
Gdy używasz .close
przycisku, musi on być pierwszym elementem podrzędnym .alert-dismissible
i żadna treść tekstowa nie może znajdować się przed nim w znaczniku.
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.
Po prostu dodaj data-dismiss="alert"
do przycisku zamknięcia, aby automatycznie włączyć funkcję zamknięcia alertu. Zamknięcie alertu usuwa go z DOM.
Aby Twoje alerty używały animacji podczas zamykania, upewnij się, że mają już przypisane do nich klasy .fade
i ..in
$().alert()
Sprawia, że alert nasłuchuje zdarzeń kliknięcia na elementach potomnych, które mają ten data-dismiss="alert"
atrybut. (Nie jest to konieczne w przypadku korzystania z automatycznej inicjalizacji interfejsu API danych).
$().alert('close')
Zamyka alert, usuwając go z DOM. Jeśli klasy .fade
i .in
są obecne w elemencie, alert zniknie, zanim zostanie usunięty.
Wtyczka alertu Bootstrap udostępnia kilka zdarzeń, które można podłączyć do funkcji alertów.
Typ wydarzenia | Opis |
---|---|
zamknij.bs.alert | To zdarzenie jest wyzwalane natychmiast po close wywołaniu metody wystąpienia. |
zamknięty.bs.alert | To zdarzenie jest wywoływane po zamknięciu alertu (poczeka na zakończenie przejścia CSS). |
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.
Firefox utrzymuje stany kontroli formularzy (wyłączenie i sprawdzanie) podczas ładowania stron . Obejściem tego jest użycie autocomplete="off"
. Zobacz błąd Mozilli #654072 .
Dodaj data-loading-text="Loading..."
, aby użyć stanu ładowania na przycisku.
Ta funkcja jest przestarzała od wersji 3.3.5 i została usunięta w wersji 4.
Na potrzeby tej demonstracji używamy data-loading-text
i $().button('loading')
, ale to nie jedyny stan, którego możesz użyć. Zobacz więcej na ten temat poniżej w $().button(string)
dokumentacji .
Dodaj data-toggle="button"
, aby aktywować przełączanie jednym przyciskiem.
.active
iaria-pressed="true"
W przypadku wstępnie przełączanych przycisków musisz dodać .active
klasę i aria-pressed="true"
atrybut do button
siebie.
Dodaj data-toggle="buttons"
do .btn-group
zawierającego pola wyboru lub wejścia radiowe, aby umożliwić przełączanie w ich odpowiednich stylach.
.active
W przypadku wstępnie wybranych opcji musisz samodzielnie dodać .active
klasę do danych wejściowych label
.
Jeśli zaznaczony stan przycisku pola wyboru zostanie zaktualizowany bez wywołania click
zdarzenia na przycisku (np. poprzez <input type="reset">
lub poprzez ustawienie checked
właściwości wejścia), będziesz musiał samodzielnie przełączyć .active
klasę na wejście label
.
$().button('toggle')
Przełącza stan wypychania. Nadaje przyciskowi wygląd, w którym został aktywowany.
$().button('reset')
Resetuje stan przycisku — zamienia tekst na tekst oryginalny. Ta metoda jest asynchroniczna i powraca przed faktycznym zakończeniem resetowania.
$().button(string)
Zamienia tekst na dowolny stan tekstowy zdefiniowany w danych.
Elastyczna wtyczka, która wykorzystuje kilka klas do łatwego przełączania zachowań.
Zwiń wymaga włączenia wtyczki przejścia do Twojej wersji Bootstrap.
Kliknij poniższe przyciski, aby pokazać i ukryć inny element poprzez zmiany klasy:
.collapse
ukrywa treść.collapsing
jest stosowany podczas przejść.collapse.in
pokazuje treśćMożesz użyć linku z href
atrybutem lub przycisku z data-target
atrybutem. W obu przypadkach data-toggle="collapse"
jest to wymagane.
Rozszerz domyślne zachowanie zwijania, aby utworzyć harmonijkę z komponentem panelu.
Istnieje również możliwość zamiany .panel-body
s na .list-group
s.
Pamiętaj, aby dodać aria-expanded
do elementu kontrolnego. Ten atrybut jawnie definiuje bieżący stan zwijanego elementu dla czytników ekranu i podobnych technologii wspomagających. Jeśli zwijany element jest domyślnie zamknięty, powinien mieć wartość aria-expanded="false"
. Jeśli ustawisz zwijany element, aby był domyślnie otwarty przy użyciu in
klasy, aria-expanded="true"
zamiast tego ustaw kontrolkę. Wtyczka automatycznie przełączy ten atrybut na podstawie tego, czy zwijany element został otwarty lub zamknięty.
Dodatkowo, jeśli Twój element kontrolny jest skierowany na pojedynczy zwijalny element – tj. data-target
atrybut wskazuje na id
selektor – możesz dodać dodatkowy aria-controls
atrybut do elementu kontrolnego, zawierający id
element zwijalny. Nowoczesne czytniki ekranu i podobne technologie pomocnicze wykorzystują ten atrybut, aby zapewnić użytkownikom dodatkowe skróty umożliwiające nawigację bezpośrednio do samego zwijanego elementu.
Wtyczka zwijania wykorzystuje kilka klas do obsługi podnoszenia ciężkich przedmiotów:
.collapse
ukrywa treść.collapse.in
pokazuje treść.collapsing
jest dodawany po rozpoczęciu przejścia i usuwany po jego zakończeniuKlasy te można znaleźć w component-animations.less
.
Wystarczy dodać data-toggle="collapse"
i data-target
do elementu, aby automatycznie przypisać kontrolę nad zwijanym elementem. data-target
Atrybut akceptuje selektor CSS, do którego ma zostać zastosowane zwinięcie . Pamiętaj, aby dodać klasę collapse
do 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.
Włącz ręcznie za pomocą:
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=""
.
Nazwa | rodzaj | domyślna | opis |
---|---|---|---|
rodzic | selektor | fałszywy | Jeśli podano selektor, wszystkie zwijalne elementy pod określonym elementem nadrzędnym zostaną zamknięte, gdy ten zwijalny element zostanie wyświetlony. (podobne do tradycyjnego zachowania akordeonu - zależy to od panel klasy) |
przełącznik | logiczne | PRAWDA | Przełącza zwijany element przy wywołaniu |
.collapse(options)
Aktywuje zawartość jako zwijany element. Akceptuje opcjonalne opcje object
.
.collapse('toggle')
Przełącza zwijany element na pokazany lub ukryty. Wraca do wywołującego, zanim zwijany element został faktycznie pokazany lub ukryty (tj. przed wystąpieniem zdarzenia shown.bs.collapse
lub ).hidden.bs.collapse
.collapse('show')
Pokazuje składany element. Powraca do wywołującego, zanim zwijany element został faktycznie pokazany (tj. przed shown.bs.collapse
wystąpieniem zdarzenia).
.collapse('hide')
Ukrywa składany element. Wraca do wywołującego, zanim zwijalny element został faktycznie ukryty (tj. przed hidden.bs.collapse
wystąpieniem zdarzenia).
Klasa zwijania Bootstrap udostępnia kilka zdarzeń umożliwiających podłączenie do funkcji zwijania.
Typ wydarzenia | Opis |
---|---|
pokaż.bs.zwiń | To zdarzenie jest wyzwalane natychmiast po show wywołaniu metody wystąpienia. |
pokazano.bs.zwiń | To zdarzenie jest wywoływane, gdy element zwinięcia jest widoczny dla użytkownika (poczeka na zakończenie przejścia CSS). |
ukryj.bs.zwiń | To zdarzenie jest wywoływane natychmiast po hide wywołaniu metody. |
ukryty.bs.zwiń | To zdarzenie jest wywoływane, gdy element zwinięcia zostanie ukryty przed użytkownikiem (poczeka na zakończenie przejścia CSS). |
Komponent pokazu slajdów do przechodzenia między elementami, np. karuzela. Zagnieżdżone karuzele nie są obsługiwane.
Komponent karuzeli zazwyczaj nie jest zgodny ze standardami ułatwień dostępu. Jeśli chcesz zachować zgodność, rozważ inne opcje prezentacji treści.
Bootstrap używa wyłącznie CSS3 do swoich animacji, ale Internet Explorer 8 i 9 nie obsługuje niezbędnych właściwości CSS. Dlatego podczas korzystania z tych przeglądarek nie ma animacji przejścia slajdów. Celowo zdecydowaliśmy się nie uwzględniać w przejściach funkcji awaryjnych opartych na jQuery.
Klasę .active
należy dodać do jednego ze slajdów. W przeciwnym razie karuzela nie będzie widoczna.
Klasy .glyphicon .glyphicon-chevron-left
i .glyphicon .glyphicon-chevron-right
niekoniecznie są potrzebne do kontroli. Bootstrap zapewnia .icon-prev
i .icon-next
jako zwykłe alternatywy dla Unicode.
Łatwo dodawaj podpisy do slajdów za pomocą .carousel-caption
elementu w dowolnym .item
. Umieść tam prawie dowolny opcjonalny kod HTML, a zostanie on automatycznie wyrównany i sformatowany.
Aby elementy sterujące karuzeli działały prawidłowo, karuzele wymagają użycia symbolu id
na najbardziej zewnętrznym pojemniku (the ). .carousel
Dodając wiele karuzeli lub zmieniając karuzele id
, pamiętaj o zaktualizowaniu odpowiednich elementów sterujących.
Użyj atrybutów danych, aby łatwo kontrolować pozycję karuzeli. data-slide
akceptuje słowa kluczowe prev
lub next
, co zmienia pozycję slajdu w stosunku do jego aktualnej pozycji. Możesz też użyć , data-slide-to
aby przekazać nieprzetworzony indeks slajdu do karuzeli data-slide-to="2"
, co powoduje przesunięcie pozycji slajdu do określonego indeksu zaczynającego się od 0
.
data-ride="carousel"
Atrybut służy do oznaczania karuzeli jako animowanej od momentu załadowania strony . Nie można jej używać w połączeniu z (nadmiarową i niepotrzebną) jawną inicjalizacją JavaScript tej samej karuzeli.
Wywołaj karuzelę ręcznie za pomocą:
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-interval=""
.
Nazwa | rodzaj | domyślna | opis |
---|---|---|---|
interwał | numer | 5000 | Czas opóźnienia między automatycznym cyklem elementu. Jeśli fałsz, karuzela nie włączy się automatycznie. |
pauza | ciąg | zero | "unosić się" | Jeśli ustawione na "hover" , wstrzymuje cykliczne włączanie karuzeli mouseenter i wznawia cykliczne włączanie karuzeli mouseleave . Jeśli jest ustawiona na null , najechanie kursorem na karuzelę nie zatrzyma jej. |
zawinąć | logiczne | PRAWDA | Czy karuzela powinna pracować w sposób ciągły, czy też powinna mieć ostre zatrzymania. |
klawiatura | logiczne | PRAWDA | Czy karuzela powinna reagować na zdarzenia na klawiaturze. |
.carousel(options)
Inicjuje karuzelę z opcjonalnymi opcjami object
i rozpoczyna przełączanie między elementami.
.carousel('cycle')
Przechodzi przez elementy karuzeli od lewej do prawej.
.carousel('pause')
Zatrzymuje karuzelę przed przechodzeniem przez elementy.
.carousel(number)
Przełącza karuzelę do określonej klatki (na podstawie 0, podobnie do tablicy).
.carousel('prev')
Przechodzi do poprzedniej pozycji.
.carousel('next')
Przechodzi do następnego elementu.
Klasa karuzeli Bootstrap udostępnia dwa zdarzenia do podłączenia do funkcji karuzeli.
Oba zdarzenia mają następujące dodatkowe właściwości:
direction
: kierunek, w którym karuzela się przesuwa (albo "left"
lub "right"
).relatedTarget
: Element DOM, który jest przesuwany na miejsce jako aktywny element.Wszystkie zdarzenia karuzeli są uruchamiane w samej karuzeli (tj. w <div class="carousel">
).
Typ wydarzenia | Opis |
---|---|
slajd.bs.karuzela | To zdarzenie jest wyzwalane natychmiast po slide wywołaniu metody wystąpienia. |
karuzela.bs | To zdarzenie jest uruchamiane, gdy karuzela zakończy przejście slajdu. |
Wtyczka afiksu włącza position: fixed;
się i wyłącza, emulując efekt znaleziony za pomocą position: sticky;
. Podnawigacja po prawej stronie to demo wtyczki afiksu na żywo.
Użyj wtyczki afiksu za pomocą atrybutów danych lub ręcznie za pomocą własnego kodu JavaScript. W obu sytuacjach musisz podać kod CSS określający pozycjonowanie i szerokość umieszczanej treści.
Uwaga: nie używaj wtyczki afiksu na elemencie zawartym we względnie pozycjonowanym elemencie, takim jak kolumna ściągnięta lub wypchnięta, z powodu błędu renderowania Safari .
Wtyczka afiksu przełącza między trzema klasami, z których każda reprezentuje określony stan: .affix
, .affix-top
i .affix-bottom
. Musisz samodzielnie podać style, z wyjątkiem position: fixed;
on .affix
, dla tych klas (niezależnie od tej wtyczki), aby obsłużyć rzeczywiste pozycje.
Oto jak działa wtyczka afiksu:
.affix-top
, aby wskazać, że element znajduje się na najwyższej pozycji. W tym momencie nie jest wymagane pozycjonowanie CSS..affix
zastępuje .affix-top
i ustawia position: fixed;
(dostarczone przez CSS Bootstrap)..affix
przez .affix-bottom
. Ponieważ offsety są opcjonalne, ustawienie jednego wymaga ustawienia odpowiedniego CSS. W takim przypadku dodaj position: absolute;
w razie potrzeby. Wtyczka używa atrybutu danych lub opcji JavaScript, aby określić, gdzie umieścić element stamtąd.Wykonaj powyższe kroki, aby ustawić CSS dla jednej z poniższych opcji użycia.
Aby łatwo dodać zachowanie afiksu do dowolnego elementu, po prostu dodaj data-spy="affix"
do elementu, który chcesz szpiegować. Użyj przesunięć, aby określić, kiedy przełączać przypinanie elementu.
Wywołaj wtyczkę afiksu przez JavaScript:
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"
.
Nazwa | rodzaj | domyślna | opis |
---|---|---|---|
zrównoważyć | numer | funkcja | obiekt | 10 | Piksele do przesunięcia względem ekranu podczas obliczania pozycji przewijania. W przypadku podania pojedynczej liczby przesunięcie zostanie zastosowane zarówno w kierunku górnym, jak i dolnym. Aby zapewnić unikalne odsunięcie dolne i górne, po prostu podaj obiekt offset: { top: 10 } lub offset: { top: 10, bottom: 5 } . Użyj funkcji, gdy musisz dynamicznie obliczyć przesunięcie. |
cel | selektor | węzeł | element jQuery | window obiekt _ |
Określa docelowy element afiksu. |
.affix(options)
Aktywuje zawartość jako dołączoną zawartość. Akceptuje opcjonalne opcje object
.
.affix('checkPosition')
Ponownie oblicza stan afiksu na podstawie wymiarów, pozycji i pozycji przewijania odpowiednich elementów. Klasy .affix
, .affix-top
, i .affix-bottom
są dodawane lub usuwane z dołączonej treści zgodnie z nowym stanem. Ta metoda musi być wywoływana za każdym razem, gdy zmienią się wymiary dołączonej treści lub elementu docelowego, aby zapewnić prawidłowe pozycjonowanie dołączonej treści.
Wtyczka afiksu Bootstrapa udostępnia kilka zdarzeń do podłączenia do funkcjonalności afiksów.
Typ wydarzenia | Opis |
---|---|
afiks.bs.fiks | To zdarzenie jest wyzwalane bezpośrednio przed dołączeniem elementu. |
przyklejony.bs.affix | To zdarzenie jest wywoływane po dołączeniu elementu. |
affix-top.bs.affix | To zdarzenie jest wyzwalane bezpośrednio przed przymocowaniem elementu-top. |
afixed-top.bs.affix | To zdarzenie jest wywoływane po przymocowaniu elementu-top. |
affix-bottom.bs.affix | To zdarzenie jest uruchamiane bezpośrednio przed umieszczeniem elementu na dole. |
affixed-bottom.bs.affix | To zdarzenie jest uruchamiane po umieszczeniu elementu na dole. |