Przegląd

Indywidualne lub skompilowane

Wtyczki mogą być dołączane pojedynczo (przy użyciu pojedynczych *.jsplików Bootstrapa) lub wszystkie naraz (przy użyciu bootstrap.jslub zminifikowanego bootstrap.min.js).

Korzystanie ze skompilowanego JavaScript

Oba bootstrap.jsi bootstrap.min.jszawierają wszystkie wtyczki w jednym pliku. Uwzględnij tylko jeden.

Zależności wtyczek

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.

Atrybuty danych

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:

$(document).off('.data-api')

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

$(document).off('.alert.data-api')

Tylko jedna wtyczka na element za pośrednictwem atrybutów danych

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.

Programowy interfejs API

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

$('.btn.danger').button('toggle').addClass('fat')

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

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

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

Ustawienia domyślne

Możesz zmienić domyślne ustawienia wtyczki, modyfikując Constructor.DEFAULTSobiekt wtyczki:

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

Brak konfliktu

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

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

Wydarzenia

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ą preventDefaultfunkcjonalność. Daje to możliwość zatrzymania wykonywania akcji przed jej rozpoczęciem.

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

Numery wersji

Dostęp do wersji każdej z wtyczek Bootstrap jQuery można uzyskać za pośrednictwem VERSIONwłaściwości konstruktora wtyczki. Na przykład dla wtyczki podpowiedzi:

$.fn.tooltip.Constructor.VERSION // => "3.3.7"

Brak specjalnych rozwiązań awaryjnych, gdy JavaScript jest wyłączony

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.

Biblioteki zewnętrzne

Bootstrap oficjalnie nie obsługuje bibliotek JavaScript innych firm, takich jak Prototype lub jQuery UI. Pomimo .noConflictzdarzeń w przestrzeni nazw mogą występować problemy ze zgodnością, które trzeba naprawić samodzielnie.

Przejścia przejście.js

O przejściach

Aby uzyskać proste efekty przejścia, dołącz transition.jsraz obok innych plików JS. Jeśli używasz skompilowanego (lub zminimalizowanego) bootstrap.js, nie ma potrzeby dołączania tego — już tam jest.

Co jest w środku

Transition.js to podstawowy helper dla transitionEndzdarzeń, a także emulator przejścia CSS. Jest używany przez inne wtyczki do sprawdzania obsługi przejść CSS i wyłapywania zawieszonych przejść.

Wyłączanie 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.jsalbo bootstrap.min.js, w zależności od przypadku):

$.support.transition = false

Modals modal.js

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

Wiele otwartych modów nie jest obsługiwanych

Pamiętaj, aby nie otwierać modalu, gdy inny jest nadal widoczny. Pokazywanie więcej niż jednego modu na raz wymaga niestandardowego kodu.

Umieszczenie znaczników modalnych

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.

Zastrzeżenia dotyczące urządzeń mobilnych

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ę, autofocusatrybut HTML nie działa w modach Bootstrap. Aby osiągnąć ten sam efekt, użyj niestandardowego JavaScriptu:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Przykłady

Przykład statyczny

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

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Demo na żywo

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Uczyń modalności dostępnymi

Pamiętaj, aby dodać role="dialog"i aria-labelledby="...", odwołując się do tytułu modalnego, do .modali role="document"do .modal-dialogsamego siebie.

Dodatkowo możesz podać opis swojego modalnego okna dialogowego za pomocą aria-describedbyon .modal.

Osadzanie filmów z YouTube

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.

Opcjonalne rozmiary

Modale mają dwa opcjonalne rozmiary, dostępne za pośrednictwem klas modyfikatorów, które można umieścić na .modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Usuń animację

W przypadku modów, które po prostu pojawiają się, a nie pojawiają się w widoku, usuń .fadeklasę ze znaczników modalnych.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

Korzystanie z systemu siatki

Aby skorzystać z systemu siatek Bootstrap w ramach modalnego, wystarczy zagnieździć .rowje w obrębie .modal-bodyklas, a następnie użyć normalnych klas systemu siatek.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

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,

...więcej przycisków...
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Stosowanie

Wtyczka modalna przełącza Twoje ukryte treści na żądanie, za pomocą atrybutów danych lub JavaScript. Dodaje również .modal-opendo <body>zastąpienia domyślnego zachowania przewijania i generuje .modal-backdropobszar kliknięcia do odrzucania wyświetlanych modów w przypadku kliknięcia poza nim.

