Visão geral

Individual ou compilado

Os plugins podem ser incluídos individualmente (usando *.jsarquivos individuais do Bootstrap), ou todos de uma vez (usando bootstrap.jsou o minified bootstrap.min.js).

Atributos de dados

Você pode usar todos os plugins do Bootstrap puramente por meio da API de marcação sem escrever uma única linha de JavaScript. Esta é a API de primeira classe do Bootstrap e deve ser sua primeira consideração ao usar um plugin.

Dito isso, em algumas situações, pode ser desejável desativar essa funcionalidade. Portanto, também fornecemos a capacidade de desabilitar a API de atributo de dados desvinculando todos os eventos no documento com namespace data-api. Isso se parece com isso:

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

Como alternativa, para segmentar um plug-in específico, basta incluir o nome do plug-in como um namespace junto com o namespace data-api assim:

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

API programática

Também acreditamos que você deve ser capaz de usar todos os plugins Bootstrap puramente por meio da API JavaScript. Todas as APIs públicas são métodos únicos e encadeados e retornam a coleção em que atua.

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

Todos os métodos devem aceitar um objeto de opções opcional, uma string que tem como alvo um método específico ou nada (que inicia um plugin com comportamento padrão):

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

Cada plugin também expõe seu construtor bruto em uma Constructorpropriedade: $.fn.popover.Constructor. Se você quiser obter uma instância de plug-in específica, recupere-a diretamente de um elemento: $('[rel="popover"]').data('popover').

Configurações padrão

Você pode alterar as configurações padrão de um plug-in modificando o Constructor.DEFAULTSobjeto do plug-in:

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

Sem conflito

Às vezes é necessário usar plugins do Bootstrap com outros frameworks de UI. Nessas circunstâncias, colisões de namespace podem ocorrer ocasionalmente. Se isso acontecer, você pode chamar .noConflicto plugin para o qual deseja reverter o valor.

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

Eventos

O Bootstrap fornece eventos personalizados para ações exclusivas da maioria dos plugins. Geralmente, eles vêm na forma de infinitivo e particípio passado - onde o infinitivo (ex. show) é acionado no início de um evento e sua forma de particípio passado (ex. shown) é acionada na conclusão de uma ação.

A partir da versão 3.0.0, todos os eventos do Bootstrap têm namespace.

Todos os eventos infinitivos fornecem preventDefaultfuncionalidade. Isso fornece a capacidade de interromper a execução de uma ação antes que ela comece.

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

Desinfetante

As dicas de ferramentas e os popovers usam nosso desinfetante integrado para limpar as opções que aceitam HTML.

O whiteListvalor padrão é o seguinte:

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: []
}

Se você quiser adicionar novos valores a esse padrão whiteList, faça o seguinte:

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)

Se você deseja ignorar nosso desinfetante porque prefere usar uma biblioteca dedicada, por exemplo DOMPurify , faça o seguinte:

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

Números de versão

A versão de cada um dos plugins jQuery do Bootstrap pode ser acessada através da VERSIONpropriedade do construtor do plugin. Por exemplo, para o plug-in de dica de ferramenta:

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

Sem fallbacks especiais quando o JavaScript está desabilitado

Os plugins do Bootstrap não retornam de forma particularmente graciosa quando o JavaScript está desabilitado. Se você se preocupa com a experiência do usuário nesse caso, use <noscript>para explicar a situação (e como reativar o JavaScript) para seus usuários e/ou adicione seus próprios fallbacks personalizados.

Transições transição.js

Sobre transições

Para efeitos de transição simples, inclua transition.jsuma vez ao lado dos outros arquivos JS. Se você estiver usando o compilado (ou minificado) bootstrap.js, não há necessidade de incluí-lo - ele já está lá.

O que está dentro

Transition.js é um auxiliar básico para transitionEndeventos, bem como um emulador de transição CSS. Ele é usado por outros plugins para verificar o suporte de transição CSS e capturar transições suspensas.

