Framework ANTT

Você está aqui:

Visão Geral

Adicionando os JavaScripts em um documento HTML5

<head>
	...
	<script src="js/min/jquery.min.js"></script>
	<script src="js/jquery-ui.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/custom.min.js"></script>
	...
</head>

<body>
	...
	<script src="js/min/jquery.min.js"></script>
	<script src="js/jquery-ui.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/custom.min.js"></script>
	...
</body>

Modals

Padrão

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#m-1">Texto 1</button>
<div class="modal fade" id="m-1" tabindex="-1" role="dialog" aria-labelledby="ml-1">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="ml-1">Texto 1</h4>
			</div>
			<div class="modal-body">
				<p>Texto texto.</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
				<button type="button" class="btn btn-primary">Texto 2</button>
			</div>
		</div>
	</div>
</div>

Tamanhos

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#m-2">Grande</button>
<div class="modal fade" id="m-2" tabindex="-1" role="dialog" aria-labelledby="ml-2">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="ml-2">Texto 1</h4>
			</div>
			<div class="modal-body">
				<p>Texto texto.</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
				<button type="button" class="btn btn-primary">Texto 2</button>
			</div>
		</div>
	</div>
</div>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#m-3">Pequeno</button>
<div class="modal fade" id="m-3" tabindex="-1" role="dialog" aria-labelledby="ml-3">
	<div class="modal-dialog modal-sm" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="ml-3">Texto 1</h4>
			</div>
			<div class="modal-body">
				<p>Texto texto.</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
				<button type="button" class="btn btn-primary">Texto 2</button>
			</div>
		</div>
	</div>
</div>

Remoção da animação

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#m-4">Texto 2</button>
<div class="modal" id="m-4" tabindex="-1" role="dialog" aria-labelledby="ml-4">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="ml-4">Texto 1</h4>
			</div>
			<div class="modal-body">
				<p>Texto texto.</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
				<button type="button" class="btn btn-primary">Texto 2</button>
			</div>
		</div>
	</div>
</div>

Sistema de grid

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#m-5">Texto 1</button>
<div class="modal" id="m-5" tabindex="-1" role="dialog" aria-labelledby="ml-5">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="ml-5">Texto 1</h4>
			</div>
			<div class="modal-body">
				<div class="container-fluid">
					<div class="row">
						<div class="col-md-8">Texto 2</div>
						<div class="col-md-8 col-md-offset-8">Texto 3</div>
					</div>
					<div class="row">
						<div class="col-md-6 col-md-offset-6">Texto 4</div>
						<div class="col-md-4 col-md-offset-8">Texto 5</div>
					</div>
					<div class="row">
						<div class="col-md-12 col-md-offset-6">Texto 6</div>
					</div>
					<div class="row">
						<div class="col-sm-18">
							Texto 7
							<div class="row">
								<div class="col-xs-16 col-sm-12">Texto 8</div>
								<div class="col-xs-8 col-sm-12">Texto 9</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
				<button type="button" class="btn btn-primary">Texto 2</button>
			</div>
		</div>
	</div>
</div>

Variando o conteúdo modal baseado em botão disparador

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#m-6" data-nome="Texto 1">Abrir modal para Texto 1</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#m-6" data-nome="Texto 2">Abrir modal para Texto 2</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#m-6" data-nome="Texto 3">Abrir modal para Texto 3</button>
<div class="modal fade" id="m-6" tabindex="-1" role="dialog" aria-labelledby="ml-6">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="ml-6">Texto 1</h4>
			</div>
			<div class="modal-body">
				<form>
					<div class="form-group">
						<label for="input-texto-1" class="control-label">Texto 1:</label>
						<input type="text" class="form-control" id="input-texto-1">
					</div>
					<div class="form-group">
						<label for="input-texto-2" class="control-label">Texto 2:</label>
						<textarea class="form-control" id="input-texto-2"></textarea>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
				<button type="button" class="btn btn-primary">Texto 2</button>
			</div>
		</div>
	</div>
</div>