Poprzez atrybuty danych

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

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Przez JavaScript

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

$('#myModal').modal(options)

Opcje

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

Nazwa rodzaj domyślna opis
zasłona wartość logiczna lub ciąg'static' 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.
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 loadi wstrzyknięta do .modal-contentdiv. Jeśli używasz interfejsu API danych, możesz alternatywnie użyć hrefatrybutu, aby określić zdalne źródło. Przykład tego pokazano poniżej:

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

Metody

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

$('#myModal').modal({
  keyboard: false
})

Ręcznie przełącza modalny. Powraca do wywołującego, zanim modalny został faktycznie pokazany lub ukryty (tj. przed wystąpieniem zdarzenia shown.bs.modallub ).hidden.bs.modal

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

Ręcznie otwiera mod. Powraca do wywołującego, zanim modalny został faktycznie pokazany (tj. przed shown.bs.modalwystąpieniem zdarzenia).

$('#myModal').modal('show')

Ręcznie ukrywa modalny. Powraca do wywołującego, zanim modalny został faktycznie ukryty (tj. przed hidden.bs.modalwystąpieniem zdarzenia).

$('#myModal').modal('hide')

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.

$('#myModal').modal('handleUpdate')

Wydarzenia

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 showwywołaniu metody wystąpienia. W przypadku kliknięcia kliknięty element jest dostępny jako relatedTargetwł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 relatedTargetwłaściwość zdarzenia.
hide.bs.modal To zdarzenie jest wywoływane natychmiast po hidewywoł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ą remoteopcji.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Lista rozwijana dropdown.js

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

W pasku nawigacyjnym

W pigułkach

Poprzez atrybuty danych lub JavaScript, rozwijana wtyczka przełącza ukrytą zawartość (menu rozwijane), przełączając .openklasę w elemencie listy nadrzędnej.

Na urządzeniach mobilnych otwarcie listy rozwijanej dodaje obszar .dropdown-backdropjako 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ć.

Poprzez atrybuty danych

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

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Aby zachować nienaruszone adresy URL za pomocą przycisków linków, użyj data-targetatrybutu zamiast href="#".

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Przez JavaScript

Wywołaj listy rozwijane za pomocą JavaScript:

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

data-toggle="dropdown"nadal wymagane

Niezależ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

Przełącza menu rozwijane danego paska nawigacyjnego lub nawigacji na kartach.

Wszystkie zdarzenia rozwijane są uruchamiane w .dropdown-menuelemencie nadrzędnym .

Wszystkie zdarzenia rozwijane mają relatedTargetwł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ć).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Przykład w pasku nawigacyjnym

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

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

Stosowanie

Wymaga nawigacji Bootstrap

Scrollspy obecnie wymaga użycia komponentu Bootstrap nav do prawidłowego podświetlania aktywnych linków.

Wymagane identyfikowalne cele identyfikacyjne

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

Elementy inne niż :visibledocelowe zostały zignorowane

Elementy docelowe, które nie są :visiblezgodne z jQuery , zostaną zignorowane, a odpowiadające im elementy nawigacyjne nigdy nie zostaną podświetlone.

Wymaga względnego pozycjonowania

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 heightustawiony i overflow-y: scroll;zastosowany.

Poprzez atrybuty danych

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-targetatrybut z identyfikatorem lub klasą elementu nadrzędnego dowolnego .navkomponentu Bootstrap.

body {
  position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Przez JavaScript

Po dodaniu position: relative;kodu CSS wywołaj scrollspy przez JavaScript:

$('body').scrollspy({ target: '#navbar-example' })

Metody

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

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

Opcje

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

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

Wydarzenia

Typ wydarzenia Opis
aktywuj.bs.scrollspy Zdarzenie to uruchamia się za każdym razem, gdy scrollspy aktywuje nowy przedmiot.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Przełączane karty tab.js

Przykładowe zakładki

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.

Rozszerza nawigację na kartach

Ta wtyczka rozszerza komponent nawigacji z zakładkami, aby dodać obszary z zakładkami.

Stosowanie

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

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

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

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

Narzut

Możesz aktywować nawigację po karcie lub pigułce bez pisania kodu JavaScript, po prostu określając data-toggle="tab"lub data-toggle="pill"na elemencie. Dodanie klas navi do zakładki zastosuje stylizację zakładki Bootstrap , natomiast dodanie klas i zastosuje stylizację pigułki .nav-tabsulnavnav-pills

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

Efekt zanikania

Aby karty pojawiały się, dodaj .fadedo każdego .tab-pane. Pierwszy panel z zakładkami musi również .inuwidaczniać początkową zawartość.

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

Metody

$().tab

Aktywuje element tab i kontener treści. Karta powinna mieć węzeł kontenera data-targetlub docelowy w DOM. hrefW 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.tabwystąpieniem zdarzenia).

