O modalności

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

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.

Korzystanie z bootstrap-modalu

Wywołaj modalne za pomocą javascript:

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

Opcje

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.

<a class = "btn" data-toggle = "modal" href = "#myModal"> Uruchom modalne </a>    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = „button” class = „close” data-dismiss = „modal” > × </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" data-dismiss = "modal"> Zamknij </a> _   
    <a href = "#" class = "btn btn-primary"> Zapisz zmiany </a>  
  </div>
</div>

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

$ ( '#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ś…
})

O listach rozwijanych

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.

Przykłady

Kliknij rozwijane łącza nawigacyjne na pasku nawigacyjnym i pigułki poniżej, aby przetestować listy rozwijane.

• Zwykły link
• Upuścić
  • Action
  • Another action
  • Something else here
  • Separated link
• Rozwijane 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Rozwijane 3
  • Action
  • Another action
  • Something else here
  • Separated link

Korzystanie z bootstrap-dropdown.js

Wywołaj listy rozwijane za pomocą javascript:

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

Narzut

Aby szybko dodać funkcję rozwijaną do dowolnego elementu, po prostu dodaj data-toggle="dropdown", a każde prawidłowe menu rozwijane ładowania początkowego zostanie automatycznie aktywowane.

<ul class = „pigułki nawigacyjne” > 
  <li class = "active" > <a href = "#"> Zwykły link </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1"> _   
      Upuścić
      <b klasa = "karetka" ></b> 
    </a>
    <ul class = "menu rozwijane" > 
      <li><a href = "#"> Akcja </a> </li> 
      <li><a href = "#"> Kolejne działanie </a></li> 
      <li><a href = "#"> Coś jeszcze tutaj </a></li> 
      <li klasa = "dzielnik" ></li> 
      <li><a href = "#"> Oddzielny link </a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = „pigułki nawigacyjne” > 
  <li class = "menu rozwijane" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "ścieżka/do/strony.html"> _    
      Upuścić
      <b klasa = "karetka" ></b> 
    </a>
    <ul class = "menu rozwijane" > 
      ...
    </ul>
  </li>
</ul>

Metody

$().dropdown()

Programowe API do aktywacji menu dla danego paska nawigacyjnego lub nawigacji w kartach.

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

Przykładowy pasek nawigacyjny z scrollspy

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

Korzystanie z pliku bootstrap-scrollspy.js

Zadzwoń do scrollspy przez javascript:

$ ( '#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ść).

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

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

Wydarzenia

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

Przykładowe zakładki

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

• Dom
• Profil
• Upuścić
  • @fat
  • @mdo

Korzystanie z pliku bootstrap-tab.js

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

<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
})

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.

Przykładowe użycie podpowiedzi

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

Korzystanie z bootstrap-tooltip.js

Uruchom podpowiedź za pomocą javascript:

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

Opcje

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.

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

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

.podpowiedź('ukryj')

Ukrywa podpowiedź elementu.

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

.tooltip('przełącz')

Przełącza podpowiedź elementu.

$ ( '#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

Przykład po najechaniu kursorem

Najedź na przycisk, aby uruchomić popover.

Korzystanie z pliku bootstrap-popover.js

Włącz popovery za pomocą javascript:

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

Opcje

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' )

O alertach

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

Przykładowe alerty

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

Korzystanie z pliku bootstrap-alert.js

Włącz odrzucanie alertu za pomocą 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ś…
})

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.

Przykładowe zastosowania

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

Korzystanie z pliku bootstrap-button.js

Włącz przyciski za pomocą 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.

<!-- Dodaj data-toggle="button", aby aktywować przełączanie jednym przyciskiem -->
<button class = "btn" data-toggle = "button" > Pojedynczy przełącznik </button>  
 
<!-- Dodaj data-toggle="buttons-checkbox" do przełączania stylu pola wyboru w grupie btn -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Lewo </button> 
  <button class = "btn" > Środkowy </button> 
  <button class = "btn" > Prawo </button> 
</div>
 
<!-- Dodaj data-toggle="buttons-radio" do przełączania stylu radia w btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Lewo </button> 
  <button class = "btn" > Środkowy </button> 
  <button class = "btn" > Prawo </button> 
</div>

Metody

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

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

<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 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 class = "btn" data-complete-text = "zakończono!" > ... </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:

Korzystanie z pliku bootstrap-collapse.js

Włącz przez JavaScript:

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

Opcje

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.

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

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ś…
})

O

Ogólna wtyczka do przechodzenia przez elementy. Karuzela.

Przykładowa karuzela

Obejrzyj pokaz slajdów poniżej.

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 ›

Korzystanie z pliku bootstrap-carousel.js

Zadzwoń przez javascript:

$ ( '.karuzela' ). karuzela ()

Opcje

Narzut

Atrybuty danych są używane dla poprzedniej i następnej kontroli. Sprawdź przykładowy znacznik poniżej.

<div id = klasa „myCarousel” = „slajd karuzeli” >  
  <!-- 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>

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.

O

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

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:

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

Opcje

Narzut

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

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

Metody

.typeahead(opcje)

Inicjuje dane wejściowe z wyprzedzeniem.