$('#m-6').on('show.bs.modal', function (evento) {
	var botao = $(evento.relatedTarget);
	var dado = botao.data('nome');
	var modal = $(this);
	modal.find('.modal-title').text('Texto texto ' + dado);
	modal.find('.modal-body input').val(dado);
});

Uso

Via atributos data

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#m-7">Texto 1</button>
<div class="modal fade" id="m-7" tabindex="-1" role="dialog" aria-labelledby="ml-7">
	
</div>

Via JavaScript

<button type="button" class="btn btn-primary" id="bm-1">Texto 1</button>
<div class="modal fade" id="m-8" tabindex="-1" role="dialog" aria-labelledby="ml-8">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="ml-8">Texto 1</h4>
			</div>
			<div class="modal-body">
				<p>Texto texto.</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
				<button type="button" class="btn btn-primary">Texto 2</button>
			</div>
		</div>
	</div>
</div>

$('#bm-1').click(function() {
	$('#m-8').modal();
});

Opções

Nome	Tipo	Padrão	Descrição
backdrop	booleano ou `'static'`	true	Inclui um plano de fundo para o modal, alternativamente, especifique `'static'` para não fechar o modal no clique.
keyboard	booleano	true	Fecha o modal quando `Esc` é pressionado.
show	booleano	true	Mostra o modal quando inicializado.
remote	caminho	false	Se uma URL remota é provida, o conteúdo será carregado via jQuery pelo método `load` e inserido dentro do `.modal-content`. Se você está usando a api nos atributos data, você pode alternativamente usar o atributo href para especificar uma fonte remota. Um exemplo disto é mostrado abaixo: `<a data-toggle="modal" href="index.html" data-target="#nome-id">Clicar</a>`

Métodos

.modal(opcoes)

$('#nome-id').modal({
	'/"campo"/': '/"valor"/'
});

.modal('toggle')

Manualmente um modal mostrar ou ocultar.

$('#nome-id').modal('toggle');

.modal('show')

Manualmente um modal mostrar.

$('#nome-id').modal('show');

.modal('hide')

Manualmente um modal ocultar.

$('#nome-id').modal('hide');

.modal('handleUpdate')

Reajusta o posicionamento do modal para combater uma barra de rolagem num caso deve aparecer, o que faria o salto modal para a esquerda.

Só for necessário quando a altura das alterações modals enquanto este estiver aberto.

$('#nome-id').modal('handleUpdate');

Eventos

Tipo de evento	Descrição
show.bs.modal	Este evento é acionado imediatamente quando o modal vai mostrar.
shown.bs.modal	Este evento é disparado quando o modal foi mostrando.
hide.bs.modal	Este evento é acionado imediatamente quando o modal vai ocultar.
hidden.bs.modal	Este evento é disparado quando o modal foi ocultando.
loaded.bs.modal	Este evento é disparado quando o modal foi carregado para abrir usando a opção `remote`.

$('#nome-id').on('opcoes', function (evento) {
	...
});

Dropdowns

Dentro da barra de navegação

Dentro das pílulas

Uso

Via atributos data

<button></button>

<div class="dropdown">
	<button id="d-g" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Texto 1
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" aria-labelledby="d-g">
		...
	</ul>
</div>

<a></a>

<div class="dropdown">
	<a id="d-h" data-target="#" href="javascript:void(0);" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
		...
		<span class="caret"></span>
	</a>
	<ul class="dropdown-menu" aria-labelledby="d-h">
		...
	</ul>
</div>

Via JavaScript

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

Opções

Nenhum

Métodos

.dropdown('toggle')

Alterna o menu dropdown da barra de navegação ou navegação.

Eventos

Tipo de evento	Descrição
show.bs.dropdown	Este evento é acionado imediatamente quando o dropdown vai mostrar.
shown.bs.dropdown	Este evento é disparado quando o dropdown foi mostrando.
hide.bs.dropdown	Este evento é acionado imediatamente quando o dropdown vai ocultar.
hidden.bs.dropdown	Este evento é disparado quando o dropdown foi ocultando.

$('#nome-id').on('opcoes', function () {
	...
});

ScrollSpy

Exemplo

Texto 1

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.

Texto 2

Texto 3