$('#someTab').tab('show')

Wydarzenia

Po wyświetleniu nowej karty zdarzenia są uruchamiane w następującej kolejności:

  1. hide.bs.tab(na aktualnie aktywnej zakładce)
  2. show.bs.tab(w zakładce do pokazania)
  3. hidden.bs.tab(na poprzedniej aktywnej zakładce, taka sama jak dla hide.bs.tabwydarzenia)
  4. shown.bs.tab(na nowo aktywnej właśnie wyświetlonej zakładce, takiej samej jak dla show.bs.tabwydarzenia)

Jeżeli żadna zakładka nie była już aktywna, to zdarzenia hide.bs.tabi hidden.bs.tabnie 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.targeti 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.targeti 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.targeti event.relatedTargetdo 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.targeti event.relatedTargetdo kierowania odpowiednio na poprzednią aktywną kartę i nową aktywną kartę.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Etykietki narzędzi tooltip.js

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.

Przykłady

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.

Etykietka statyczna

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

Cztery kierunki

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

Funkcja akceptacji

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-toggleatrybutów:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Stosowanie

Wtyczka podpowiedzi generuje treść i znaczniki na żądanie i domyślnie umieszcza podpowiedzi po elemencie wyzwalacza.

Uruchom podpowiedź za pomocą JavaScript:

$('#example').tooltip(options)

Narzut

Wymagane znaczniki podpowiedzi to tylko dataatrybut i titleelement HTML, który chcesz mieć podpowiedź. Wygenerowany znacznik podpowiedzi jest dość prosty, chociaż wymaga pozycji (domyślnie ustawionej topprzez wtyczkę).

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Linki wielowierszowe

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

Etykiety narzędzi w grupach przycisków, grupach wejściowych i tabelach wymagają specjalnych ustawień

Używając podpowiedzi na elementach wewnątrz a .btn-grouplub .input-groupna 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).

Nie próbuj wyświetlać podpowiedzi na ukrytych elementach

Wywołanie $(...).tooltip('show'), gdy element docelowy jest display: none;, spowoduje nieprawidłowe położenie podpowiedzi.

Dostępne podpowiedzi dla użytkowników klawiatury i technologii wspomagających

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.

Etykietki narzędzi na wyłączonych elementach wymagają elementów opakowujących

Aby dodać podpowiedź do elementu disabledlub .disabled, umieść element wewnątrz a i zamiast tego <div>zastosuj do niego podpowiedź .<div>

Opcje

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

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: container: 'body'. Ta opcja jest szczególnie przydatna, ponieważ pozwala umieścić etykietkę narzędzia w przepływie dokumentu w pobliżu elementu wyzwalającego — co zapobiega oddalaniu się etykiety narzędzia od elementu wyzwalającego podczas zmiany rozmiaru okna.

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 }

html logiczne fałszywy Wstaw kod HTML do podpowiedzi. Jeśli false, metoda jQuery textzostanie 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.
Po określeniu „auto” dynamicznie zmieni orientację podpowiedzi. Na przykład, jeśli umieszczenie jest „automatycznie w lewo”, etykietka będzie wyświetlana w miarę możliwości po lewej stronie, w przeciwnym razie będzie wyświetlana po prawej stronie.

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 thisjest ustawiony na instancję podpowiedzi.

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 titlezostanie wstrzyknięta do .tooltip-inner.

.tooltip-arrowstanie się strzałką w podpowiedzi.

Najbardziej zewnętrzny element opakowania powinien mieć .tooltipklasę.

tytuł ciąg | funkcjonować ''

Domyślna wartość tytułu, jeśli titleatrybut nie jest obecny.

Jeśli podana zostanie funkcja, zostanie wywołana z thisodwołaniem ustawionym na element, do którego dołączona jest podpowiedź.