Desativando transições

As transições podem ser desativadas globalmente usando o seguinte snippet de JavaScript, que deve vir após transition.js(ou bootstrap.jsou bootstrap.min.js, conforme o caso) ser carregado:

$.support.transition = false

Modais modal.js

Os modais são prompts de diálogo simplificados, mas flexíveis, com a funcionalidade mínima necessária e padrões inteligentes.

Devido à forma como o HTML5 define sua semântica, o autofocusatributo HTML não tem efeito nos modais do Bootstrap. Para obter o mesmo efeito, use algum JavaScript personalizado:

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

Exemplos

Exemplo estático

Um modal renderizado com cabeçalho, corpo e conjunto de ações no rodapé.

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

Demonstração ao vivo

Alterne um modal via JavaScript clicando no botão abaixo. Ele deslizará para baixo e desaparecerá do topo da página.

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

Tamanhos opcionais

Os modais têm dois tamanhos opcionais, disponíveis por meio de classes modificadoras para serem colocadas em um arquivo .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>

Remover animação

Para modais que simplesmente aparecem em vez de aparecer gradualmente, remova a .fadeclasse de sua marcação modal.

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

Usando o sistema de grade

Para tirar vantagem do sistema de grade do Bootstrap dentro de um modal, apenas aninhe .rows dentro do .modal-bodye então use as classes normais do sistema de grade.

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

Variando o conteúdo modal com base no botão de disparo

Tem um monte de botões que acionam o mesmo modal, apenas com conteúdos ligeiramente diferentes? Use event.relatedTargete atributos HTMLdata-* (possivelmente via jQuery ) para variar o conteúdo do modal dependendo de qual botão foi clicado. Consulte os documentos do Modal Events para obter detalhes sobre 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)
})

Uso

O plug-in modal alterna seu conteúdo oculto sob demanda, por meio de atributos de dados ou JavaScript. Ele também adiciona .modal-openao <body>comportamento de rolagem padrão para substituir e gera um .modal-backdroppara fornecer uma área de clique para dispensar os modais mostrados ao clicar fora do modal.

Por atributos de dados

Ative um modal sem escrever JavaScript. Definido data-toggle="modal"em um elemento do controlador, como um botão, junto com um data-target="#foo"ou href="#foo"para direcionar um modal específico para alternar.

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

Por JavaScript

Chame um modal com id myModalcom uma única linha de JavaScript:

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

Opções

As opções podem ser passadas por meio de atributos de dados ou JavaScript. Para atributos de dados, anexe o nome da opção a data-, como em data-backdrop="".

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

Métodos

.modal(options)

Ativa seu conteúdo como um modal. Aceita opções opcionais object.

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

.modal('toggle')

Alterna manualmente um modal. Retorna ao chamador antes que o modal tenha sido mostrado ou ocultado (ou seja, antes que o evento shown.bs.modalor hidden.bs.modalocorra).

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

.modal('show')

Abre manualmente um modal. Retorna ao chamador antes que o modal seja realmente mostrado (ou seja, antes que o shown.bs.modalevento ocorra).

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

.modal('hide')

Oculta manualmente um modal. Retorna ao chamador antes que o modal tenha sido realmente oculto (ou seja, antes que o hidden.bs.modalevento ocorra).

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

.modal('handleUpdate')

Reajusta o posicionamento do modal para contrariar uma barra de rolagem caso apareça alguma, o que faria o modal pular para a esquerda.

Necessário apenas quando a altura do modal muda enquanto está aberto.

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

Eventos

A classe modal do Bootstrap expõe alguns eventos para conexão com a funcionalidade modal.

Todos os eventos modais são disparados no próprio modal (ou seja, no <div class="modal">).

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

Listas suspensas dropdown.js

Exemplos

Adicione menus suspensos a quase tudo com este plug-in simples, incluindo a barra de navegação, guias e pílulas.