Texto 4

Texto 5

Texto 6

Uso

<nav>
	...
</nav>

<a href="#nome-id">...</a>
<div id="nome-id">
	...
</div>

Via atributos data

body {
	position: relative;
}

<body data-spy="scroll" data-target="#nome-id">
	...
	<div id="nome-id">
		<ul class="nav nav-tabs" role="tablist">
			...
		</ul>
	</div>
	...
</body>

Via JavaScript

$('body').scrollspy({
	target: '#nome-id'
});

Métodos

.scrollspy('refresh')

Quando usar scrollspy em conjunção adicionando ou removendo elementos no DOM, assim você vai precisar chamar o método refresh assim:

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

Opções

Nome	Tipo	Padrão	Descrição
offset	número	10	Pixels de offset do topo quando calculando posição com scroll

Eventos

Tipo de evento	Descrição
activate.bs.scrollspy	Este evento é acionado sempre que um novo item é ativado pelo scrollspy.

$('#nome-id').on('activate.bs.scrollspy', function () {
	...
});

Abas

Padrão

Texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1.

Texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2.

Texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4.

Texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5.

<ul class="nav nav-tabs" role="tablist">
	<li role="presentation" class="active"><a href="#texto-um" id="texto-um-aba" role="tab" data-toggle="tab" aria-controls="texto-um" aria-expanded="true">Texto 1</a></li>
	<li role="presentation"><a href="#texto-dois" role="tab" id="texto-dois-aba" data-toggle="tab" aria-controls="texto-dois">Texto 2</a></li>
	<li role="presentation" class="dropdown">
		<a href="javascript:void(0);" id="d-aba" class="dropdown-toggle" data-toggle="dropdown" aria-controls="d-aba-c">Texto 3 <span class="caret"></span></a>
		<ul class="dropdown-menu" aria-labelledby="d-aba" id="d-aba-c">
			<li><a href="#texto-quatro" role="tab" id="texto-quatro-aba" data-toggle="tab" aria-controls="texto-quatro">Texto 4</a></li>
			<li><a href="#texto-cinco" role="tab" id="texto-cinco-aba" data-toggle="tab" aria-controls="texto-cinco">Texto 5</a></li>
		</ul>
	</li>
</ul>
<div class="tab-content">
	<div role="tabpanel" class="tab-pane fade in active" id="texto-um" aria-labelledBy="texto-um-aba">
		<p>Texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1.</p>
	</div>
	<div role="tabpanel" class="tab-pane fade" id="texto-dois" aria-labelledBy="texto-dois-aba">
		<p>Texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2.</p>
	</div>
	<div role="tabpanel" class="tab-pane fade" id="texto-quatro" aria-labelledBy="texto-quatro-aba">
		<p>Texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4.</p>
	</div>
	<div role="tabpanel" class="tab-pane fade" id="texto-cinco" aria-labelledBy="texto-cinco-aba">
		<p>Texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5 texto 5.</p>
	</div>
</div>

Uso

$('#nome-id a').click(function(e) {
	e.preventDefault();
	$(this).tab('show');
});

$('#abas a[href="#nome-id"]').tab('show'); // Escolher a aba por nome.
$('#abas a:first').tab('show'); // Escolher a primeira aba.
$('#abas a:last').tab('show'); // Escolher a última aba.
$('#abas li:eq(2) a').tab('show'); // Escolher a terceira aba.

Marcação

<ul class="nav nav-tabs" role="tablist">
	<li role="presentation" class="active"><a href="#texto-um" aria-controls="texto-um" role="tab" data-toggle="tab">Texto 1</a></li>
	<li role="presentation"><a href="#texto-dois" aria-controls="texto-dois" role="tab" data-toggle="tab">Texto 2</a></li>
	<li role="presentation"><a href="#texto-tres" aria-controls="texto-tres" role="tab" data-toggle="tab">Texto 3</a></li>
	<li role="presentation"><a href="#texto-quatro" aria-controls="texto-quatro" role="tab" data-toggle="tab">Texto 4</a></li>