cyngiel strunowy „skup się na najechaniu” Jak uruchamia się podpowiedź - kliknij | najedź | skupić | podręcznik. Możesz przekazać wiele wyzwalaczy; oddziel je spacją. manualnie 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: viewport: '#viewport'lub{ "selector": "#viewport", "padding": 0 }

Jeśli podano funkcję, jest ona wywoływana z węzłem DOM elementu wyzwalającego jako jedynym argumentem. Kontekst thisjest ustawiony na instancję podpowiedzi.

Atrybuty danych dla poszczególnych podpowiedzi

Opcje dla poszczególnych podpowiedzi można alternatywnie określić za pomocą atrybutów danych, jak wyjaśniono powyżej.

Metody

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

$('#element').tooltip('show')

.tooltip('hide')

Ukrywa podpowiedź elementu. Wraca do wywołującego, zanim podpowiedź została faktycznie ukryta (tj. przed hidden.bs.tooltipwystąpieniem zdarzenia). Jest to uważane za „ręczne” wyzwalanie podpowiedzi.

$('#element').tooltip('hide')

.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.tooltiplub ). hidden.bs.tooltipJest to uważane za „ręczne” wyzwalanie podpowiedzi.

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

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

$('#element').tooltip('destroy')

Wydarzenia

Typ wydarzenia Opis
pokaż.bs.podpowiedź To zdarzenie jest wyzwalane natychmiast po showwywoł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 hidewywoł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.tooltipzdarzeniu, gdy szablon podpowiedzi został dodany do DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovery popover.js

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.

Zależność wtyczki

Popovery wymagają, aby wtyczka podpowiedzi była dołączona do twojej wersji Bootstrap.

Funkcja akceptacji

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-toggleatrybutów:

$(function () {
  $('[data-toggle="popover"]').popover()
})

Popovery w grupach przycisków, grupach wejściowych i tabelach wymagają specjalnych ustawień

Używając okienek popover na elementach wewnątrz a .btn-grouplub .input-groupna 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).

Nie próbuj pokazywać popoverów na ukrytych elementach

Wywołanie $(...).popover('show'), gdy element docelowy jest display: none;, spowoduje, że popover będzie nieprawidłowo pozycjonowany.

Popovery na wyłączonych elementach wymagają wrapperów

Aby dodać popover do elementu disabledlub , umieść go wewnątrz a i zastosuj do niego popover ..disabled<div><div>

Linki wielowierszowe

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

Przykłady

Popover statyczny

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

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover w prawo

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover na dole

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover w lewo

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Demo na żywo

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Cztery kierunki

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

Odrzuć przy następnym kliknięciu

Użyj focuswyzwalacza, aby odrzucić wyskakujące okienka przy następnym kliknięciu, które wykona użytkownik.

Konkretne znaczniki wymagane do odrzucenia przy następnym kliknięciu

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

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

Stosowanie

Włącz popovery przez JavaScript:

$('#example').popover(options)

Opcje

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

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: container: 'body'. Ta opcja jest szczególnie przydatna, ponieważ pozwala umieścić okienko popover w przepływie dokumentu w pobliżu elementu wyzwalającego — co zapobiegnie oddalaniu się okienka popover od elementu wyzwalającego podczas zmiany rozmiaru okna.

zawartość ciąg | funkcjonować ''

Domyślna wartość treści, jeśli data-contentatrybut nie jest obecny.

Jeśli podana zostanie funkcja, zostanie wywołana z thisreferencją ustawioną na element, do którego dołączony jest popover.

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 }

html logiczne fałszywy Wstaw kod HTML do popovera. Jeśli false, metoda jQuery textzostanie 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.
Po określeniu „auto” dynamicznie zmieni orientację popovera. Na przykład, jeśli umieszczenie jest „automatycznie w lewo”, popover będzie wyświetlany po lewej stronie, jeśli to możliwe, w przeciwnym razie będzie wyświetlany po prawej stronie.

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 thisjest ustawiony na instancję popover.

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 titlezostanie wstrzyknięty do .popover-title.

Popover contentzostanie wstrzyknięty do .popover-content.

.arrowstanie się strzałką popovera.

Najbardziej zewnętrzny element opakowania powinien mieć .popoverklasę.

tytuł ciąg | funkcjonować ''

Domyślna wartość tytułu, jeśli titleatrybut nie jest obecny.

Jeśli podana zostanie funkcja, zostanie wywołana z thisreferencją ustawioną na element, do którego dołączony jest popover.