Dentro de uma barra de navegação

Dentro de pílulas

Uso

Por meio de atributos de dados ou JavaScript, o plug-in suspenso alterna o conteúdo oculto (menus suspensos) alternando a .openclasse no item da lista pai.

Em dispositivos móveis, abrir um menu suspenso adiciona uma .dropdown-backdropárea de toque para fechar menus suspensos ao tocar fora do menu, um requisito para suporte adequado ao iOS. Isso significa que mudar de um menu suspenso aberto para um menu suspenso diferente requer um toque extra no celular.

Observação: o data-toggle="dropdown"atributo é usado para fechar menus suspensos em um nível de aplicativo, portanto, é uma boa ideia sempre usá-lo.

Por atributos de dados

Adicione data-toggle="dropdown"a um link ou botão para alternar uma lista suspensa.

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

Para manter os URLs intactos com botões de link, use o data-targetatributo em vez de 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>

Por JavaScript

Chame as listas suspensas via JavaScript:

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

Opções

Nenhum

Métodos

$().dropdown('toggle')

Alterna o menu suspenso de uma determinada barra de navegação ou navegação com guias.

Eventos

Todos os eventos suspensos são disparados no .dropdown-menuelemento pai do .

Todos os eventos suspensos têm uma relatedTargetpropriedade, cujo valor é o elemento âncora de alternância.

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Exemplo na barra de navegação

O plugin ScrollSpy é para atualizar automaticamente os destinos de navegação com base na posição de rolagem. Role a área abaixo da barra de navegação e observe a mudança de classe ativa. Os subitens suspensos também serão destacados.

Uso

Requer posicionamento relativo

Não importa o método de implementação, o scrollspy requer o uso do position: relative;elemento que você está espionando. Na maioria dos casos este é o <body>. Ao fazer scrollspy em elementos diferentes do <body>, certifique-se de ter um heightconjunto e overflow-y: scroll;aplicado.

Por atributos de dados

Para adicionar facilmente o comportamento do scrollspy à sua navegação na barra superior, adicione data-spy="scroll"ao elemento que você deseja espionar (geralmente, isso seria o <body>). Em seguida, adicione o data-targetatributo com o ID ou classe do elemento pai de qualquer .navcomponente do 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>

Por JavaScript

Depois position: relative;de adicionar seu CSS, chame o scrollspy via JavaScript:

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

Métodos

.scrollspy('refresh')

Ao usar o scrollspy em conjunto com a adição ou remoção de elementos do DOM, você precisará chamar o método de atualização da seguinte forma:

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

Opções

As opções podem ser passadas por meio de atributos de dados ou JavaScript. Para atributos de dados, anexe o nome da opção a data-, como em data-offset="".

Eventos

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Guias alternáveis ​​tab.js

Guias de exemplo

Adicione a funcionalidade de guia rápida e dinâmica para fazer a transição entre painéis de conteúdo local, mesmo por meio de menus suspensos. Guias aninhadas não são suportadas.

Uso

Habilite as guias com guias via JavaScript (cada guia precisa ser ativada individualmente):

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

Você pode ativar guias individuais de várias maneiras:

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

Marcação

Você pode ativar uma navegação por guias ou pílulas sem escrever nenhum JavaScript simplesmente especificando data-toggle="tab"ou data-toggle="pill"em um elemento. Adicionar as classes navand nav-tabsà guia ulaplicará o estilo da guia Bootstrap , enquanto adicionar as classes navand nav-pillsaplicará o estilo de pílula .

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

Efeito de desvanecimento

Para fazer as guias aparecerem gradualmente, adicione .fadea cada .tab-pane. O primeiro painel de guias também deve .intornar visível o conteúdo inicial.

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

Métodos

$().tab

Ativa um elemento de guia e um contêiner de conteúdo. A guia deve ter um data-targetou um hrefdirecionamento para um nó de contêiner no DOM. Nos exemplos acima, as guias são os <a>s com data-toggle="tab"atributos.