</ul>
<div class="tab-content">
	<div role="tabpanel" class="tab-pane active" id="texto-um">
		...
	</div>
	<div role="tabpanel" class="tab-pane" id="texto-dois">
		...
	</div>
	<div role="tabpanel" class="tab-pane" id="texto-tres">
		...
	</div>
	<div role="tabpanel" class="tab-pane" id="texto-quatro">
		...
	</div>
</div>

Efeito de desvanecer

<div class="tab-content">
	<div role="tabpanel" class="tab-pane fade in active" id="texto-um">
		
	</div>
	<div role="tabpanel" class="tab-pane fade" id="texto-dois">
		
	</div>
	<div role="tabpanel" class="tab-pane fade" id="texto-tres">
		
	</div>
	<div role="tabpanel" class="tab-pane fade" id="texto-4">
		
	</div>
</div>

Métodos

.tab('show')

Seleciona para mostrar a aba. Qualquer outra aba que foi previamente selecionada torna-se desmarcada e o seu conteúdo associado está escondido.

$('#nome-id').tab('show');

Eventos

Tipo de evento	Descrição
show.bs.tab	Este evento é chamado para mostrar a aba, mas antes que a nova aba foi mostrada. Use `event.target` e `event.relatedTarget` para direcionar a aba ativa atual e a aba ativa anterior, respectivamente.
shown.bs.tab	Este evento é chamado para mostrar a aba após uma aba foi mostrada. Use `event.target` e `event.relatedTarget` para direcionar a aba ativa atual e a aba ativa anterior, respectivamente.
hide.bs.tab	Este evento é acionado quando uma nova aba é para ser mostrado, mas a aba ativa anterior foi para ser escondida. Use `event.target` e `event.relatedTarget` para direcionar a aba ativa atual e a nova aba logo para ativar, respectivamente.
hidden.bs.tab	Este evento é acionado após uma nova aba foi mostrada, mas a aba ativa anterior está escondida. Use `event.target` e `event.relatedTarget` para direcionar a aba ativa anterior e a nova aba ativa, respectivamente.

$('a[data-toggle="tab"]').on('opcoes', function(e) {
	e.target;
	e.relatedTarget;
});

Tooltips

Padrão

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.

Quatro direções

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Texto 1">Texto 1</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Texto 2">Texto 2</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Texto 3">Texto 3</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Texto 4">Texto 4</button>

$('[data-toggle="tooltip"]').tooltip();

Uso

Via JavaScript

$('#nome-id').tooltip(opcoes);

Marcação

<a href="javascript:void(0);" data-toggle="tooltip" title="Texto 1">Texto 1</a>
<div class="tooltip top" role="tooltip">
	<div class="tooltip-arrow"></div>
	<div class="tooltip-inner">
		Texto 1
	</div>
</div>

Várias linhas

elemento {
	white-space: nowrap;
}

Opções

Nome	Tipo	Padrão	Descrição
animation	booleano	true	Aplicar o CSS de desvanecer para tooltip.
container	string ou false	false	Acrescenta o tooltip para um elemento específico. Exemplo: `container: 'body'`. Esta opção é particularmente útil na medida em que permite posicionar o tooltip no fluxo do documento perto do elemento de disparo - o que impedirá o tooltip de flutuar fora do elemento de disparo, durante uma janela de redimensionamento.
delay	number \| object	0	Atraso para mostrar e ocultar o tooltip Estrutura do objeto é: `delay: { "show": 500, "hide": 100 }`
html	booleano	false	Insira HTML para o tooltip. Se falso, `text` do jQuery será usado para inserir o conteúdo no DOM. Use texto se você está preocupado com ataques XSS.
placement	string \| function	'top'	Como para a posição do tooltip - top, bottom, left, right ou auto.
selector	string	false	Se um seletor for fornecido, então os objetos do tooltip serão delegados aos objetivos especificados. Na prática, isso são usados para permitir que o conteúdo HTML dinâmico por ter os tooltips acrescentado.
template	string	`'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'`	A base HTML para usar a criar o tooltip.
title	string ou function	''	O valor do padrão título se o atributo `title` não estiver presente. Se uma função for dado, ele será chamado com o seu `this` de referência definido para o elemento que o tooltip está conectado.
trigger	string	'hover focus'	Como tooltip é acionado - click, hover, focus ou manual.
viewport	string, object ou function	{ selector: 'body', padding: 0 }	Mantém o tooltip dentro dos limites deste elemento. Exemplo: `viewport: '#viewport'` ou `{ "selector": "#viewport", "padding": 0 }` Se uma função for dado, ele é chamado com o elemento DOM nó desencadeando como seu único argumento. O contexto `this` está definido para o tooltip instância.