cyngiel strunowy 'Kliknij' Jak uruchamia się popover - kliknij | najedź | skupić | podręcznik. Możesz przekazać wiele wyzwalaczy; oddziel je spacją. manualnie 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: viewport: '#viewport'lub{ "selector": "#viewport", "padding": 0 }

Jeśli podano funkcję, jest ona wywoływana z węzłem DOM elementu wyzwalającego jako jedynym argumentem. Kontekst thisjest ustawiony na instancję popover.

Atrybuty danych dla poszczególnych okienek popover

Opcje dla poszczególnych okienek popover można alternatywnie określić za pomocą atrybutów danych, jak wyjaśniono powyżej.

Metody

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

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

.popover('hide')

Ukrywa popover elementu. Powraca do dzwoniącego, zanim popover został faktycznie ukryty (tj. przed hidden.bs.popoverwystąpieniem zdarzenia). Jest to uważane za „ręczne” wyzwalanie popover.

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

.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.popoverlub ). hidden.bs.popoverJest to uważane za „ręczne” wyzwalanie popover.

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

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

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

Wydarzenia

Typ wydarzenia Opis
pokaż.bs.popover To zdarzenie jest wyzwalane natychmiast po showwywoł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 hidewywoł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.popoverzdarzeniu, gdy szablon popover został dodany do DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Komunikaty alertów alert.js

Przykładowe alerty

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

Gdy używasz .closeprzycisku, musi on być pierwszym elementem podrzędnym .alert-dismissiblei żadna treść tekstowa nie może znajdować się przed nim w znaczniku.

Stosowanie

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.

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Aby Twoje alerty używały animacji podczas zamykania, upewnij się, że mają już przypisane do nich klasy .fadei ..in

Metody

$().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 .fadei .insą obecne w elemencie, alert zniknie, zanim zostanie usunięty.

Wydarzenia

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 closewywołaniu metody wystąpienia.
zamknięty.bs.alert To zdarzenie jest wywoływane po zamknięciu alertu (poczeka na zakończenie przejścia CSS).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Przyciski button.js

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.

Kompatybilność z różnymi przeglądarkami

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 .

Stanowy

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.

Użyj dowolnego stanu!

Na potrzeby tej demonstracji używamy data-loading-texti $().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 .

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

Pojedynczy przełącznik

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

Wstępnie przełączone przyciski potrzebują .activeiaria-pressed="true"

W przypadku wstępnie przełączanych przycisków musisz dodać .activeklasę i aria-pressed="true"atrybut do buttonsiebie.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

Pole wyboru / Radio

Dodaj data-toggle="buttons"do .btn-groupzawierającego pola wyboru lub wejścia radiowe, aby umożliwić przełączanie w ich odpowiednich stylach.

Potrzebne są wstępnie wybrane opcje.active

W przypadku wstępnie wybranych opcji musisz samodzielnie dodać .activeklasę do danych wejściowych label.

Wizualny stan sprawdzania aktualizowany tylko po kliknięciu

Jeśli zaznaczony stan przycisku pola wyboru zostanie zaktualizowany bez wywołania clickzdarzenia na przycisku (np. poprzez <input type="reset">lub poprzez ustawienie checkedwłaściwości wejścia), będziesz musiał samodzielnie przełączyć .activeklasę na wejście label.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

Metody

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

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

Upadek Zwiń.js

Elastyczna wtyczka, która wykorzystuje kilka klas do łatwego przełączania zachowań.

Zależność wtyczki

Zwiń wymaga włączenia wtyczki przejścia do Twojej wersji Bootstrap.

Przykład

Kliknij poniższe przyciski, aby pokazać i ukryć inny element poprzez zmiany klasy:

  • .collapseukrywa treść
  • .collapsingjest stosowany podczas przejść
  • .collapse.inpokazuje treść

Możesz użyć linku z hrefatrybutem lub przycisku z data-targetatrybutem. W obu przypadkach data-toggle="collapse"jest to wymagane.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Przykład akordeonu

Rozszerz domyślne zachowanie zwijania, aby utworzyć harmonijkę z komponentem panelu.

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 skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Istnieje również możliwość zamiany .panel-bodys na .list-groups.

  • Bootply
  • One itmus ac facilin
  • Second eros

Udostępnij opcje rozwijania/zwijania