.tab('show')

Seleciona a guia fornecida e mostra seu conteúdo associado. Qualquer outra guia selecionada anteriormente torna-se desmarcada e seu conteúdo associado fica oculto. Retorna ao chamador antes que o painel de guias tenha sido realmente mostrado (ou seja, antes que o shown.bs.tabevento ocorra).

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

Eventos

Ao mostrar uma nova guia, os eventos são acionados na seguinte ordem:

1. hide.bs.tab(na guia ativa atual)
2. show.bs.tab(na guia a ser exibida)
3. hidden.bs.tab(na aba ativa anterior, a mesma do hide.bs.tabevento)
4. shown.bs.tab(na guia recém-ativada recém-exibida, a mesma do show.bs.tabevento)

Se nenhuma guia já estiver ativa, os eventos hide.bs.tabe hidden.bs.tabnão serão acionados.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Dicas de ferramentas tooltip.js

Inspirado no excelente plugin jQuery.tipy escrito por Jason Frame; As dicas de ferramentas são uma versão atualizada, que não depende de imagens, usa CSS3 para animações e atributos de dados para armazenamento local de títulos.

Dicas de ferramentas com títulos de comprimento zero nunca são exibidas.

Exemplos

Passe o mouse sobre os links abaixo para ver dicas de ferramentas:

Dica de ferramenta estática

Quatro opções estão disponíveis: alinhamento superior, direito, inferior e alinhamento à esquerda.

Quatro direções

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

Uso

O plug-in de dica de ferramenta gera conteúdo e marcação sob demanda e, por padrão, coloca dicas de ferramenta após o elemento de acionamento.

Acione a dica de ferramenta via JavaScript:

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

Marcação

A marcação necessária para uma dica de ferramenta é apenas um dataatributo e titleno elemento HTML você deseja ter uma dica de ferramenta. A marcação gerada de uma dica de ferramenta é bastante simples, embora exija uma posição (por padrão, definida toppelo plug-in).

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

Opções

As opções podem ser passadas por meio de atributos de dados ou JavaScript. Para atributos de dados, anexe o nome da opção a data-, como em data-animation="".

Métodos

$().tooltip(options)

Anexa um manipulador de dica de ferramenta a uma coleção de elementos.

.tooltip('show')

Revela a dica de ferramenta de um elemento. Retorna ao chamador antes que a dica de ferramenta tenha sido mostrada (ou seja, antes que o shown.bs.tooltipevento ocorra). Isso é considerado um acionamento "manual" da dica de ferramenta. Dicas de ferramentas com títulos de comprimento zero nunca são exibidas.

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

.tooltip('hide')

Oculta a dica de ferramenta de um elemento. Retorna ao chamador antes que a dica de ferramenta tenha sido ocultada (ou seja, antes que o hidden.bs.tooltipevento ocorra). Isso é considerado um acionamento "manual" da dica de ferramenta.

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

.tooltip('toggle')

Alterna a dica de ferramenta de um elemento. Retorna ao chamador antes que a dica de ferramenta tenha sido mostrada ou ocultada (ou seja, antes que o evento shown.bs.tooltipou hidden.bs.tooltipocorra). Isso é considerado um acionamento "manual" da dica de ferramenta.

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

.tooltip('destroy')

Oculta e destrói a dica de ferramenta de um elemento. As dicas de ferramentas que usam delegação (que são criadas usando a selectoropção ) não podem ser destruídas individualmente em elementos acionadores descendentes.

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

Eventos

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Adicione pequenas sobreposições de conteúdo, como as do iPad, a qualquer elemento para abrigar informações secundárias.

Os popovers cujo título e conteúdo são de comprimento zero nunca são exibidos.

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

Exemplos

Popover estático

Quatro opções estão disponíveis: alinhamento superior, direito, inferior e alinhamento à esquerda.

Demonstração ao vivo

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