Métodos

$().tooltip(opcoes)

Inicializa um tooltip para uma coleção de elemento.

$('#nome-id').tooltip({
	'/"campo"/': '/"valor"/'
});

.tooltip('show')

Manualmente um tooltip mostrar.

$('#nome-id').tooltip('show');

.tooltip('hide')

Manualmente um tooltip ocultar.

$('#nome-id').tooltip('hide');

.tooltip('toggle')

Manualmente um tooltip mostrar ou ocultar.

$('#nome-id').tooltip('toggle');

.tooltip('destroy')

Oculta e destrói tooltip de um elemento.

$('#nome-id').tooltip('destroy');

Eventos

Tipo de evento	Descrição
show.bs.tooltip	Este evento é acionado imediatamente quando o tooltip vai mostrar.
shown.bs.tooltip	Este evento é disparado quando o tooltip foi mostrando.
hide.bs.tooltip	Este evento é acionado imediatamente quando o tooltip vai ocultar.
hidden.bs.tooltip	Este evento é disparado quando o tooltip foi ocultando.
inserted.bs.tooltip	Este evento é disparado após o evento `show.bs.tooltip` quando o tooltip foi adicionado ao DOM.

$('#nome-id').on('opcoes', function() {
	...
});

Popovers

Padrão

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Texto texto" data-content="Texto texto texto texto texto texto texto texto texto texto texto texto texto texto.">Texto</button>

$('[data-toggle="popover"]').popover();

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1.">
	Texto 1
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2.">
	Texto 2
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3.">
	Texto 3
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4.">
	Texto 4
</button>

Texto

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Texto texto" data-content="Texto texto texto texto texto texto texto texto texto texto texto.">Texto</a>

Uso

Via JavaScript

$('#nome-id').popover(opcoes);

Opções

Nome	Tipo	Padrão	Descrição
animation	booleano	true	Aplicar o CSS de desvanecer para popover.
container	string ou false	false	Acrescenta o popover para um elemento específico. Exemplo: `container: 'body'`. Esta opção é particularmente útil na medida em que permite posicionar o popover no fluxo do documento perto do elemento de disparo - o que impedirá o popover de flutuar fora do elemento de disparo, durante uma janela de redimensionamento.
content	string ou function	''	O valor padrão de conteúdo se o atributo `data-content` não estiver presente. Se uma função for dado, ele será chamado com o seu `this` de referência definido para o elemento que o popover está conectado.
delay	number ou object	0	Atraso para mostrar e ocultar o popover. Estrutura do objeto é: `delay: { "show": 500, "hide": 100 }`
html	booleano	false	Insira HTML para o popover. Se falso, `text` do jQuery será usado para inserir o conteúdo no DOM. Use texto se você está preocupado com ataques XSS.
placement	string ou function	'right'	Como para a posição do popover - top, bottom, left, right ou auto.
selector	string	false	Se um seletor for fornecido, então os objetos do popover serão delegados aos objetivos especificados. Na prática, isso são usados para permitir que o conteúdo HTML dinâmico por ter os popovers acrescentado.
template	string	`'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'`	A base HTML para usar a criar o popover.
title	string ou function	''	O valor do padrão título se o atributo `title` não estiver presente. Se uma função for dado, ele será chamado com o seu `this` de referência definido para o elemento que o popover está conectado.
trigger	string	'click'	Como popover é acionado - click, hover, focus ou manual.
viewport	string, object ou function	{ selector: 'body', padding: 0 }	Mantém o popover dentro dos limites deste elemento. Exemplo: `viewport: '#viewport'` ou `{ "selector": "#viewport", "padding": 0 }` Se uma função for dado, ele é chamado com o elemento DOM nó desencadeando como seu único argumento. O contexto `this` está definido para o popover instância.