Pamiętaj, aby dodać aria-expandeddo 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 inklasy, 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-targetatrybut wskazuje na idselektor – możesz dodać dodatkowy aria-controlsatrybut do elementu kontrolnego, zawierający idelement 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.

Stosowanie

Wtyczka zwijania wykorzystuje kilka klas do obsługi podnoszenia ciężkich przedmiotów:

  • .collapseukrywa treść
  • .collapse.inpokazuje treść
  • .collapsingjest dodawany po rozpoczęciu przejścia i usuwany po jego zakończeniu

Klasy te można znaleźć w component-animations.less.

Poprzez atrybuty danych

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

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

Przez JavaScript

Włącz ręcznie za pomocą:

$('.collapse').collapse()

Opcje

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

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 panelklasy)
przełącznik logiczne PRAWDA Przełącza zwijany element przy wywołaniu

Metody

.collapse(options)

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

$('#myCollapsible').collapse({
  toggle: false
})

.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.collapselub ).hidden.bs.collapse

.collapse('show')

Pokazuje składany element. Powraca do wywołującego, zanim zwijany element został faktycznie pokazany (tj. przed shown.bs.collapsewystąpieniem zdarzenia).

.collapse('hide')

Ukrywa składany element. Wraca do wywołującego, zanim zwijalny element został faktycznie ukryty (tj. przed hidden.bs.collapsewystąpieniem zdarzenia).

Wydarzenia

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 showwywoł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 hidewywoł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).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Karuzela karuzela.js

Komponent pokazu slajdów do przechodzenia między elementami, np. karuzela. Zagnieżdżone karuzele nie są obsługiwane.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Opcjonalne podpisy

Łatwo dodawaj podpisy do slajdów za pomocą .carousel-captionelementu w dowolnym .item. Umieść tam prawie dowolny opcjonalny kod HTML, a zostanie on automatycznie wyrównany i sformatowany.

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

Wiele karuzeli

Aby elementy sterujące karuzeli działały prawidłowo, karuzele wymagają użycia symbolu idna najbardziej zewnętrznym pojemniku (the ). .carouselDodając wiele karuzeli lub zmieniając karuzele id, pamiętaj o zaktualizowaniu odpowiednich elementów sterujących.

Poprzez atrybuty danych

Użyj atrybutów danych, aby łatwo kontrolować pozycję karuzeli. data-slideakceptuje słowa kluczowe prevlub next, co zmienia pozycję slajdu w stosunku do jego aktualnej pozycji. Możesz też użyć , data-slide-toaby przekazać nieprzetworzony indeks slajdu do karuzeli data-slide-to="2", 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.

Przez JavaScript

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

$('.carousel').carousel()

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

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

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

Przechodzi przez elementy karuzeli od lewej do prawej.

Zatrzymuje karuzelę przed przechodzeniem przez elementy.

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

Przechodzi do poprzedniej pozycji.

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 slidewywołaniu metody wystąpienia.
karuzela.bs To zdarzenie jest uruchamiane, gdy karuzela zakończy przejście slajdu.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Afiks afiks.js

Przykład

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.


Stosowanie

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 .

Pozycjonowanie przez CSS

Wtyczka afiksu przełącza między trzema klasami, z których każda reprezentuje określony stan: .affix, .affix-topi .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:

  1. Na początek wtyczka dodaje .affix-top, aby wskazać, że element znajduje się na najwyższej pozycji. W tym momencie nie jest wymagane pozycjonowanie CSS.
  2. Przewijanie poza element, który chcesz umieścić, powinno wywołać faktyczne umieszczenie. W tym miejscu .affixzastępuje .affix-topi ustawia position: fixed;(dostarczone przez CSS Bootstrap).
  3. Jeśli zdefiniowano przesunięcie dolne, przewijanie poza nim powinno zostać zastąpione .affixprzez .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.

Poprzez atrybuty danych

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.

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

Przez JavaScript

Wywołaj wtyczkę afiksu przez JavaScript:

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

Opcje

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

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 windowobiekt _ Określa docelowy element afiksu.

Metody

.affix(options)

Aktywuje zawartość jako dołączoną zawartość. Akceptuje opcjonalne opcje object.

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

Ponownie oblicza stan afiksu na podstawie wymiarów, pozycji i pozycji przewijania odpowiednich elementów. Klasy .affix, .affix-top, i .affix-bottomsą 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.

$('#myAffix').affix('checkPosition')

Wydarzenia

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.