Quatro direções

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

Dispensar no próximo clique

Use o focusgatilho para dispensar popovers no próximo clique que o usuário fizer.

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

Uso

Habilite popovers via JavaScript:

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

Opções

As opções podem ser passadas por meio de atributos de dados ou JavaScript. Para atributos de dados, anexe o nome da opção a data-, como em data-animation="".

Métodos

$().popover(options)

Inicializa popovers para uma coleção de elementos.

.popover('show')

Revela o popover de um elemento. Retorna ao chamador antes que o popover tenha sido realmente mostrado (ou seja, antes que o shown.bs.popoverevento ocorra). Isso é considerado um acionamento "manual" do popover. Os popovers cujo título e conteúdo são de comprimento zero nunca são exibidos.

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

.popover('hide')

Oculta o popover de um elemento. Retorna ao chamador antes que o popover tenha sido ocultado (ou seja, antes que o hidden.bs.popoverevento ocorra). Isso é considerado um acionamento "manual" do popover.

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

.popover('toggle')

Alterna o popover de um elemento. Retorna ao chamador antes que o popover tenha sido exibido ou ocultado (ou seja, antes que o evento shown.bs.popoverou hidden.bs.popoverocorra). Isso é considerado um acionamento "manual" do popover.

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

.popover('destroy')

Esconde e destrói o popover de um elemento. Popovers que usam delegação (que são criados usando a selectoropção ) não podem ser destruídos individualmente em elementos de disparo descendentes.

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

Eventos

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Mensagens de alerta alert.js

Alertas de exemplo

Adicione a funcionalidade de dispensa a todas as mensagens de alerta com este plug-in.

Ao usar um .closebotão, ele deve ser o primeiro filho do .alert-dismissiblee nenhum conteúdo de texto pode vir antes dele na marcação.

Uso

Basta adicionar data-dismiss="alert"ao seu botão Fechar para fornecer automaticamente uma funcionalidade de fechamento de alerta. Fechar um alerta o remove do DOM.

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

Para que seus alertas usem animação ao fechar, certifique-se de que eles já tenham as classes .fadee aplicadas a eles..in

Métodos

$().alert()

Faz um alerta escutar eventos de clique em elementos descendentes que possuem o data-dismiss="alert"atributo. (Não é necessário ao usar a inicialização automática da API de dados.)

$().alert('close')

Fecha um alerta removendo-o do DOM. Se as classes .fadee .inestiverem presentes no elemento, o alerta desaparecerá antes de ser removido.

Eventos

O plugin de alerta do Bootstrap expõe alguns eventos para se conectar à funcionalidade de alerta.

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Botões button.js

Faça mais com botões. Controle os estados dos botões ou crie grupos de botões para mais componentes, como barras de ferramentas.

Stateful

Adicionar data-loading-text="Loading..."para usar um estado de carregamento em um botão.

Esse recurso está obsoleto desde a v3.3.5 e foi removido na v4.

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

Alternar simples

Adicionar data-toggle="button"para ativar a alternância em um único botão.

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

Caixa de seleção / Rádio

Adicione data-toggle="buttons"a uma .btn-groupcaixa de seleção ou entradas de rádio para permitir a alternância em seus respectivos estilos.

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

Métodos

$().button('toggle')

Alterna o estado de push. Dá ao botão a aparência de que foi ativado.

$().button('reset')

Redefine o estado do botão - troca o texto pelo texto original. Esse método é assíncrono e retorna antes que a redefinição seja realmente concluída.

$().button(string)

Troca o texto para qualquer estado de texto definido por dados.

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

Recolher colapso.js

Plugin flexível que utiliza um punhado de classes para facilitar o comportamento de alternância.

Exemplo

Clique nos botões abaixo para mostrar e ocultar outro elemento por meio de alterações de classe:

• .collapseesconde conteúdo
• .collapsingé aplicado durante as transições
• .collapse.inmostra o conteúdo