Métodos

$().popover(opcoes)

Inicializa uns popovers para uma coleção de elementos.

$('#nome-id').popover({
	'/"campo"/': '/"valor"/'
});

.popover('show')

Manualmente um popover mostrar.

$('#nome-id').popover('show');

.popover('hide')

Manualmente um popover ocultar.

$('#nome-id').popover('hide');

.popover('toggle')

Manualmente um popover mostrar ou ocultar.

$('#nome-id').popover('toggle');

.popover('destroy')

Oculta e destrói popover de um elemento.

$('#nome-id').popover('destroy');

Eventos

;

Tipo de eventos	Descrição
show.bs.popover	Este evento é acionado imediatamente quando o popover vai mostrar.
shown.bs.popover	Este evento é disparado quando o popover foi mostrando.
hide.bs.popover	Este evento é acionado imediatamente quando o popover vai ocultar.
hidden.bs.popover	Este evento é disparado quando o popover foi ocultando.
inserted.bs.popover	Este evento é disparado após o evento `show.bs.popover` quando o popover foi adicionado ao DOM.

$('#nome-id').on('opcoes', function () {
	...
});

Alertas

Padrão

Texto texto texto texto. Texto texto texto texto texto texto texto texto texto texto.

<div class="alert alert-warning alert-dismissible fade in" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Fechar"><span aria-hidden="true">&times;</span></button>
	<strong>Texto texto texto texto.</strong> Texto texto texto texto texto texto texto texto texto texto.
</div>

Texto texto texto

Texto texto texto texto texto texto texto texto texto texto texto texto texto.

<div class="alert alert-danger alert-dismissible fade in" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Fechar"><span aria-hidden="true">&times;</span></button>
	<h4>Texto texto texto</h4>
	<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto.</p>
	<p>
		<button type="button" class="btn btn-danger">Texto 1</button>
		<button type="button" class="btn btn-default">Texto 2</button>
	</p>
</div>

Uso

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

Métodos

$().alert()

Marca um alerta de atender os eventos de clicar nos elementos descendentes que têm o atributo data-dismiss="alert".

$().alert('close')

Fecha um alerta por remover o DOM. Se as classes .fade e .in estão presentes no elemento, o alerta vai desaparecer antes de ser removido.

Eventos

Tipo de eventos	Descrição
close.bs.alert	Este evento é acionado imediatamente quando um alerta vai fechar.
closed.bs.alert	Este evento é disparado quando um alerta foi fechado.

$('#nome-id').on('opcoes', function () {
	...
});

Botões

Estagnado

<button type="button" id="ss-loading" data-loading-text="Carregando..." class="btn btn-primary" autocomplete="off">
	Começa a carregar
</button>

setInterval(function() {
	$('#ss-loading').button('reset');
}, 5000);

$('#ss-loading').on('click', function () {
	$(this).button('loading');
});

Alternador simples

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

Checkbox

Texto 1 Texto 2 Texto 3

<div class="btn-group" data-toggle="buttons">
	<label class="btn btn-primary active">
		<input type="checkbox" autocomplete="off" checked> Texto 1
	</label>
	<label class="btn btn-primary">
		<input type="checkbox" autocomplete="off"> Texto 2
	</label>
	<label class="btn btn-primary">
		<input type="checkbox" autocomplete="off"> Texto 3
	</label>
</div>

Radio

Texto 1 Texto 2 Texto 3

<div class="btn-group" data-toggle="buttons">
	<label class="btn btn-primary active">
		<input type="radio" name="options" id="opcao-um" autocomplete="off" checked> Texto 1
	</label>
	<label class="btn btn-primary">
		<input type="radio" name="options" id="opcao-dois" autocomplete="off"> Texto 2
	</label>
	<label class="btn btn-primary">
		<input type="radio" name="options" id="opcao-tres" autocomplete="off"> Texto 3
	</label>
</div>

Métodos

$().button('toggle')

