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

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

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

Odkażacz

Etykietki narzędzi i popovery używają naszego wbudowanego narzędzia do czyszczenia, aby oczyścić opcje, które akceptują HTML.

Wartość domyślna whiteListjest następująca:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Jeśli chcesz dodać nowe wartości do tej wartości domyślnej whiteList, możesz wykonać następujące czynności:

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Jeśli chcesz ominąć nasz środek odkażający, ponieważ wolisz korzystać z dedykowanej biblioteki, na przykład DOMPurify , powinieneś wykonać następujące czynności:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

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

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.

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 wyłączyć globalnie 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.

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>

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

Zróżnicowana zawartość modalna w oparciu o przycisk wyzwalacza

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,

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

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

Metody

.modal(options)

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

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

.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.modallub ).hidden.bs.modal

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

.modal('show')

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

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

.modal('hide')

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

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

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

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

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Lista rozwijana dropdown.js

Przykłady

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

W pasku nawigacyjnym

W pigułkach

Stosowanie

Za pomocą atrybutów 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-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()

Opcje

Nic

Metody

$().dropdown('toggle')

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

Wydarzenia

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.

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

Stosowanie

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

Wydarzenia

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

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.

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

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>

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

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

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

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

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

Przykłady

Popover statyczny

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

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.

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

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

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

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

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.

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary">
  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.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  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.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 3
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> 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">
  ...
</button>

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

Zwiń Zwiń.js

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

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.

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

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

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

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.

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

Przykłady

Poprzedni Następny

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

Etykieta pierwszego slajdu

Nulla vitae elit libero, pharetra augue mollis interdum.

Etykieta drugiego slajdu

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etykieta trzeciego slajdu

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Poprzedni Następny

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

Stosowanie

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

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

Metody

.carousel(options)

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

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

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

Wydarzenia

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

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

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.