Você pode usar um link com o hrefatributo ou um botão com o data-targetatributo. Em ambos os casos, o data-toggle="collapse"é necessário.

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

Exemplo de acordeão

Estenda o comportamento de recolhimento padrão para criar um acordeão com o componente do painel.

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

Também é possível trocar .panel-bodys por .list-groups.

Uso

O plugin de colapso utiliza algumas classes para lidar com o trabalho pesado:

• .collapseesconde o conteúdo
• .collapse.inmostra o conteúdo
• .collapsingé adicionado quando a transição começa e removido quando termina

Essas classes podem ser encontradas em component-animations.less.

Por atributos de dados

Basta adicionar data-toggle="collapse"e data-targeta ao elemento para atribuir automaticamente o controle de um elemento dobrável. O data-targetatributo aceita um seletor CSS ao qual aplicar o recolhimento. Certifique-se de adicionar a classe collapseao elemento recolhível. Se você quiser que ele seja aberto por padrão, adicione a classe adicional in.

Para adicionar gerenciamento de grupo do tipo acordeão a um controle recolhível, adicione o atributo data data-parent="#selector". Consulte a demonstração para ver isso em ação.

Por JavaScript

Ative manualmente com:

$('.collapse').collapse()

Opções

As opções podem ser passadas por meio de atributos de dados ou JavaScript. Para atributos de dados, anexe o nome da opção a data-, como em data-parent="".

Métodos

.collapse(options)

Ativa seu conteúdo como um elemento recolhível. Aceita opções opcionais object.

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

.collapse('toggle')

Alterna um elemento recolhível para mostrado ou oculto. Retorna ao chamador antes que o elemento recolhível tenha realmente sido mostrado ou ocultado (ou seja, antes que o evento shown.bs.collapseor hidden.bs.collapseocorra).

.collapse('show')

Mostra um elemento recolhível. Retorna ao chamador antes que o elemento colapsável tenha sido realmente mostrado (ou seja, antes que o shown.bs.collapseevento ocorra).

.collapse('hide')

Oculta um elemento recolhível. Retorna ao chamador antes que o elemento colapsável tenha sido ocultado (ou seja, antes que o hidden.bs.collapseevento ocorra).

Eventos

A classe de recolhimento do Bootstrap expõe alguns eventos para conexão com a funcionalidade de recolhimento.

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carrossel carrossel.js

Um componente de apresentação de slides para percorrer elementos, como um carrossel. Carrosséis aninhados não são suportados.

Exemplos

Anterior Próximo

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

Legendas opcionais

Adicione legendas aos seus slides facilmente com o .carousel-captionelemento em qualquer arquivo .item. Coloque praticamente qualquer HTML opcional e ele será alinhado e formatado automaticamente.

Rótulo do primeiro slide

Nulla vitae elit libero, a pharetra augue mollis interdum.

Rótulo do segundo slide

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Rótulo do terceiro slide

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Anterior Próximo

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

Uso

Vários carrosséis

Os carrosséis exigem o uso de um idno recipiente mais externo (o .carousel) para que os controles do carrossel funcionem corretamente. Ao adicionar vários carrosséis ou ao alterar o id, certifique-se de atualizar os controles relevantes.

Por atributos de dados

Use atributos de dados para controlar facilmente a posição do carrossel. data-slideaceita as palavras-chave prevou next, que altera a posição do slide em relação à sua posição atual. Como alternativa, use data-slide-topara passar um índice de slide bruto para o carrossel data-slide-to="2", que muda a posição do slide para um índice específico começando com 0.

O data-ride="carousel"atributo é usado para marcar um carrossel como animado a partir do carregamento da página. Ele não pode ser usado em combinação com a inicialização JavaScript explícita (redundante e desnecessária) do mesmo carrossel.

Por JavaScript

Chame o carrossel manualmente com:

$('.carousel').carousel()

Opções