Alternador com estados de apertado. Dá o botão a aparência de que ele foi ativado.

$().button('reset')

Reiniciar estados de botão - muda o texto no texto original.

$().button(string)

Reiniciar estados de botão - muda o texto em qualquer dado definido

<button type="button" id="ss-complete" data-complete-text="Texto 2" class="btn btn-primary" autocomplete="off">
	Texto 1
</button>

$('#ss-complete').on('click', function () {
	$(this).button('complete');
});

Collapse

Padrão

.collapse oculta o conteúdo.
.collapsing é aplicada durante as transições.
.collapse.in mostra o conteúdo.

Texto 1

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.

<p>
	<a class="btn btn-primary" role="button" data-toggle="collapse" href="#ss-texto-primeiro" aria-expanded="false" aria-controls="ss-texto-primeiro">
		Texto 1
	</a>
	<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss-texto-primeiro" aria-expanded="false" aria-controls="ss-texto-primeiro">
		Texto 2
	</button>
</p>
<div class="collapse" id="ss-texto-primeiro">
	<div class="well">
		Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.
	</div>
</div>

Acordeão

Texto 1

Texto 2

Texto 3

Texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3.

<div class="panel-group" id="ss-acordeao" role="tablist" aria-multiselectable="true">
	<div class="panel panel-default">
		<div class="panel-heading" role="tab" id="ss-titulo-um">
			<h4 class="panel-title">
				<a role="button" data-toggle="collapse" data-parent="#ss-acordeao" href="#ss-collapse-um" aria-expanded="true" aria-controls="ss-collapse-um">
					Texto 1
				</a>
			</h4>
		</div>
		<div id="ss-collapse-um" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="ss-titulo-um">
			<div class="panel-body">
				Texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1.
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading" role="tab" id="ss-titulo-dois">
			<h4 class="panel-title">
				<a class="collapsed" role="button" data-toggle="collapse" data-parent="#ss-acordeao" href="#ss-collapse-dois" aria-expanded="false" aria-controls="ss-collapse-dois">
					Texto 2
				</a>
			</h4>
		</div>
		<div id="ss-collapse-dois" class="panel-collapse collapse" role="tabpanel" aria-labelledby="ss-titulo-dois">
			<div class="panel-body">
				Texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2.
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading" role="tab" id="ss-titulo-tres">
			<h4 class="panel-title">
				<a class="collapsed" role="button" data-toggle="collapse" data-parent="#ss-acordeao" href="#ss-collapse-tres" aria-expanded="false" aria-controls="ss-collapse-tres">
					Texto 3
				</a>
			</h4>
		</div>
		<div id="ss-collapse-tres" class="panel-collapse collapse" role="tabpanel" aria-labelledby="ss-titulo-tres">
			<div class="panel-body">
				Texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3.
			</div>
		</div>
	</div>
</div>

Texto

Texto 1
Texto 2
Texto 3

Texto 4

Uso

Via JavaScript

$('.collapse').collapse();

Opções

Nome	Tipo	Padrão	Descrição
parent	selector	false	Se um seletor é dado então todos os elementos colapsáveis abaixo do pai expecificado será fechado quando seu item colapsável é exibido. (similar ao funcionamento tradicional de um accordion)
toggle	booleano	true	Alterna todos os elementos colapsáveis na sua invocação.

Métodos

.collapse(opcoes)

$('#nome-id').collapse({
	'/"campo"/': '/"valor"/'
});

.collapse('toggle')

Alterna um elemento collapse para mostrar ou ocultar.

.collapse('show')

Mostra um elemento collapse.

.collapse('hide')

Oculta um elemento collapse.

Eventos

Tipo de eventos	Descrição
show.bs.collapse	Este evento é acionado imediatamente quando o collapse vai mostrar.
shown.bs.collapse	Este evento é disparado quando o collapse foi mostrando.
hide.bs.collapse	Este evento é acionado imediatamente quando o collapse vai ocultar.
hidden.bs.collapse	Este evento é disparado quando o collapse foi ocultando.

$('#nome-id').on('opcoes', function () {
	...
});