As opções podem ser passadas por meio de atributos de dados ou JavaScript. Para atributos de dados, anexe o nome da opção a data-, como em data-interval="".

Métodos

.carousel(options)

Inicializa o carrossel com opções opcionais objecte começa a percorrer os itens.

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

.carousel('cycle')

Percorre os itens do carrossel da esquerda para a direita.

.carousel('pause')

Interrompe o carrossel de percorrer os itens.

.carousel(number)

Alterna o carrossel para um quadro específico (baseado em 0, semelhante a uma matriz).

.carousel('prev')

Volta para o item anterior.

.carousel('next')

Alterna para o próximo item.

Eventos

A classe carrossel do Bootstrap expõe dois eventos para conectar-se à funcionalidade do carrossel.

Ambos os eventos têm as seguintes propriedades adicionais:

• direction: A direção na qual o carrossel está deslizando (ou "left"ou "right").
• relatedTarget: o elemento DOM que está sendo posicionado como o item ativo.

Todos os eventos de carrossel são disparados no próprio carrossel (ou seja, no <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Afixo afixo.js

Exemplo

O plugin afixo position: fixed;liga e desliga, emulando o efeito encontrado com position: sticky;. A subnavegação à direita é uma demonstração ao vivo do plug-in afixo.

Uso

Use o plug-in afixo por meio de atributos de dados ou manualmente com seu próprio JavaScript. Em ambas as situações, você deve fornecer CSS para o posicionamento e largura do seu conteúdo afixado.

Observação: não use o plug-in affix em um elemento contido em um elemento relativamente posicionado, como uma coluna puxada ou empurrada, devido a um bug de renderização do Safari .

Posicionamento via CSS

O plugin affix alterna entre três classes, cada uma representando um estado específico: .affix, .affix-top, e .affix-bottom. Você deve fornecer os estilos, com exceção de position: fixed;on .affix, para essas classes (independente deste plugin) para lidar com as posições reais.

Veja como o plugin afixo funciona:

1. Para começar, o plugin adiciona.affix-top para indicar que o elemento está em sua posição mais alta. Neste ponto, nenhum posicionamento CSS é necessário.
2. Rolar além do elemento que você deseja afixar deve acionar a afixação real. É aqui que .affixsubstitui .affix-tope define position: fixed;(fornecido pelo CSS do Bootstrap).
3. Se um deslocamento inferior for definido, a rolagem deve ser substituída .affixpor .affix-bottom. Como os deslocamentos são opcionais, definir um requer que você defina o CSS apropriado. Neste caso, adicione position: absolute;quando necessário. O plug-in usa o atributo de dados ou a opção JavaScript para determinar onde posicionar o elemento a partir daí.

Siga as etapas acima para definir seu CSS para qualquer uma das opções de uso abaixo.

Por atributos de dados

Para adicionar facilmente o comportamento do afixo a qualquer elemento, basta adicionar data-spy="affix"ao elemento que você deseja espionar. Use deslocamentos para definir quando alternar a fixação de um elemento.

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

Por JavaScript

Chame o plug-in afixo via JavaScript:

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

Opções

As opções podem ser passadas por meio de atributos de dados ou JavaScript. Para atributos de dados, anexe o nome da opção a data-, como em data-offset-top="200".

Métodos

.affix(options)

Ativa seu conteúdo como conteúdo afixado. Aceita opções opcionais object.

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

.affix('checkPosition')

Recalcula o estado do afixo com base nas dimensões, posição e posição de rolagem dos elementos relevantes. As classes .affix, .affix-tope .affix-bottomsão adicionadas ou removidas do conteúdo afixado de acordo com o novo estado. Este método precisa ser chamado sempre que as dimensões do conteúdo afixado ou do elemento alvo forem alteradas, para garantir o correto posicionamento do conteúdo afixado.

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

Eventos

O plug-in de afixo do Bootstrap expõe alguns eventos para conectar-se à funcionalidade de afixo.