Bootstrap - Guia rápido
O que é Twitter Bootstrap?
Bootstrap é uma estrutura de front-end móvel elegante, intuitiva e poderosa para um desenvolvimento web mais rápido e fácil. Ele usa HTML, CSS e Javascript.
História
O Bootstrap foi desenvolvido por Mark Otto e Jacob Thornton no Twitter . Foi lançado como um produto de código aberto em agosto de 2011 no GitHub.
Por que usar o Bootstrap?
Mobile first approach - Bootstrap 3, framework consiste em primeiros estilos móveis em toda a biblioteca, em vez de em arquivos separados.
Browser Support - É compatível com todos os navegadores populares.
Easy to get started- Com apenas o conhecimento de HTML e CSS, qualquer pessoa pode começar a usar o Bootstrap. Além disso, o site oficial do Bootstrap tem uma boa documentação.
Responsive design- O CSS responsivo do Bootstrap se ajusta a desktops, tablets e dispositivos móveis. Mais sobre o design responsivo está no capítulo Bootstrap Responsive Design.
Fornece uma solução limpa e uniforme para construir uma interface para desenvolvedores.
Ele contém componentes embutidos bonitos e funcionais que são fáceis de personalizar.
Ele também fornece personalização baseada na web.
E o melhor de tudo é um código aberto.
O que inclui o pacote de bootstrap?
Scaffolding- Bootstrap fornece uma estrutura básica com Sistema de grade, estilos de link e plano de fundo. Isso é abordado em detalhes na seçãoBootstrap Basic Structure
CSS- Bootstrap vem com o recurso de configurações CSS globais, elementos HTML fundamentais estilizados e aprimorados com classes extensíveis e um sistema de grade avançado. Isso é abordado em detalhes na seçãoBootstrap with CSS.
Components- Bootstrap contém mais de uma dúzia de componentes reutilizáveis construídos para fornecer iconografia, menus suspensos, navegação, alertas, pop-overs e muito mais. Isso é abordado em detalhes na seçãoLayout Components.
JavaScript Plugins- Bootstrap contém mais de uma dúzia de plug-ins jQuery personalizados. Você pode incluir todos eles facilmente ou um por um. Isso é abordado em detalhes na seçãoBootstrap Plugins.
Customize - Você pode personalizar os componentes do Bootstrap, variáveis LESS e plug-ins jQuery para obter sua própria versão.
É muito fácil de configurar e começar a usar o Bootstrap. Este capítulo irá explicar como baixar e configurar o Bootstrap. Também discutiremos a estrutura do arquivo Bootstrap e demonstraremos seu uso com um exemplo.
Baixar Bootstrap
Você pode baixar a versão mais recente do Bootstrap em https://getbootstrap.com/. Ao clicar neste link, você verá a tela abaixo -
Aqui você pode ver dois botões -
Download Bootstrap- Clicando aqui, você pode baixar as versões pré-compiladas e reduzidas de Bootstrap CSS, JavaScript e fontes. Nenhuma documentação ou arquivos de código-fonte originais estão incluídos.
Download Source - Clicando aqui, você pode obter o código-fonte LESS e JavaScript mais recente do Bootstrap diretamente do GitHub.
Se você trabalha com o código-fonte não compilado do Bootstrap, precisa compilar os arquivos LESS para produzir arquivos CSS utilizáveis. Para compilar os arquivos MENOS em CSS, Bootstrap oficialmente só aceita Recess , que é hinter CSS do Twitter com base em less.js .
Para melhor compreensão e facilidade de uso, usaremos a versão pré-compilada do Bootstrap ao longo do tutorial. Como os arquivos são compilados e minimizados, você não precisa se preocupar o tempo todo incluindo arquivos separados para funcionalidade individual. No momento em que este tutorial foi escrito, a versão mais recente (Bootstrap 3) foi baixada.
Estrutura de arquivo
Bootstrap pré-compilado
Depois que a versão compilada do Bootstrap for baixada, extraia o arquivo ZIP e você verá a seguinte estrutura de arquivo / diretório -
Como você pode ver, existem CSS e JS compilados (bootstrap. *), Bem como CSS e JS compilados e minimizados (bootstrap.min. *). Fontes de Glyphicons estão incluídas, pois é o tema Bootstrap opcional.
Código-fonte do bootstrap
Se você baixou o código-fonte do Bootstrap, a estrutura do arquivo seria a seguinte -
Os arquivos em less / , js / e fonts / são o código-fonte para Bootstrap CSS, JS e fontes de ícone (respectivamente).
A pasta dist / inclui tudo listado na seção de download pré-compilado acima.
docs-assets / , examples / e todos os arquivos * .html são documentação do Bootstrap.
Modelo HTML
Um modelo HTML básico usando Bootstrap seria parecido com este -
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<!-- Bootstrap -->
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src = "https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src = "js/bootstrap.min.js"></script>
</body>
</html>Aqui você pode ver o jquery.js, bootstrap.min.js e bootstrap.min.cssarquivos incluídos para criar um arquivo HTM normal para o modelo inicializado. Apenas certifique-se de incluir a biblioteca jQuery antes de incluir a biblioteca Bootstrap.
Mais detalhes sobre cada um dos elementos neste trecho de código acima serão discutidos no capítulo Visão geral do CSS do Bootstrap .
Exemplo
Agora vamos tentar um exemplo usando o modelo acima. Experimente o seguinte exemplo usando a opção Live Demo disponível no canto superior direito da caixa de código de exemplo abaixo em nosso site -
<h1>Hello, world!</h1>Em todos os capítulos subsequentes, usamos texto fictício do site https://www.lipsum.com/.
Neste capítulo, discutiremos o Sistema Bootstrap Grid.
O que é uma grade?
Conforme colocado pela wikepedia -
No design gráfico, uma grade é uma estrutura (geralmente bidimensional) composta de uma série de linhas retas que se cruzam (verticais, horizontais) usadas para estruturar o conteúdo. É amplamente utilizado para projetar layout e estrutura de conteúdo em design de impressão. Em web design, é um método muito eficaz para criar um layout consistente de forma rápida e eficaz usando HTML e CSS.
Para simplificar, as grades no web design organizam e estruturam o conteúdo, tornam os sites fáceis de serem digitalizados e reduzem a carga cognitiva dos usuários.
O que é o Bootstrap Grid System?
Conforme colocado pela documentação oficial do Bootstrap para sistema de grade -
O bootstrap inclui um primeiro sistema de grade de fluido móvel responsivo que dimensiona adequadamente até 12 colunas conforme o tamanho do dispositivo ou janela de visualização aumenta. Inclui classes predefinidas para opções de layout fáceis, bem como mixins poderosos para gerar layouts mais semânticos.
Deixe-nos entender a afirmação acima. O Bootstrap 3 é móvel primeiro no sentido de que o código do Bootstrap agora começa visando telas menores, como dispositivos móveis, tablets e, em seguida, “expande” componentes e grades para telas maiores, como laptops e desktops.
Estratégia Mobile First
Content
- Determine o que é mais importante.
Layout
- Projete primeiro para larguras menores.
- O endereço CSS básico é o dispositivo móvel primeiro; endereço de consultas de mídia para tablet, desktops.
Progressive Enhancement
- Adicione elementos conforme o tamanho da tela aumenta.
Funcionamento do sistema Bootstrap Grid
Os sistemas de grade são usados para criar layouts de página por meio de uma série de linhas e colunas que hospedam seu conteúdo. É assim que funciona o sistema de grade Bootstrap -
As linhas devem ser colocadas dentro de um .container classe para alinhamento e preenchimento adequados.
Use linhas para criar grupos horizontais de colunas.
O conteúdo deve ser colocado dentro das colunas, e apenas as colunas podem ser filhos imediatos das linhas.
Classes de grade predefinidas como .row and .col-xs-4estão disponíveis para criar layouts de grade rapidamente. Mixins MENOS também podem ser usados para layouts mais semânticos.
As colunas criam medianizes (lacunas entre o conteúdo da coluna) por meio de preenchimento. Esse preenchimento é deslocado nas linhas da primeira e da última coluna por meio da margem negativa em.rows.
As colunas de grade são criadas especificando-se o número de doze colunas disponíveis que você deseja expandir. Por exemplo, três colunas iguais usariam três.col-xs-4.
Consultas de mídia
A consulta de mídia é um termo muito sofisticado para "regra CSS condicional". Ele simplesmente aplica algum CSS, com base em certas condições estabelecidas. Se essas condições forem atendidas, o estilo será aplicado.
As consultas de mídia no Bootstrap permitem mover, mostrar e ocultar o conteúdo com base no tamanho da janela de visualização. As seguintes consultas de mídia são usadas em arquivos LESS para criar os principais pontos de interrupção no sistema de grade do Bootstrap.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }Ocasionalmente, eles são expandidos para incluir um max-width para limitar o CSS a um conjunto mais restrito de dispositivos.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }As consultas de mídia têm duas partes, uma especificação de dispositivo e uma regra de tamanho. No caso acima, a seguinte regra é definida -
Vamos considerar esta linha -
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }Para todos os dispositivos, não importa o tipo de largura mínima: @ screen-sm-min se a largura da tela ficar menor do que @ screen-sm-max , faça algo .
Opções de grade
A tabela a seguir resume os aspectos de como o sistema de grade Bootstrap funciona em vários dispositivos -
| Dispositivos extra pequenos telefones (<768px) | Tablets para dispositivos pequenos (≥768 px) | Dispositivos médios desktops (≥992 px) | Dispositivos grandes desktops (≥1200px) | |
|---|---|---|---|---|
| Comportamento de grade | Sempre horizontal | Recolhido para começar, horizontal acima dos pontos de interrupção | Recolhido para começar, horizontal acima dos pontos de interrupção | Recolhido para começar, horizontal acima dos pontos de interrupção |
| Largura máxima do contêiner | Nenhum (automático) | 750px | 970px | 1170px |
| Prefixo de classe | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| # de colunas | 12 | 12 | 12 | 12 |
| Largura máxima da coluna | Auto | 60px | 78px | 95px |
| largura da calha | 30px (15px em cada lado de uma coluna) |
30px (15px em cada lado de uma coluna) |
30px (15px em cada lado de uma coluna) |
30px (15px em cada lado de uma coluna) |
| Nestable | sim | sim | sim | sim |
| Offsets | sim | sim | sim | sim |
| Ordem de coluna | sim | sim | sim | sim |
Estrutura de grade básica
A seguir está a estrutura básica da grade Bootstrap -
<div class = "container">
<div class = "row">
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
</div>
<div class = "row">...</div>
</div>
<div class = "container">
....
</div>Vamos ver alguns exemplos simples de grade -
Exemplo - Empilhado na horizontal
Exemplo - Dispositivo médio e grande
Exemplo - celular, tablet, desktops
Redefinições de coluna responsiva
Com as quatro camadas de grades disponíveis, você provavelmente encontrará problemas em que, em certos pontos de interrupção, as colunas não ficam bem claras porque uma é mais alta que a outra. Para corrigir isso, use uma combinação de uma classe.clearfixe as classes de utilitário responsivas conforme mostrado no exemplo a seguir -
<div class = "container">
<div class = "row" >
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut.</p>
</div>
<div class = "clearfix visible-xs"></div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim</p>
</div>
</div>
</div>Isso produzirá o seguinte resultado -
Redimensione sua janela de visualização ou verifique em seu telefone o resultado desejado deste exemplo.
Offset Columns
Os deslocamentos são um recurso útil para layouts mais especializados. Eles podem ser usados para empurrar colunas para mais espaçamento, (por exemplo). o.col-xs = * as classes não oferecem suporte a deslocamentos, mas são facilmente replicadas usando uma célula vazia.
Para usar deslocamentos em telas grandes, use o .col-md-offset-*Aulas. Essas classes aumentam a margem esquerda de uma coluna em* colunas onde * vai de 1 para 11.
No exemplo a seguir, temos <div class = "col-md-6"> .. </div>, vamos centralizar isso usando a classe .col-md-offset-3.
<div class = "container">
<h1>Hello, world!</h1>
<div class = "row" >
<div class = "col-xs-6 col-md-offset-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>Isso produzirá o seguinte resultado -
Colunas de aninhamento
Para aninhar seu conteúdo com a grade padrão, adicione um novo .row e conjunto de .col-md-* colunas dentro de um existente .col-md-*coluna. As linhas aninhadas devem incluir um conjunto de colunas que somam 12.
No exemplo a seguir, o layout possui duas colunas, com a segunda sendo dividida em quatro caixas em duas linhas.
<div class = "container">
<h1>Hello, world!</h1>
<div class = "row">
<div class = "col-md-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>First Column</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class = "col-md-9" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>Second Column- Split into 4 boxes</h4>
<div class = "row">
<div class = "col-md-6" style = "background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Consectetur art party Tonx culpa semiotics.
Pinterest assumenda minim organic quis.</p>
</div>
<div class = "col-md-6" style = "background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class = "row">
<div class = "col-md-6" style = "background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.</p>
</div>
<div class = "col-md-6" style = "background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim.</p>
</div>
</div>
</div>
</div>
</div>Isso produzirá o seguinte resultado -
Ordem da coluna
Outro recurso interessante do sistema de grade Bootstrap é que você pode facilmente escrever as colunas em uma ordem e mostrá-las em outra. Você pode facilmente alterar a ordem das colunas de grade integradas com.col-md-push-* e .col-md-pull-* classes modificadoras onde * vai de 1 para 11.
No exemplo a seguir, temos o layout de duas colunas, sendo a coluna da esquerda a mais estreita e atuando como uma barra lateral. Vamos trocar a ordem dessas colunas usando.col-md-push-* e .col-md-pull-* Aulas.
<div class = "container">
<h1>Hello, world!</h1>
<div class = "row">
<p>Before Ordering</p>
<div class = "col-md-4" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I am on left
</div>
<div class = "col-md-8" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I am on right
</div>
</div>
<br>
<div class = "row">
<p>After Ordering</p>
<div class = "col-md-4 col-md-push-8" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I was on left
</div>
<div class = "col-md-8 col-md-pull-4" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I was on right
</div>
</div>
</div>Isso produzirá o seguinte resultado -
Este capítulo fornece uma visão geral das peças-chave da infraestrutura do Bootstrap, incluindo a abordagem do Bootstrap para um desenvolvimento web melhor, mais rápido e mais forte.
Doctype HTML5
O Bootstrap faz uso de certos elementos HTML e propriedades CSS que requerem o uso do doctype HTML5. Portanto, inclua o trecho de código abaixo para doctype HTML5 no início de todos os seus projetos usando Bootstrap.
<!DOCTYPE html>
<html>
....
</html>Mobile First
Desde que o Bootstrap 3 foi lançado, o Bootstrap tornou-se primeiro móvel. Isso significa que os estilos 'móveis primeiro' podem ser encontrados em toda a biblioteca, em vez de em arquivos separados. Você precisa adicionar oviewport meta tag ao <head> elemento, para garantir a renderização adequada e zoom de toque em dispositivos móveis.
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">A propriedade width controla a largura do dispositivo. Configurá-lo para a largura do dispositivo garantirá que ele seja renderizado em vários dispositivos (celulares, desktops, tablets ...) corretamente.
escala inicial = 1,0 garante que, quando carregada, sua página da web será renderizada em uma escala de 1: 1, e nenhum zoom será aplicado fora da caixa.
Adicionar user-scalable = no ao contentatributo para desativar os recursos de zoom em dispositivos móveis, conforme mostrado abaixo. Os usuários só podem rolar e não aplicar zoom com essa mudança, e faz com que seu site pareça um pouco mais com um aplicativo nativo.
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">Normalmente, a escala máxima = 1,0 é usada junto com escalável pelo usuário = não . Como acima mencionadouser-scalable = no pode dar aos usuários uma experiência mais parecida com um aplicativo nativo, portanto, o Bootstrap não recomenda o uso desse atributo.
Imagens responsivas
O Bootstrap 3 permite que você torne as imagens responsivas adicionando uma classe .img-responsive ao <img>tag. Esta classe se aplicamax-width: 100%; e height: auto; à imagem para que ela se ajuste perfeitamente ao elemento pai.
<img src = "..." class = "img-responsive" alt = "Responsive image">Tipografia e links
Bootstrap define uma exibição global básica (plano de fundo), tipografia e estilos de link -
Basic Global display- Define a cor de fundo: #fff; no elemento <body> .
Typography- Usa os atributos @ font-family-base , @ font-size-base e @ line-height-base como a base tipográfica.
Link styles- Define a cor global do link por meio do attribute @ link-color e aplica os sublinhados do link apenas em : hover .
Se você pretende usar o código LESS, pode encontrar todos eles em scaffolding.less .
Normalizar
Bootstrap usa Normalizar para estabelecer consistência entre navegadores.
Normalize.css é uma alternativa moderna, pronta para HTML5, para redefinições CSS. É um pequeno arquivo CSS que fornece melhor consistência entre navegadores no estilo padrão dos elementos HTML.
Recipientes
Usar aula .container para envolver o conteúdo de uma página e centralizar facilmente o conteúdo, conforme mostrado abaixo.
<div class = "container">
...
</div>Dê uma olhada no .containerclasse no arquivo bootstrap.css -
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}Observe que, devido ao preenchimento e às larguras fixas, os contêineres não podem ser aninhados por padrão.
Dê uma olhada no arquivo bootstrap.css -
@media (min-width: 768px) {
.container {
width: 750px;
}
}Aqui você pode ver que o CSS tem consultas de mídia para contêineres com width. Isso ajuda a aplicar a capacidade de resposta e, dentro delas, a classe do contêiner é modificada de acordo para renderizar o sistema de grade adequadamente.
O Bootstrap usa Helvetica Neue, Helvetica, Arial e sans-serif em sua pilha de fontes padrão. Usando o recurso de tipografia do Bootstrap, você pode criar títulos, parágrafos, listas e outros elementos embutidos. Vamos ver aprender cada um deles nas seções a seguir.
Títulos
Todos os cabeçalhos HTML (h1 a h6) são estilizados no Bootstrap. Um exemplo é mostrado abaixo -
<h1>I'm Heading1 h1</h1>
<h2>I'm Heading2 h2</h2>
<h3>I'm Heading3 h3</h3>
<h4>I'm Heading4 h4</h4>
<h5>I'm Heading5 h5</h5>
<h6>I'm Heading6 h6</h6>O segmento de código acima com Bootstrap produzirá o seguinte resultado -
Subtítulos embutidos
Para adicionar um subtítulo embutido a qualquer um dos títulos, basta adicionar <small> ao redor de qualquer um dos elementos ou adicionar .small classe e você obterá um texto menor em uma cor mais clara, conforme mostrado no exemplo abaixo -
<h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1>
<h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2>
<h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3>
<h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</small></h4>
<h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</small></h5>
<h6>I'm Heading6 h6. <small>I'm secondary Heading1 h6</small></h6>O segmento de código acima com Bootstrap produzirá o seguinte resultado -
Cópia do corpo principal
Para adicionar alguma ênfase a um parágrafo, adicione class = "lead". Isso lhe dará um tamanho de fonte maior, peso mais leve e uma altura de linha mais alta, como no exemplo a seguir -
<h2>Lead Example</h2>
<p class = "lead">This is an example paragraph demonstrating
the use of lead body copy. This is an example paragraph
demonstrating the use of lead body copy.This is an example
paragraph demonstrating the use of lead body copy.This is an
example paragraph demonstrating the use of lead body copy.
This is an example paragraph demonstrating the use of lead body copy.</p>Ênfase
As tags de ênfase padrão do HTML, como <small>, definem o texto em 85% do tamanho do pai, <strong> enfatiza um texto com maior espessura de fonte e <em> enfatiza um texto em itálico.
O Bootstrap oferece algumas classes que podem ser usadas para dar ênfase aos textos, como visto no exemplo a seguir -
<small>This content is within tag</small><br>
<strong>This content is within tag</strong><br>
<em>This content is within tag and is rendered as italics</em><br>
<p class = "text-left">Left aligned text.</p>
<p class = "text-center">Center aligned text.</p>
<p class = "text-right">Right aligned text.</p>
<p class = "text-muted">This content is muted</p>
<p class = "text-primary">This content carries a primary class</p>
<p class = "text-success">This content carries a success class</p>
<p class = "text-info">This content carries a info class</p>
<p class = "text-warning">This content carries a warning class</p>
<p class = "text-danger">This content carries a danger class</p>Abreviações
O elemento HTML <abbr> fornece marcação para abreviações ou acrônimos, como WWW ou HTTP. O bootstrap estiliza os elementos <abbr> com uma borda pontilhada clara na parte inferior e revela o texto completo ao pairar (contanto que você adicione esse texto ao atributo de título <abbr>). Para obter um tamanho de fonte um pouco menor, adicione .initialism a <abbr>.
<abbr title = "World Wide Web">WWW</abbr><br>
<abbr title = "Real Simple Syndication" class = "initialism">RSS</abbr>Endereços
Usando a tag <address>, você pode exibir as informações de contato em sua página da web. Uma vez que o padrão de <address> é exibir: block; você precisará usar
Marcas para adicionar quebras de linha ao texto de endereço incluído.
<address>
<strong>Some Company, Inc.</strong><br>
007 street<br>
Some City, State XXXXX<br>
<abbr title = "Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href = "mailto:#">[email protected]</a>
</address>Citações em bloco
Você pode usar o <blockquote> padrão ao redor de qualquer texto HTML. Outras opções incluem adicionar uma tag <small> para identificar a fonte da cotação e alinhar à direita a blockquote usando a classe .pull-right . O exemplo a seguir demonstra todos esses recursos -
<blockquote>
<p>This is a default blockquote example. This is a default
blockquote example. This is a default blockquote
example.This is a default blockquote example. This is a
default blockquote example.</p>
</blockquote>
<blockquote>
This is a blockquote with a source title.
<small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>
<blockquote class = "pull-right">This is a blockquote aligned to the right.
<small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>Listas
Bootstrap oferece suporte a listas ordenadas, listas não ordenadas e listas de definição.
Ordered lists - Uma lista ordenada é uma lista que se enquadra em algum tipo de ordem sequencial e é precedida por números.
Unordered lists- Uma lista não ordenada é uma lista que não possui uma ordem específica e é tradicionalmente estilizada com marcadores. Se você não quiser que os marcadores apareçam, você pode remover o estilo usando a classe .list-unstyled . Você também pode colocar todos os itens da lista em uma única linha usando a classe .list-inline .
Definition lists- Neste tipo de lista, cada item da lista pode consistir nos elementos <dt> e <dd>. <dt> significa termo de definição e, como um dicionário, é o termo (ou frase) que está sendo definido. Posteriormente, o <dd> é a definição de <dt>. Você pode fazer termos e descrições em linha <dl> lado a lado usando a classe dl-horizontal .
O exemplo a seguir demonstra cada um desses tipos -
<h4>Example of Ordered List</h4>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
<h4>Example of UnOrdered List</h4>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Unstyled List</h4>
<ul class = "list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Inline List</h4>
<ul class = "list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Definition List</h4>
<dl>
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
<h4>Example of Horizontal Definition List</h4>
<dl class = "dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>O bootstrap permite que você exiba o código de duas formas diferentes -
O primeiro é a tag <code>. Se você pretende exibir o código embutido, deve usar a tag <code>.
Em segundo lugar está a tag <pre>. Se o código precisar ser exibido como um elemento de bloco autônomo ou se tiver várias linhas, você deve usar a tag <pre>.
Certifique-se de que, ao usar as tags <pre> e <code>, use as variantes Unicode para as tags de abertura e fechamento - < e >.
Vamos ver um exemplo abaixo -
<p><code><header></code> is wrapped as an inline element.</p>
<p>To display code as a standalone block element use <pre> tag as:</p>
<pre>
<article>
<h1>Article Heading</h1>
</article>
</pre>O Bootstrap fornece um layout limpo para a construção de tabelas. Alguns dos elementos da tabela suportados pelo Bootstrap são -
| Sr. Não. | Tag e descrição |
|---|---|
| 1 | <table> Elemento de empacotamento para exibir dados em um formato tabular |
| 2 | <thead> Elemento de contêiner para linhas de cabeçalho da tabela (<tr>) para rotular as colunas da tabela. |
| 3 | <tbody> Elemento de contêiner para linhas da tabela (<tr>) no corpo da tabela. |
| 4 | <tr> Elemento de contêiner para um conjunto de células da tabela (<td> ou <th>) que aparece em uma única linha. |
| 5 | <td> Célula da tabela padrão. |
| 6 | <th> Célula de tabela especial para rótulos de coluna (ou linha, dependendo do escopo e do posicionamento). Deve ser usado em um <thead> |
| 7 | <caption> Descrição ou resumo do que a tabela contém. |
Mesa Básica
Se você quiser um estilo de mesa bonito e básico com apenas um pouco de preenchimento leve e divisórias horizontais, adicione a classe base de .table a qualquer mesa, conforme mostrado no exemplo a seguir -
<table class = "table">
<caption>Basic Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>Classes de mesa opcionais
Junto com a marcação da tabela base e a classe .table, existem algumas classes adicionais que você pode usar para definir o estilo da marcação. As seções a seguir darão uma ideia de todas essas classes.
Mesa Listrada
Ao adicionar a classe .table-stripes , você obterá faixas nas linhas dentro de <tbody>, conforme visto no exemplo a seguir -
<table class = "table table-striped">
<caption>Striped Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>Mesa Bordada
Ao adicionar a classe .table-bordered , você obterá bordas ao redor de cada elemento e cantos arredondados ao redor de toda a tabela, como visto no exemplo a seguir -
<table class = "table table-bordered">
<caption>Bordered Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>Hover Table
Ao adicionar a classe .table-hover , um fundo cinza claro será adicionado às linhas enquanto o cursor passa sobre elas, conforme visto no exemplo a seguir -
<table class = "table table-hover">
<caption>Hover Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>Mesa Condensada
Ao adicionar a classe .table-condensed , o preenchimento de linha é cortado pela metade para condensar a tabela. como visto no exemplo a seguir. Isso é útil se você quiser informações mais densas.
<table class = "table table-condensed">
<caption>Condensed Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>Classes contextuais
As classes contextuais mostradas na tabela a seguir permitirão que você altere a cor de fundo das linhas da sua tabela ou células individuais.
| Sr. Não. | Classe e descrição |
|---|---|
| 1 | .active Aplica a cor flutuante a uma determinada linha ou célula |
| 2 | .success Indica uma ação bem-sucedida ou positiva |
| 3 | .warning Indica um aviso que pode precisar de atenção |
| 4 | .danger Indica uma ação perigosa ou potencialmente negativa |
Essas classes podem ser aplicadas a <tr>, <td> ou <th>.
<table class = "table">
<caption>Contextual Table Layout</caption>
<thead>
<tr>
<th>Product</th>
<th>Payment Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class = "active">
<td>Product1</td>
<td>23/11/2013</td>
<td>Pending</td>
</tr>
<tr class = "success">
<td>Product2</td>
<td>10/11/2013</td>
<td>Delivered</td>
</tr>
<tr class = "warning">
<td>Product3</td>
<td>20/10/2013</td>
<td>In Call to confirm</td>
</tr>
<tr class = "danger">
<td>Product4</td>
<td>20/10/2013</td>
<td>Declined</td>
</tr>
</tbody>
</table>Tabelas responsivas
Envolvendo qualquer .table na classe .table-responsive , você fará a tabela rolar horizontalmente até pequenos dispositivos (abaixo de 768 px). Ao visualizar em algo maior que 768px de largura, você não verá nenhuma diferença nessas tabelas.
<div class = "table-responsive">
<table class = "table">
<caption>Responsive Table Layout</caption>
<thead>
<tr>
<th>Product</th>
<th>Payment Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product1</td>
<td>23/11/2013</td>
<td>Pending</td>
</tr>
<tr>
<td>Product2</td>
<td>10/11/2013</td>
<td>Delivered</td>
</tr>
<tr>
<td>Product3</td>
<td>20/10/2013</td>
<td>In Call to confirm</td>
</tr>
<tr>
<td>Product4</td>
<td>20/10/2013</td>
<td>Declined</td>
</tr>
</tbody>
</table>
</div>Neste capítulo, estudaremos como criar formulários com facilidade usando o Bootstrap. O bootstrap torna isso fácil com a marcação HTML simples e classes estendidas para diferentes estilos de formulários. Neste capítulo, estudaremos como criar formulários com facilidade usando o Bootstrap.
Layout de formulário
O Bootstrap fornece os seguintes tipos de layouts de formulário -
- Forma vertical (padrão)
- Formulário em linha
- Forma horizontal
Forma vertical ou básica
A estrutura básica do formulário vem com o Bootstrap; os controles de formulário individuais recebem automaticamente algum estilo global. Para criar um formulário básico, faça o seguinte -
Adicione um formulário de função ao elemento pai <form>.
Envolva rótulos e controles em um <div> com class .form-group . Isso é necessário para um espaçamento ideal.
Adicione uma classe de .form-control a todos os elementos textuais <input>, <textarea> e <select>.
<form role = "form">
<div class = "form-group">
<label for = "name">Name</label>
<input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
</div>
<div class = "form-group">
<label for = "inputfile">File input</label>
<input type = "file" id = "inputfile">
<p class = "help-block">Example block-level help text here.</p>
</div>
<div class = "checkbox">
<label><input type = "checkbox"> Check me out</label>
</div>
<button type = "submit" class = "btn btn-default">Submit</button>
</form>Formulário Inline
Para criar um formulário em que todos os elementos estão embutidos, alinhados à esquerda e os rótulos ao lado, adicione a classe .form-embutido à tag <form>.
<form class = "form-inline" role = "form">
<div class = "form-group">
<label class = "sr-only" for = "name">Name</label>
<input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
</div>
<div class = "form-group">
<label class = "sr-only" for = "inputfile">File input</label>
<input type = "file" id = "inputfile">
</div>
<div class = "checkbox">
<label><input type = "checkbox"> Check me out</label>
</div>
<button type = "submit" class = "btn btn-default">Submit</button>
</form>Por padrão, as entradas, seleções e áreas de texto têm 100% de largura no Bootstrap. Você precisa definir uma largura nos controles do formulário ao usar o formulário embutido.
Usando a classe .sr-only, você pode ocultar os rótulos dos formulários embutidos.
Forma Horizontal
Os formulários horizontais se diferenciam dos outros não apenas na quantidade de marcação, mas também na apresentação do formulário. Para criar um formulário que usa o layout horizontal, faça o seguinte -
Adicione uma classe de .form-horizontal ao elemento pai <form>.
Envolva rótulos e controles em um <div> com class .form-group .
Adicione uma classe de .control-label aos rótulos.
<form class = "form-horizontal" role = "form">
<div class = "form-group">
<label for = "firstname" class = "col-sm-2 control-label">First Name</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "firstname" placeholder = "Enter First Name">
</div>
</div>
<div class = "form-group">
<label for = "lastname" class = "col-sm-2 control-label">Last Name</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "lastname" placeholder = "Enter Last Name">
</div>
</div>
<div class = "form-group">
<div class = "col-sm-offset-2 col-sm-10">
<div class = "checkbox">
<label><input type = "checkbox"> Remember me</label>
</div>
</div>
</div>
<div class = "form-group">
<div class = "col-sm-offset-2 col-sm-10">
<button type = "submit" class = "btn btn-default">Sign in</button>
</div>
</div>
</form>Controles de formulário suportados
O Bootstrap suporta nativamente os controles de formulário mais comuns, principalmente input, textarea, checkbox, radio e select.
Entradas
O campo de texto de formulário mais comum é o campo de entrada. É aqui que os usuários inserirão a maioria dos dados essenciais do formulário. O Bootstrap oferece suporte para todos os tipos de entrada HTML5 nativos: texto, senha, data e hora, data e hora local, data, mês, hora, semana, número, e-mail, url, pesquisa, tel e cor . A declaração de tipo adequada é necessária para tornar as entradas totalmente estilizadas.
<form role = "form">
<div class = "form-group">
<label for = "name">Label</label>
<input type = "text" class = "form-control" placeholder = "Text input">
</div>
</form>Textarea
A textarea é usada quando você precisa de várias linhas de entrada. Altere o atributo de linhas conforme necessário (menos linhas = caixa menor, mais linhas = caixa maior).
<form role = "form">
<div class = "form-group">
<label for = "name">Text Area</label>
<textarea class = "form-control" rows = "3"></textarea>
</div>
</form>CheckBoxes e botões de rádio
Caixas de seleção e botões de opção são ótimos quando você deseja que os usuários escolham em uma lista de opções predefinidas.
Ao construir um formulário, use a caixa de seleção se quiser que o usuário selecione qualquer número de opções de uma lista. Use o rádio se quiser limitar o usuário a apenas uma seleção.
Use a classe .checkbox-inline ou .radio-inline para que uma série de caixas de seleção ou rádios para os controles apareçam na mesma linha.
O exemplo a seguir demonstra os dois tipos (padrão e embutido) -
<label for = "name">Example of Default Checkbox and radio button </label>
<div class = "checkbox">
<label>
<input type = "checkbox" value = "">Option 1
</label>
</div>
<div class = "checkbox">
<label>
<input type = "checkbox" value = "">Option 2
</label>
</div>
<div class = "radio">
<label>
<input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" checked> Option 1
</label>
</div>
<div class = "radio">
<label>
<input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2">
Option 2 - selecting it will deselect option 1
</label>
</div>
<label for = "name">Example of Inline Checkbox and radio button </label>
<div>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox1" value = "option1"> Option 1
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox2" value = "option2"> Option 2
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox3" value = "option3"> Option 3
</label>
<label class = "checkbox-inline">
<input type = "radio" name = "optionsRadiosinline" id = "optionsRadios3" value = "option1" checked> Option 1
</label>
<label class = "checkbox-inline">
<input type = "radio" name = "optionsRadiosinline" id = "optionsRadios4" value = "option2"> Option 2
</label>
</div>Selecione% s
Uma seleção é usada quando você deseja permitir que o usuário escolha entre várias opções, mas por padrão só permite uma.
Use <select> para opções de lista com as quais o usuário está familiarizado, como estados ou números.
Use multiple = "multiple" para permitir que os usuários selecionem mais de uma opção.
O exemplo a seguir demonstra os dois tipos (selecionar e vários) -
<form role = "form">
<div class = "form-group">
<label for = "name">Select list</label>
<select class = "form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label for = "name">Mutiple Select list</label>
<select multiple class = "form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>Controle Estático
Use a classe .form-control-static em um <p>, quando precisar colocar texto simples próximo a um rótulo de formulário em um formulário horizontal.
<form class = "form-horizontal" role = "form">
<div class = "form-group">
<label class = "col-sm-2 control-label">Email</label>
<div class = "col-sm-10">
<p class = "form-control-static">[email protected]</p>
</div>
</div>
<div class = "form-group">
<label for = "inputPassword" class = "col-sm-2 control-label">Password</label>
<div class = "col-sm-10">
<input type = "password" class = "form-control" id = "inputPassword" placeholder = "Password">
</div>
</div>
</form>Estados de controle do formulário
Além do : focus (ou seja, um usuário clica na entrada ou nas guias), o Bootstrap oferece estilo para entradas desabilitadas e classes para validação de formulário.
Foco de entrada
Quando uma entrada recebe : foco , o contorno da entrada é removido e uma sombra de caixa é aplicada.
Entradas desativadas
Se você precisar desativar uma entrada, simplesmente adicionar o atributo disabled não irá apenas desativá-lo; também mudará o estilo e o cursor do mouse quando o cursor passar sobre o elemento.
Conjuntos de campos desativados
Adicione o atributo disabled a um <fieldset> para desabilitar todos os controles dentro do <fieldset> de uma vez.
Estados de Validação
O bootstrap inclui estilos de validação para erros, avisos e mensagens de sucesso. Para usar, basta adicionar a classe apropriada ( .has-warning, .has-error ou .has-success ) ao elemento pai.
O exemplo a seguir demonstra todos os estados de controle do formulário -
<form class = "form-horizontal" role = "form">
<div class = "form-group">
<label class = "col-sm-2 control-label">Focused</label>
<div class = "col-sm-10">
<input class = "form-control" id = "focusedInput" type = "text" value = "This is focused...">
</div>
</div>
<div class = "form-group">
<label for = "inputPassword" class = "col-sm-2 control-label">
Disabled
</label>
<div class = "col-sm-10">
<input class = "form-control" id = "disabledInput" type = "text" placeholder = "Disabled input here..." disabled>
</div>
</div>
<fieldset disabled>
<div class = "form-group">
<label for = "disabledTextInput" class = "col-sm-2 control-label">
Disabled input (Fieldset disabled)
</label>
<div class = "col-sm-10">
<input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Disabled input">
</div>
</div>
<div class = "form-group">
<label for = "disabledSelect" class = "col-sm-2 control-label">
Disabled select menu (Fieldset disabled)
</label>
<div class = "col-sm-10">
<select id = "disabledSelect" class = "form-control">
<option>Disabled select</option>
</select>
</div>
</div>
</fieldset>
<div class = "form-group has-success">
<label class = "col-sm-2 control-label" for = "inputSuccess">
Input with success
</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputSuccess">
</div>
</div>
<div class = "form-group has-warning">
<label class = "col-sm-2 control-label" for = "inputWarning">
Input with warning
</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputWarning">
</div>
</div>
<div class = "form-group has-error">
<label class = "col-sm-2 control-label" for = "inputError">
Input with error
</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputError">
</div>
</div>
</form>Dimensionamento de controle de formulário
Você pode definir alturas e larguras de formulários usando classes como .input-lg e .col-lg- * respectivamente. O exemplo a seguir demonstra isso -
<form role = "form">
<div class = "form-group">
<input class = "form-control input-lg" type = "text" placeholder =".input-lg">
</div>
<div class = "form-group">
<input class = "form-control" type = "text" placeholder = "Default input">
</div>
<div class = "form-group">
<input class = "form-control input-sm" type = "text" placeholder = ".input-sm">
</div>
<div class = "form-group"></div>
<div class = "form-group">
<select class = "form-control input-lg">
<option value = "">.input-lg</option>
</select>
</div>
<div class = "form-group">
<select class = "form-control">
<option value = "">Default select</option>
</select>
</div>
<div class = "form-group">
<select class = "form-control input-sm">
<option value = "">.input-sm</option>
</select>
</div>
<div class = "row">
<div class = "col-lg-2">
<input type = "text" class = "form-control" placeholder = ".col-lg-2">
</div>
<div class = "col-lg-3">
<input type = "text" class = "form-control" placeholder = ".col-lg-3">
</div>
<div class = "col-lg-4">
<input type = "text" class = "form-control" placeholder = ".col-lg-4">
</div>
</div>
</form>Texto de ajuda
Os controles de formulário de bootstrap podem ter um texto de ajuda em nível de bloco que flui com as entradas. Para adicionar um bloco de conteúdo de largura total, use o bloco .help após <input>. O exemplo a seguir demonstra isso -
<form role = "form">
<span>Example of Help Text</span>
<input class = "form-control" type = "text" placeholder = "">
<span class = "help-block">
A longer block of help text that breaks onto a new line and may extend beyond one line.
</span>
</form>Este capítulo cobre a idade de uso do botão Bootstrap com exemplos. Qualquer coisa que tenha uma classe de.btnirá herdar a aparência padrão de um botão cinza com cantos arredondados. No entanto, o Bootstrap oferece algumas opções para definir o estilo dos botões, que estão resumidas na tabela a seguir -
| Sr. Não. | Classe e descrição |
|---|---|
| 1 | btn Botão padrão / padrão. |
| 2 | btn-primary Fornece peso visual extra e identifica a ação principal em um conjunto de botões. |
| 3 | btn-success Indica uma ação bem-sucedida ou positiva. |
| 4 | btn-info Botão contextual para mensagens de alerta informativas. |
| 5 | btn-warning Indica que cuidado deve ser tomado com esta ação. |
| 6 | btn-danger Indica uma ação perigosa ou potencialmente negativa. |
| 7 | btn-link Retire a ênfase de um botão fazendo-o parecer um link enquanto mantém o comportamento do botão. |
O exemplo a seguir demonstra todas as classes de botão acima -
<!-- Standard button -->
<button type = "button" class = "btn btn-default">Default Button</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type = "button" class = "btn btn-primary">Primary Button</button>
<!-- Indicates a successful or positive action -->
<button type = "button" class = "btn btn-success">Success Button</button>
<!-- Contextual button for informational alert messages -->
<button type = "button" class = "btn btn-info">Info Button</button>
<!-- Indicates caution should be taken with this action -->
<button type = "button" class = "btn btn-warning">Warning Button</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type = "button" class = "btn btn-danger">Danger Button</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type = "button" class = "btn btn-link">Link Button</button>Tamanho do botão
A tabela a seguir resume as classes usadas para obter botões de vários tamanhos -
| Sr. Não. | Classe e descrição |
|---|---|
| 1 | .btn-lg Isso torna o tamanho do botão grande. |
| 2 | .btn-sm Isso torna o tamanho do botão pequeno. |
| 3 | .btn-xs Isso torna o tamanho do botão muito pequeno. |
| 4 | .btn-block Isso cria botões de nível de bloco - aqueles que abrangem a largura total de um pai. |
O exemplo a seguir demonstra isso -
<p>
<button type = "button" class = "btn btn-primary btn-lg">
Large Primary button
</button>
<button type = "button" class = "btn btn-default btn-lg">
Large button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary">
Default size Primary button
</button>
<button type = "button" class = "btn btn-default">
Default size button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-sm">
Small Primary button
</button>
<button type = "button" class = "btn btn-default btn-sm">
Small button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-xs">
Extra small Primary button
</button>
<button type = "button" class = "btn btn-default btn-xs">
Extra small button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-lg btn-block">
Block level Primary button
</button>
<button type = "button" class = "btn btn-default btn-lg btn-block">
Block level button
</button>
</p>Estado do Botão
O Bootstrap fornece classes que permitem alterar o estado dos botões como ativo, desabilitado etc., cada uma das quais é discutida nas seções a seguir.
Estado ativo
Os botões aparecerão pressionados (com um fundo mais escuro, borda mais escura e sombra inserida) quando ativos. A tabela a seguir resume as classes usadas para tornar ativos os elementos de botão e âncora -
| Elemento | Classe |
|---|---|
| Elemento de botão | Usar .active classe para mostrar que está ativado. |
| Elemento âncora | Usar .active classe aos botões <a> para mostrar que está ativado. |
O exemplo a seguir demonstra isso -
<p>
<button type = "button" class = "btn btn-default btn-lg ">
Default Button
</button>
<button type = "button" class = "btn btn-default btn-lg active">
Active Button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-lg">
Primary button
</button>
<button type = "button" class = "btn btn-primary btn-lg active">
Active Primary button
</button>
</p>Estado desativado
Quando você desativa um botão, a cor dele desbotará em 50% e perderá o gradiente.
A tabela a seguir resume as classes usadas para desativar o elemento botão e o elemento âncora -
| Elemento | Classe |
|---|---|
| Elemento de botão | Adicione o disabled atributo para botões <button>. |
| Elemento âncora | Adicione o disabled classe para <a> botões. Note- Esta classe mudará apenas a aparência do <a>, não sua funcionalidade. Você precisa usar JavaScript personalizado para desativar os links aqui. |
O exemplo a seguir demonstra isso -
<p>
<button type = "button" class = "btn btn-default btn-lg">
Default Button
</button>
<button type = "button" class = "btn btn-default btn-lg" disabled = "disabled">
Disabled Button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-lg">
Primary button
</button>
<button type = "button" class = "btn btn-primary btn-lg" disabled = "disabled">
Disabled Primary button
</button>
</p>
<p>
<a href = "#" class = "btn btn-default btn-lg" role = "button">
Link
</a>
<a href = "#" class = "btn btn-default btn-lg disabled" role = "button">
Disabled Link
</a>
</p>
<p>
<a href = "#" class = "btn btn-primary btn-lg" role = "button">
Primary link
</a>
<a href = "#" class = "btn btn-primary btn-lg disabled" role = "button">
Disabled Primary link
</a>
</p>Tags de botão
Você pode usar classes de botão com o elemento <a>, <button> ou <input>. Mas é recomendado que você o use com elementos <button> principalmente para evitar problemas de inconsistência entre navegadores.
O exemplo a seguir demonstra isso -
<a class = "btn btn-default" href = "#" role = "button">Link</a>
<button class = "btn btn-default" type = "submit">Button</button>
<input class = "btn btn-default" type = "button" value = "Input">
<input class = "btn btn-default" type = "submit" value = "Submit">Este capítulo cobre o suporte do Bootstrap para imagens. O Bootstrap fornece três classes que podem ser usadas para aplicar alguns estilos simples a imagens -
.img-rounded- adiciona raio de borda: 6px para dar cantos arredondados à imagem.
.img-circle- torna a imagem inteira redonda adicionando raio de borda: 500px .
.img-thumbnail - adiciona um pouco de preenchimento e uma borda cinza -
O exemplo a seguir demonstra isso -
<img src = "/bootstrap/images/download.png" class = "img-rounded">
<img src = "/bootstrap/images/download.png" class = "img-circle">
<img src = "/bootstrap/images/download.png" class = "img-thumbnail">Este capítulo discute algumas das classes auxiliares no Bootstrap que podem ser úteis.
Fechar ícone
Use o ícone de fechamento genérico para descartar conteúdo como modais e alertas. Use a classeclose para obter o ícone de fechamento.
<p>Close Icon Example
<button type = "button" class = "close" aria-hidden = "true">
×
</button>
</p>Carets
Use circunflexos para indicar a funcionalidade e direção da lista suspensa. Para obter essa funcionalidade, use a classecaret com um elemento <span>.
<p>Caret Example<span class = "caret"></span></p>Flutuadores rápidos
Você pode flutuar um elemento para a esquerda ou direita com a classe pull-left ou pull-right respectivamente, o exemplo a seguir demonstra isso.
<div class = "pull-left">Quick Float to left</div>
<div class = "pull-right">Quick Float to right</div>Para alinhar componentes em navbars com classes utilitárias, use .navbar-left ou .navbar-rightem vez de. Consulte o capítulo da barra de navegação para obter detalhes.
Centralizar blocos de conteúdo
Usar aula center-block para definir um elemento para o centro.
<div class = "row">
<div class = "center-block" style = "width:200px; background-color:#ccc;">
This is an example for center-block
</div>
</div>Clearfix
Para limpar a flutuação de qualquer elemento, use o .clearfix classe.
<div class = "clearfix" style = "background: #D8D8D8;border: 1px solid #000; padding: 10px;">
<div class = "pull-left" style = "background:#58D3F7;">
Quick Float to left
</div>
<div class = "pull-right" style = "background: #DA81F5;">
Quick Float to right
</div>
</div>Mostrando e ocultando conteúdo
Você pode forçar a exibição ou ocultação de um elemento (inclusive para leitores de tela) com o uso de classes .show e .hidden.
<div class = "row" style = "padding: 91px 100px 19px 50px;">
<div class = "show" style = "left-margin:10px; width:300px; background-color:#ccc;">
This is an example for show class
</div>
<div class = "hidden" style = "width:200px; background-color:#ccc;">
This is an example for hide class
</div>
</div>Conteúdo do leitor de tela
Você pode ocultar um elemento para todos os dispositivos, exceto leitores de tela com a classe .sr-only.
<div class = "row" style = "padding: 91px 100px 19px 50px;">
<form class = "form-inline" role = "form">
<div class = "form-group">
<label class = "sr-only" for = "email">Email address</label>
<input type = "email" class = "form-control" placeholder = "Enter email">
</div>
<div class = "form-group">
<label class = "sr-only" for = "pass">Password</label>
<input type = "password" class = "form-control" placeholder = "Password">
</div>
</form>
</div>Aqui podemos ver que o rótulo de ambos os tipos de entrada é atribuído à classe sr-only, portanto, os rótulos ficarão visíveis apenas para leitores de tela.
O Bootstrap oferece algumas classes auxiliares para um desenvolvimento mais rápido e compatível com dispositivos móveis. Eles podem ser usados para mostrar e ocultar conteúdo por dispositivo por meio de consulta de mídia, combinados com dispositivos grandes, pequenos e médios.
Use-os com moderação e evite criar versões totalmente diferentes do mesmo site. Responsive utilities are currently only available for block and table toggling.
| Aulas | Dispositivos |
|---|---|
| .visible-xs | Extra pequeno (menos de 768 px) visível |
| .visible-sm | Pequeno (até 768 px) visível |
| .visible-md | Médio (768 px a 991 px) visível |
| .visible-lg | Maior (992 px e acima) visível |
| .hidden-xs | Extra pequeno (menos de 768 px) oculto |
| .hidden-sm | Pequeno (até 768 px) oculto |
| .hidden-md | Médio (768 px a 991 px) oculto |
| .hidden-lg | Maior (992 px e acima) oculto |
Imprimir aulas
A tabela a seguir lista as classes de impressão. Use-os para alternar o conteúdo para impressão.
| Aulas | Impressão |
|---|---|
| .visible-print | Sim Visível |
| .hidden-print | Visível apenas para o navegador não imprimir. |
Exemplo
O exemplo a seguir demonstra o uso das classes auxiliares listadas acima. Redimensione seu navegador ou carregue o exemplo em diferentes dispositivos para testar as classes de utilitário responsivas.
<div class = "container" style = "padding: 40px;">
<div class = "row visible-on">
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class = "hidden-xs">Extra small</span>
<span class = "visible-xs">✔ Visible on x-small</span>
</div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class = "hidden-sm">Small</span>
<span class = "visible-sm">✔ Visible on small</span>
</div>
<div class = "clearfix visible-xs"></div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class = "hidden-md">Medium</span>
<span class = "visible-md">✔ Visible on medium</span>
</div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class = "hidden-lg">Large</span>
<span class = "visible-lg">✔ Visible on large</span>
</div>
</div>
</div>Checkmarks indica que o elemento está visível em sua janela de visualização atual.
Este capítulo irá discutir sobre Glyphicons, seu uso e alguns exemplos. Bootstrap agrupa 200 glifos em formato de fonte. Vamos agora entender o que são glifos.
O que são glifos?
Glyphicons são fontes de ícones que você pode usar em seus projetos da web. Halflings de Glyphicons não são gratuitos e exigem licenciamento, no entanto, seu criador os disponibilizou para projetos Bootstrap gratuitamente.
"Recomenda-se, como um agradecimento, que inclua um link opcional para GLYPHICONS sempre que possível". - Documentação Bootstrap
Onde encontrar glifos?
Agora que baixamos a versão 3.x do Bootstrap e entendemos sua estrutura de diretórios no capítulo Configuração do ambiente , os glifos podem ser encontrados na pasta de fontes . Este contém os seguintes arquivos -
- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.svg
- glyphicons-halflings-regular.ttf
- glyphicons-halflings-regular.woff
As regras CSS associadas estão presentes nos arquivos bootstrap.css e bootstrap-min.css na pasta css da pasta dist . Você pode ver os glificons disponíveis neste link GLYPHICONS .
Uso
Para usar os ícones, basta usar o código a seguir em qualquer lugar do seu código. Deixe um espaço entre o ícone e o texto para o preenchimento adequado.
<span class = "glyphicon glyphicon-search"></span>O exemplo a seguir demonstra isso -
<p>
<button type = "button" class = "btn btn-default">
<span class = "glyphicon glyphicon-sort-by-attributes"></span>
</button>
<button type = "button" class = "btn btn-default">
<span class = "glyphicon glyphicon-sort-by-attributes-alt"></span>
</button>
<button type = "button" class = "btn btn-default">
<span class = "glyphicon glyphicon-sort-by-order"></span>
</button>
<button type = "button" class = "btn btn-default">
<span class = "glyphicon glyphicon-sort-by-order-alt"></span>
</button>
</p>
<button type = "button" class = "btn btn-default btn-lg">
<span class = "glyphicon glyphicon-user"></span>
User
</button>
<button type = "button" class = "btn btn-default btn-sm">
<span class = "glyphicon glyphicon-user"></span>
User
</button>
<button type ="button" class = "btn btn-default btn-xs">
<span class = "glyphicon glyphicon-user"></span>
User
</button>Este capítulo destacará os menus suspensos do Bootstrap. Os menus suspensos são menus contextuais alternáveis para exibir links em formato de lista. Isso pode ser feito interativo com o plug-in JavaScript suspenso .
Para usar o menu suspenso, basta envolver o menu suspenso dentro da classe .dropdown. O exemplo a seguir demonstra um menu suspenso básico -
<div class = "dropdown">
<button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
Topics
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1">
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Java</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">
Data Communication/Networking
</a>
</li>
<li role = "presentation" class = "divider"></li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
</li>
</ul>
</div>Opções
Alinhamento
Alinhe o menu suspenso à direita adicionando a classe .pull-right para .dropdown-menu. O exemplo a seguir demonstra isso -
<div class = "dropdown">
<button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
Topics
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dropdownMenu1">
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Java</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">
Data Communication/Networking
</a>
</li>
<li role = "presentation" class = "divider"></li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
</li>
</ul>
</div>Cabeçalhos
Você pode adicionar um cabeçalho para rotular seções de ações em qualquer menu suspenso usando a classe dropdown-header. O exemplo a seguir demonstra isso -
<div class = "dropdown">
<button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
Topics
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1">
<li role = "presentation" class = "dropdown-header">Dropdown header</li>
<li role = "presentation" >
<a role = "menuitem" tabindex = "-1" href = "#">Java</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">
Data Communication/Networking
</a>
</li>
<li role = "presentation" class = "divider"></li>
<li role = "presentation" class = "dropdown-header">Dropdown header</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
</li>
</ul>
</div>Os grupos de botões permitem que vários botões sejam empilhados em uma única linha. Isso é útil quando você deseja colocar itens como botões de alinhamento juntos. Você pode adicionar um rádio JavaScript opcional e um comportamento de estilo de caixa de seleção com o plug-in do botão Bootstrap .
A tabela a seguir resume as classes importantes que o Bootstrap oferece para usar grupos de botões -
| Classe | Descrição | Amostra de Código |
|---|---|---|
| .btn-group | Esta classe é usada para um grupo básico de botões. Envolva uma série de botões com a classe.btn dentro .btn-group. | |
| .btn-toolbar | Isso ajuda a combinar conjuntos de <div class = "btn-group"> em uma <div class = "btn-toolbar"> para componentes mais complexos. | |
| .btn-group-lg, .btn-group-sm, .btn-group-xs | Essas classes podem ser aplicadas ao grupo de botões em vez de redimensionar cada botão. | |
| .btn-group-vertical | Esta classe faz com que um conjunto de botões apareça verticalmente empilhados em vez de horizontalmente. | |
Grupo de botões básicos
O exemplo a seguir demonstra o uso de classe .btn-group discutido na tabela acima -
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>
<button type = "button" class = "btn btn-default">Button 3</button>
</div>Barra de ferramentas de botões
O exemplo a seguir demonstra o uso de classe .btn-toolbar discutido na tabela acima -
<div class = "btn-toolbar" role = "toolbar">
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>
<button type = "button" class = "btn btn-default">Button 3</button>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Button 4</button>
<button type = "button" class = "btn btn-default">Button 5</button>
<button type = "button" class = "btn btn-default">Button 6</button>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Button 7</button>
<button type = "button" class = "btn btn-default">Button 8</button>
<button type = "button" class = "btn btn-default">Button 9</button>
</div>
</div>Tamanho do botão
O exemplo a seguir demonstra o uso de classe .btn-group-* discutido na tabela acima -
<div class = "btn-group btn-group-lg">
<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>
<button type = "button" class = "btn btn-default">Button 3</button>
</div>
<div class = "btn-group btn-group-sm">
<button type = "button" class = "btn btn-default">Button 4</button>
<button type = "button" class = "btn btn-default">Button 5</button>
<button type = "button" class = "btn btn-default">Button 6</button>
</div>
<div class = "btn-group btn-group-xs">
<button type = "button" class = "btn btn-default">Button 7</button>
<button type = "button" class = "btn btn-default">Button 8</button>
<button type = "button" class = "btn btn-default">Button 9</button>
</div>Nesting
Você pode aninhar grupos de botões em outro grupo de botões, ou seja, colocar um .btn-group dentro de outro .btn-group . Isso é feito quando você deseja menus suspensos misturados com uma série de botões.
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>
<div class = "btn-group">
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
Dropdown
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu">
<li><a href = "#">Dropdown link 1</a></li>
<li><a href = "#">Dropdown link 2</a></li>
</ul>
</div>
</div>Grupo de botões vertical
O exemplo a seguir demonstra o uso de classe .btn-group-vertical discutido na tabela acima -
<div class = "btn-group-vertical">
<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>
<div class = "btn-group-vertical">
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
Dropdown
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu">
<li><a href = "#">Dropdown link 1</a></li>
<li><a href = "#">Dropdown link 2</a></li>
</ul>
</div>
</div>Este capítulo irá discutir sobre como adicionar menu suspenso a botões usando classes Bootstrap. Para adicionar um menu suspenso a um botão, basta envolver o botão e o menu suspenso em um.btn-group. Você também pode usar <span class = "caret"> </span> para atuar como um indicador de que o botão é um menu suspenso.
O exemplo a seguir demonstra menus suspensos básicos de um único botão -
<div class = "btn-group">
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
Default
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
Primary
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>Botões suspensos de divisão
Os menus suspensos do botão de divisão usam o mesmo estilo geral do botão suspenso, mas adicionam uma ação principal junto com o menu suspenso. Os botões de divisão têm a ação principal à esquerda e um alternador à direita que exibe o menu suspenso.
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Default</button>
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
<span class = "caret"></span>
<span class = "sr-only">Toggle Dropdown</span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-primary">Primary</button>
<button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
<span class = "caret"></span>
<span class = "sr-only">Toggle Dropdown</span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>Tamanho da lista suspensa do botão
Você pode usar os menus suspensos com qualquer tamanho de botão - .btn-large, .btn-sm, ou .btn-xs.
<div class = "btn-group">
<button type = "button" class = "btn btn-default dropdown-toggle btn-lg" data-toggle = "dropdown">
Default
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-primary dropdown-toggle btn-sm" data-toggle = "dropdown">
Primary
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-success dropdown-toggle btn-xs" data-toggle = "dropdown">
Success
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>Variação Dropup
Os menus também podem ser criados para abrir em vez de para baixo. Para conseguir isso, basta adicionar.dropup para o pai .btn-group recipiente.
<div class = "row" style = "margin-left:50px; margin-top:200px">
<div class = "btn-group dropup">
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
Default
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>
<div class = "btn-group dropup">
<button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
Primary
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>
</div>Este capítulo explica sobre mais um recurso compatível com o Bootstrap, os grupos de entrada. Os grupos de entrada são controles de formulário estendidos . Usando grupos de entrada, você pode facilmente preceder e acrescentar texto ou botões às entradas baseadas em texto.
Adicionando conteúdo prefixado e acrescentado a um campo de entrada, você pode adicionar elementos comuns à entrada do usuário. Por exemplo, você pode adicionar o símbolo do dólar, o @ para um nome de usuário do Twitter ou qualquer outra coisa que possa ser comum para a interface do seu aplicativo.
Para preceder ou acrescentar elementos a um .form-control-
Enrole em um <div> com classe .input-group
Como uma próxima etapa, dentro do mesmo <div>, coloque seu conteúdo extra dentro de um <span> com classe .input-group-addon.
Agora coloque este <span> antes ou depois do elemento <input>.
Para compatibilidade entre navegadores, evite usar elementos <select> aqui, pois eles não podem ser totalmente estilizados em navegadores WebKit. Também não aplique classes de grupo de entrada diretamente para formar grupos. Um grupo de entrada é um componente isolado.
Grupo de entrada básico
O exemplo a seguir demonstra o grupo de entrada básico -
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "input-group">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "twitterhandle">
</div>
<br>
<div class = "input-group">
<input type = "text" class = "form-control">
<span class = "input-group-addon">.00</span>
</div>
<br>
<div class = "input-group">
<span class = "input-group-addon">$</span>
<input type = "text" class =" form-control">
<span class = "input-group-addon">.00</span>
</div>
</form>
</div>Tamanho do grupo de entrada
Você pode alterar o tamanho dos grupos de entrada, adicionando as classes de dimensionamento de formulários relativos, como .input-group-lg, input-group-sm, input-group-xs ao .input-groupem si. O conteúdo será redimensionado automaticamente.
Os exemplos a seguir demonstram isso -
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "input-group input-group-lg">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "Twitterhandle">
</div>
<br>
<div class = "input-group">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "Twitterhandle">
</div>
<br>
<div class = "input-group input-group-sm">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "Twitterhandle">
</div>
</form>
</div>Caixas de seleção e complementos de rádio
Você pode pré-anexar ou anexar botões de opção e caixas de seleção em vez de texto, conforme demonstrado no exemplo a seguir -
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<span class = "input-group-addon">
<input type = "checkbox">
</span>
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class = "col-lg-6">
<div class = "input-group">
<span class = "input-group-addon">
<input type = "radio">
</span>
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>Addons de botão
Você pode até pré-anexar ou anexar botões em grupos de entrada. Ao invés de.input-group-addon classe, você precisará usar classe .input-group-btnpara embrulhar os botões. Isso é necessário devido aos estilos de navegador padrão que não podem ser substituídos. Os exemplos a seguir demonstram isso -
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<span class = "input-group-btn">
<button class = "btn btn-default" type = "button">
Go!
</button>
</span>
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class = "col-lg-6">
<div class = "input-group">
<input type = "text" class = "form-control">
<span class = "input-group-btn">
<button class = "btn btn-default" type = "button">
Go!
</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>Botões com menus suspensos
Adicionar botões com menus suspensos em grupos de entrada pode ser feito simplesmente envolvendo o botão e o menu suspenso em um .input-group-btn classe conforme demonstrado no exemplo a seguir -
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown">
DropdownMenu
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class = "col-lg-6">
<div class = "input-group">
<input type = "text" class = "form-control">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown">
DropdownMenu
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu pull-right">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>Botões Segmentados
Para segmentar menus suspensos de botões em grupos de entrada, use o mesmo estilo geral do botão suspenso, mas adicione uma ação principal junto com o menu suspenso, como pode ser visto no exemplo a seguir -
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default"
tabindex = "-1">Dropdown Menu</button>
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown" tabindex = "-1">
<span class = "caret"></span>
<span class = "sr-only">Toggle Dropdown</span>
</button>
<ul class = "dropdown-menu">
<li><a href = "#">Action</a></li>
<li><a href ="#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class = "col-lg-6">
<div class = "input-group">
<input type = "text" class = "form-control">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default" tabindex = "-1">
Dropdown Menu
</button>
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown" tabindex = "-1">
<span class = "caret"></span>
<span class = "sr-only">Toggle Dropdown</span>
</button>
<ul class = "dropdown-menu pull-right">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>O Bootstrap oferece algumas opções diferentes para estilizar os elementos de navegação. Todos eles compartilham a mesma marcação e classe base,.nav. O Bootstrap também fornece uma classe auxiliar, para compartilhar marcações e estados. Troque as classes do modificador para alternar entre cada estilo.
Navegação tabular ou guias
Para criar um menu de navegação com guias -
Comece com uma lista básica não ordenada com a classe base de .nav
Adicionar classe .nav-tabs.
O exemplo a seguir demonstra isso -
<p>Tabs Example</p>
<ul class = "nav nav-tabs">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">PHP</a></li>
</ul>Navegação de comprimidos
Pílulas básicas
Para transformar as guias em pílulas, siga as mesmas etapas acima, use a classe .nav-pills ao invés de .nav-tabs.
O exemplo a seguir demonstra isso -
<p>Pills Example</p>
<ul class = "nav nav-pills">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">PHP</a></li>
</ul>Comprimidos verticais
Você pode empilhar os comprimidos verticalmente usando a classe .nav-stacked junto com as aulas - .nav, .nav-pills.
O exemplo a seguir demonstra isso -
<p>Vertical Pills Example</p>
<ul class = "nav nav-pills nav-stacked">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">PHP</a></li>
</ul>Nav justificado
Você pode fazer tabulações ou pílulas de larguras iguais às de seus pais em telas maiores que 768 px usando a classe .nav-justified junto com .nav, .nav-tabs ou .nav, .nav-pillsrespectivamente. Em telas menores, os links de navegação são empilhados.
O exemplo a seguir demonstra isso -
<p>Justified Nav Elements Example</p>
<ul class = "nav nav-pills nav-justified">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">PHP</a></li>
</ul>
<br>
<br>
<br>
<ul class = "nav nav-tabs nav-justified">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">PHP</a></li>
</ul>Links Desabilitados
Para cada um dos .nav classes, se você adicionar o .disabled classe, ele criará um link cinza que também desativa o :hover estado conforme mostrado no exemplo a seguir -
<p>Disabled Link Example</p>
<ul class = "nav nav-pills">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li class = "disabled"><a href = "#">iOS(disabled link)</a></li>
<li><a href = "#">VB.Net</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">PHP</a></li>
</ul>
<br>
<br>
<ul class = "nav nav-tabs">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li class = "disabled"><a href = "#">VB.Net(disabled link)</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">PHP</a></li>
</ul>Esta classe mudará apenas a aparência do <a>, não sua funcionalidade. Use JavaScript personalizado para desativar links aqui.
Dropdowns
Os menus de navegação compartilham uma sintaxe semelhante aos menus suspensos. Por padrão, você tem um item de lista que tem uma âncora trabalhando em conjunto com alguns atributos de dados para acionar uma lista não ordenada com um.dropdown-menu classe.
Guias com menus suspensos
Para adicionar menus suspensos à guia -
Comece com uma lista básica não ordenada com a classe base de .nav
Adicione a classe .nav-tabs.
Agora adicione uma lista não ordenada com um .dropdown-menu classe.
<p>Tabs With Dropdown Example</p>
<ul class = "nav nav-tabs">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li class = "dropdown">
<a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
Java
<span class = "caret"></span>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">Swing</a></li>
<li><a href = "#">jMeter</a></li>
<li><a href = "#">EJB</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</li>
<li><a href = "#">PHP</a></li>
</ul>Comprimidos com menus suspensos
Para fazer o mesmo com os comprimidos, basta trocar o .nav-tabs aula com .nav-pills conforme mostrado no exemplo a seguir.
<p>Pills With Dropdown Example</p>
<ul class = "nav nav-pills">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li class = "dropdown">
<a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
Java <span class = "caret"></span>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">Swing</a></li>
<li><a href = "#">jMeter</a></li>
<li><a href = "#">EJB</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</li>
<li><a href = "#">PHP</a></li>
</ul>O navbar é um dos recursos mais importantes dos sites Bootstrap. As barras de navegação são 'meta' componentes responsivos que servem como cabeçalhos de navegação para seu aplicativo ou site. As barras de navegação diminuem nas visualizações móveis e se tornam horizontais conforme a largura da janela de visualização disponível aumenta. Em seu núcleo, a barra de navegação inclui estilo para nomes de sites e navegação básica.
Navbar padrão
Para criar uma barra de navegação padrão -
Adicione as classes .navbar, .navbar-default para a tag <nav>.
Adicionar role = "navigation" ao elemento acima, para ajudar na acessibilidade.
Adicionar uma classe de cabeçalho .navbar-headerpara o elemento <div>. Inclui um elemento <a> com a classenavbar-brand. Isso dará ao texto um tamanho um pouco maior.
Para adicionar links à barra de navegação, basta adicionar uma lista não ordenada com as classes de .nav, .navbar-nav.
O exemplo a seguir demonstra isso -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Navbar responsivo
Para adicionar recursos responsivos à barra de navegação, o conteúdo que você deseja recolher precisa ser empacotado em um <div> com classes .collapse, .navbar-collapse. A natureza em colapso é acionada por um botão que tem a classe de.navbar-togglee então apresenta dois elementos de dados. O primeiro,data-toggle, é usado para dizer ao JavaScript o que fazer com o botão, e o segundo, data-target, indica qual elemento alternar. Então
O exemplo a seguir demonstra isso -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<button type = "button" class = "navbar-toggle"
data-toggle = "collapse" data-target = "#example-navbar-collapse">
<span class = "sr-only">Toggle navigation</span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div class = "collapse navbar-collapse" id = "example-navbar-collapse">
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Formulários na Navbar
Em vez de usar os formulários baseados em classe padrão do Capítulo Bootstrap Forms , formulários que estão na barra de navegação, use o.navbar-formclasse. Isso garante o alinhamento vertical adequado do formulário e o comportamento de recolhimento em viewports estreitas. Use as opções de alinhamento (explicadas na seção Alinhamento do componente) para decidir onde ele reside no conteúdo da barra de navegação.
O exemplo a seguir demonstra isso -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<form class = "navbar-form navbar-left" role = "search">
<div class = "form-group">
<input type = "text" class = "form-control" placeholder = "Search">
</div>
<button type = "submit" class = "btn btn-default">Submit</button>
</form>
</div>
</nav>Botões na Navbar
Você pode adicionar botões usando a classe .navbar-btn para <button> elementos que não residem em um <form> para centralizá-los verticalmente na barra de navegação. .navbar-btn pode ser usado em elementos <a> e <input>.
Não use .navbar-btnnem as classes de botão padrão em <a> elementos dentro .navbar-nav.
O exemplo a seguir demonstra isso -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<form class = "navbar-form navbar-left" role = "search">
<div class = "form-group">
<input type = "text" class = "form-control" placeholder = "Search">
</div>
<button type = "submit" class = "btn btn-default">Submit Button</button>
</form>
<button type = "button" class = "btn btn-default navbar-btn">Navbar Button</button>
</div>
</nav>Texto na Navbar
Para quebrar strings de texto em um elemento, use a classe .navbar-text. Isso geralmente é usado com a tag <p> para entrelinhas e cores adequadas. O exemplo a seguir demonstra isso -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<p class = "navbar-text">Signed in as Thomas</p>
</div>
</nav>Links não nav
Se você quiser usar os links padrão que não estão no componente de navegação regular da barra de navegação, use a classe navbar-link para adicionar cores adequadas para as opções da barra de navegação padrão e inversa, conforme mostrado no exemplo a seguir -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<p class = "navbar-text navbar-right">
Signed in as
<a href = "#" class = "navbar-link">Thomas</a>
</p>
</div>
</nav>Alinhamento de Componentes
Você pode alinhar os componentes como links de navegação, formulários, botões ou texto à esquerda ou à direita em uma barra de navegação usando as classes de utilitário.navbar-left ou .navbar-right. Ambas as classes irão adicionar um float CSS na direção especificada. O exemplo a seguir demonstra isso -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<!--Left Align-->
<ul class = "nav navbar-nav navbar-left">
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class = "navbar-form navbar-left" role = "search">
<button type = "submit" class = "btn btn-default">Left align-Submit Button</button>
</form>
<p class = "navbar-text navbar-left">Left align-Text</p>
<!--Right Align-->
<ul class = "nav navbar-nav navbar-right">
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class = "navbar-form navbar-right" role = "search">
<button type = "submit" class = "btn btn-default">
Right align-Submit Button
</button>
</form>
<p class = "navbar-text navbar-right">Right align-Text</p>
</div>
</nav>Fixo no topo
A barra de navegação Bootstrap pode ser dinâmica em seu posicionamento. Por padrão, é um elemento de nível de bloco que obtém seu posicionamento com base em seu posicionamento no HTML. Com algumas classes auxiliares, você pode colocá-lo na parte superior ou inferior da página ou pode fazê-lo rolar estaticamente com a página.
Se você quiser que a barra de navegação seja fixada no topo, adicione uma classe .navbar-fixed-top ao .navbar class. O exemplo a seguir demonstra isso -
Para evitar que a barra de navegação fique em cima de outro conteúdo no corpo da página, adicione pelo menos 50 pixels de preenchimento à tag <body> ou tente seus próprios valores.
<nav class = "navbar navbar-default navbar-fixed-top" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Fixo na parte inferior
Se você quiser que a barra de navegação seja fixada na parte inferior da página, adicione a classe .navbar-fixed-bottom ao .navbar class. O exemplo a seguir demonstra isso -
<nav class = "navbar navbar-default navbar-fixed-bottom" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class ="caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Top estático
Para criar uma barra de navegação que rola com a página, adicione o .navbar-static-topclasse. Esta classe não requer a adição de preenchimento ao <body>.
<nav class = "navbar navbar-default navbar-static-top" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Navbar invertido
Para criar uma barra de navegação invertida com um fundo preto e com texto branco, basta adicionar o .navbar-inverse classe para o .navbar classe conforme demonstrado no exemplo a seguir -
Para evitar que a barra de navegação fique em cima de outro conteúdo no corpo da página, adicione pelo menos 50 pixels de preenchimento à tag <body> ou tente seus próprios valores.
<nav class = "navbar navbar-inverse" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Breadcrumbs são uma ótima maneira de mostrar informações baseadas em hierarquia para um site. No caso de blogs, breadcrumbs podem mostrar as datas de publicação, categorias ou marcas. Eles indicam a localização da página atual dentro de uma hierarquia de navegação.
A localização atual no Bootstrap é simplesmente uma lista não ordenada com uma classe de .breadcrumb. O separador é adicionado automaticamente pelo CSS (bootstrap.min.css) por meio da seguinte classe -
.breadcrumb > li + li:before {
color: #CCCCCC;
content: "/ ";
padding: 0 5px;
}O exemplo a seguir demonstra breadcrumbs -
<ol class = "breadcrumb">
<li><a href = "#">Home</a></li>
<li><a href = "#">2013</a></li>
<li class = "active">November</li>
</ol>Este capítulo discute sobre o recurso de paginação que o Bootstrap suporta. Paginação, uma lista não ordenada, é tratada pelo Bootstrap como muitos outros elementos da interface.
Paginação
A tabela a seguir lista as classes que o Bootstrap fornece para lidar com a paginação.
| Classe | Descrição | Código de amostra |
|---|---|---|
| .paginação | Adicione esta classe para obter a paginação em sua página. | |
| .desabilitado, .ativo | Você pode personalizar links usando .disabled para links não clicáveis e .active para indicar a página atual. | |
| .pagination-lg, .pagination-sm | Use essas classes para obter itens de tamanhos diferentes. | |
Paginação padrão
O exemplo a seguir demonstra o uso de classe .pagination discutido na tabela acima -
<ul class = "pagination">
<li><a href = "#">«</a></li>
<li><a href = "#">1</a></li>
<li><a href = "#">2</a></li>
<li><a href = "#">3</a></li>
<li><a href = "#">4</a></li>
<li><a href = "#">5</a></li>
<li><a href = "#">»</a></li>
</ul>Estados
O exemplo a seguir demonstra o uso de classe .disabled, .active discutido na tabela acima -
<ul class = "pagination">
<li><a href = "#">«</a></li>
<li class = "active"><a href = "#">1</a></li>
<li class = "disabled"><a href = "#">2</a></li>
<li><a href = "#">3</a></li>
<li><a href = "#">4</a></li>
<li><a href = "#">5</a></li>
<li><a href = "#">»</a></li>
</ul>Dimensionamento
O exemplo a seguir demonstra o uso de classes para dimensionamento, .pagination-* discutido na tabela acima -
<ul class = "pagination pagination-lg">
<li><a href = "#">«</a></li>
<li><a href = "#">1</a></li>
<li><a href = "#">2</a></li>
<li><a href = "#">3</a></li>
<li><a href = "#">4</a></li>
<li><a href = "#">5</a></li>
<li><a href = "#">»</a></li>
</ul>
<br>
<ul class = "pagination">
<li><a href = "#">«</a></li>
<li><a href = "#">1</a></li>
<li><a href = "#">2</a></li>
<li><a href = "#">3</a></li>
<li><a href = "#">4</a></li>
<li><a href = "#">5</a></li>
<li><a href = "#">»</a></li>
</ul>
<br>
<ul class = "pagination pagination-sm">
<li><a href = "#">«</a></li>
<li><a href = "#">1</a></li>
<li><a href = "#">2</a></li>
<li><a href = "#">3</a></li>
<li><a href = "#">4</a></li>
<li><a href = "#">5</a></li>
<li><a href = "#">»</a></li>
</ul>Pager
Se você precisar criar links de paginação simples que vão além do texto, o pager pode funcionar muito bem. Como os links de paginação, o pager é uma lista não ordenada. Por padrão, os links são centralizados. A tabela a seguir lista as classes que o Bootstrap fornece para pager.
| Classe | Descrição | Código de amostra |
|---|---|---|
| .pager | Adicione esta classe para obter os links do pager. | |
| .Anterior Próximo | Usar aula .previous para alinhar à esquerda e .next para alinhar os links à direita. | |
| .Desativado | Adicione esta classe para obter uma aparência silenciosa. | |
Pager padrão
O exemplo a seguir demonstra o uso de classe .pager discutido na tabela acima -
<ul class = "pager">
<li><a href = "#">Previous</a></li>
<li><a href = "#">Next</a></li>
</ul>Links Alinhados
O exemplo a seguir demonstra o uso de classes para alinhamento, .previous, .next discutido na tabela acima -
<ul class = "pager">
<li class = "previous"><a href = "#">← Older</a></li>
<li class = "next"><a href = "#">Newer →</a></li>
</ul>Estados
O exemplo a seguir demonstra o uso de classe .disabled discutido na tabela acima -
<ul class = "pager">
<li class = "previous disabled"><a href = "#">← Older</a></li>
<li class = "next"><a href = "#">Newer →</a></li>
</ul>Este capítulo cobre os rótulos do Bootstrap. Os rótulos são ótimos para oferecer contagens, dicas ou outras marcações para páginas. Usar aula.label para exibir rótulos conforme mostrado no exemplo a seguir -
<h1>Example Heading <span class = "label label-default">Label</span></h1>
<h2>Example Heading <span class =" label label-default">Label</span></h2>
<h3>Example Heading <span class = "label label-default">Label</span></h3>
<h4>Example Heading <span class = "label label-default">Label</span></h4>Você pode modificar a aparência dos rótulos usando as classes modificadoras como, label-default, label-primary, label-success, label-info, label-warning, label-danger como mostrado no exemplo a seguir -
<span class = "label label-default">Default Label</span>
<span class = "label label-primary">Primary Label</span>
<span class = "label label-success">Success Label</span>
<span class = "label label-info">Info Label</span>
<span class = "label label-warning">Warning Label</span>
<span class = "label label-danger">Danger Label</span>Este capítulo discutirá sobre os emblemas do Bootstrap. Os emblemas são semelhantes aos rótulos; a principal diferença é que os cantos são mais arredondados.
Os emblemas são usados principalmente para destacar itens novos ou não lidos. Para usar emblemas, basta adicionar<span class = "badge"> para links, navs Bootstrap e muito mais.
O exemplo a seguir demonstra isso -
<a href = "#">Mailbox <span class = "badge">50</span></a>Quando não houver itens novos ou não lidos, os selos simplesmente serão recolhidos via CSS :empty seletor, desde que não exista conteúdo dentro.
Estados de navegação ativos
Você pode colocar crachás em estados ativos de navegação de pílula e lista. Você pode conseguir isso colocando<span class = "badge"> para links ativos, conforme demonstrado no exemplo a seguir -
<h4>Example for Active State in Pill </h4>
<ul class = "nav nav-pills">
<li class = "active"><a href = "#">Home <span class ="badge">42</span></a></li>
<li><a href = "#">Profile</a></li>
<li><a href = "#">Messages <span class = "badge">3</span></a></li>
</ul>
<br>
<h4>Example for Active State in navigations</h4>
<ul class = "nav nav-pills nav-stacked" style = "max-width: 260px;">
<li class = "active">
<a href = "#">
<span class = "badge pull-right">42</span>
Home
</a>
</li>
<li><a href = "#">Profile</a></li>
<li>
<a href = "#">
<span class = "badge pull-right">3</span>
Messages
</a>
</li>
</ul>Este capítulo discutirá mais um recurso compatível com o Bootstrap, o Jumbotron. Como o nome sugere, esse componente pode, opcionalmente, aumentar o tamanho dos títulos e adicionar muita margem para o conteúdo da página de destino. Para usar o Jumbotron -
Crie um container <div> com a classe de .jumbotron.
Além de um <h1> maior, a espessura da fonte é reduzida para 200px.
O exemplo a seguir demonstra isso -
<div class = "container">
<div class = "jumbotron">
<h1>Welcome to landing page!</h1>
<p>This is an example for jumbotron.</p>
<p>
<a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
</p>
</div>
</div>Para obter um jumbotron de largura total e sem cantos arredondados, use o .jumbotron classe fora de tudo .container classes e, em vez disso, adicione um .container dentro, conforme mostrado no exemplo a seguir -
<div class = "jumbotron">
<div class = "container">
<h1>Welcome to landing page!</h1>
<p>This is an example for jumbotron.</p>
<p>
<a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
</p>
</div>
</div>O cabeçalho da página é um pequeno recurso interessante para adicionar espaçamento apropriado ao redor dos cabeçalhos de uma página. Isso é particularmente útil em uma página da web onde você pode ter vários títulos de post e precisa de uma maneira de adicionar distinção a cada um deles. Para usar um cabeçalho de página, envolva seu título em um <div> com uma classe de.page-header -
<div class = "page-header">
<h1>
Example page header
<small>Subtext for header</small>
</h1>
</div>
<p>This is a sample text.This is a sample text.This is a sample text. This is a sample text.</p>Este capítulo discute sobre miniaturas do Bootstrap. Muitos sites precisam de uma forma de organizar imagens, vídeos, texto, etc, em uma grade, e o Bootstrap tem uma maneira fácil de fazer isso com miniaturas. Para criar miniaturas usando Bootstrap -
Adicione uma tag <a> com a classe de .thumbnail em torno de uma imagem.
Isso adiciona quatro pixels de preenchimento e uma borda cinza.
Ao pairar, um brilho animado delineia a imagem.
O exemplo a seguir demonstra uma miniatura padrão -
<div class = "row">
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</a>
</div>
</div>Adicionando Conteúdo Personalizado
Agora que temos uma miniatura básica, é possível adicionar qualquer tipo de conteúdo HTML como cabeçalhos, parágrafos ou botões nas miniaturas. Siga as etapas abaixo -
Altere a tag <a> que tem uma classe de .thumbnail para um <div>.
Dentro desse <div>, você pode adicionar qualquer coisa que precisar. Como este é um <div>, podemos usar a convenção de nomenclatura padrão baseada em extensão para dimensionamento.
Se você quiser agrupar várias imagens, coloque-as em uma lista não ordenada e cada item da lista flutuará para a esquerda.
O exemplo a seguir demonstra isso -
<div class = "row">
<div class = "col-sm-6 col-md-3">
<div class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</div>
<div class = "caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href = "#" class = "btn btn-primary" role = "button">
Button
</a>
<a href = "#" class = "btn btn-default" role = "button">
Button
</a>
</p>
</div>
</div>
<div class = "col-sm-6 col-md-3">
<div class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</div>
<div class = "caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href = "#" class = "btn btn-primary" role = "button">
Button
</a>
<a href = "#" class = "btn btn-default" role = "button">
Button
</a>
</p>
</div>
</div>
<div class = "col-sm-6 col-md-3">
<div class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</div>
<div class = "caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href = "#" class = "btn btn-primary" role = "button">
Button
</a>
<a href = "#" class = "btn btn-default" role =" button">
Button
</a>
</p>
</div>
</div>
<div class = "col-sm-6 col-md-3">
<div class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</div>
<div class = "caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href = "#" class = "btn btn-primary" role = "button">
Button
</a>
<a href = "#" class = "btn btn-default" role = "button">
Button
</a>
</p>
</div>
</div>
</div>Este capítulo discutirá sobre alertas e as classes que o Bootstrap fornece para alertas. Os alertas fornecem uma maneira de definir o estilo das mensagens para o usuário. Eles fornecem mensagens de feedback contextual para ações típicas do usuário.
Você pode adicionar um ícone de fechamento opcional para alertar. Para dispensar inline, use o plugin Alerts jQuery .
Você pode adicionar um alerta básico criando um wrapper <div> e adicionando uma classe de .alert e uma das quatro classes contextuais (por exemplo, .alert-success, .alert-info, .alert-warning, .alert-danger) O exemplo a seguir demonstra isso -
<div class = "alert alert-success">Success! Well done its submitted.</div>
<div class = "alert alert-info">Info! take this info.</div>
<div class = "alert alert-warning">Warning ! Dont submit this.</div>
<div class = "alert alert-danger">Error ! Change few things.</div>Alertas de dispensa
Para construir um alerta de dispensa -
Adicione um alerta básico criando um wrapper <div> e adicionando uma classe de .alert e uma das quatro classes contextuais (por exemplo, .alert-success, .alert-info, .alert-warning, .alert-danger)
Também adicione opcional .alert-dismissable para a classe <div> acima.
Adicione um botão Fechar.
O exemplo a seguir demonstra isso -
<div class = "alert alert-success alert-dismissable">
<button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
×
</button>
Success! Well done its submitted.
</div>
<div class = "alert alert-info alert-dismissable">
<button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
×
</button>
Info! take this info.
</div>
<div class = "alert alert-warning alert-dismissable">
<button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
×
</button>
Warning ! Dont submit this.
</div>
<div class = "alert alert-danger alert-dismissable">
<button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
×
</button>
Error ! Change few things.
</div>Certifique-se de usar o elemento <button> com o atributo data-CC0 = "alert" data.
Links em alertas
Para obter links em alertas -
Adicione um alerta básico criando um wrapper <div> e adicionando uma classe de .alert e uma das quatro classes contextuais (por exemplo, .alert-success, .alert-info, .alert-warning, .alert-danger)
Use o .alert-link classe de utilitário para fornecer rapidamente links coloridos correspondentes em qualquer alerta.
<div class = "alert alert-success">
<a href = "#" class = "alert-link">Success! Well done its submitted.</a>
</div>
<div class = "alert alert-info">
<a href = "#" class = "alert-link">Info! take this info.</a>
</div>
<div class = "alert alert-warning">
<a href = "#" class = "alert-link">Warning ! Dont submit this.</a>
</div>
<div class = "alert alert-danger">
<a href = "#" class = "alert-link">Error ! Change few things.</a>
</div>Este capítulo discute sobre as barras de progresso do Bootstrap. O objetivo das barras de progresso é mostrar que os ativos estão sendo carregados, em andamento ou que há uma ação em andamento em relação aos elementos da página.
As barras de progresso usam transições e animações CSS3 para obter alguns de seus efeitos. Esses recursos não são suportados no Internet Explorer 9 e anteriores ou em versões anteriores do Firefox. O Opera 12 não oferece suporte a animações.
Barra de progresso padrão
Para criar uma barra de progresso básica -
Adicione um <div> com uma classe de .progress.
Em seguida, dentro do <div> acima, adicione um <div> vazio com uma classe de .progress-bar.
Adicione um atributo de estilo com a largura expressa como uma porcentagem. Digamos, por exemplo, style = "60%"; indica que a barra de progresso estava em 60%.
Vamos ver um exemplo abaixo -
<div class = "progress">
<div class = "progress-bar" role = "progressbar" aria-valuenow = "60"
aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
<span class = "sr-only">40% Complete</span>
</div>
</div>Barra de progresso alternativa
Para criar uma barra de progresso com estilos diferentes -
Adicione um <div> com uma classe de .progress.
Em seguida, dentro do <div> acima, adicione um <div> vazio com uma classe de .progress-bar e classe progress-bar-* onde * poderia estar success, info, warning, danger.
Adicione um atributo de estilo com a largura expressa como uma porcentagem. Digamos, por exemplo, style = "60%"; indica que a barra de progresso estava em 60%.
Vamos ver um exemplo abaixo -
<div class = "progress">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
<span class = "sr-only">90% Complete (Sucess)</span>
</div>
</div>
<div class = "progress">
<div class = "progress-bar progress-bar-info" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
<span class = "sr-only">30% Complete (info)</span>
</div>
</div>
<div class = "progress">
<div class = "progress-bar progress-bar-warning" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
<span class = "sr-only">20%Complete (warning)</span>
</div>
</div>
<div class = "progress">
<div class = "progress-bar progress-bar-danger" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
<span class = "sr-only">10% Complete (danger)</span>
</div>
</div>Barra de progresso listrada
Para criar uma barra de progresso listrada -
Adicione um <div> com uma classe de .progress e .progress-striped.
Em seguida, dentro do <div> acima, adicione um <div> vazio com uma classe de .progress-bar e classe progress-bar-* onde * poderia estar success, info, warning, danger.
Adicione um atributo de estilo com a largura expressa como uma porcentagem. Digamos, por exemplo, style = "60%"; indica que a barra de progresso estava em 60%.
Vamos ver um exemplo abaixo -
<div class = "progress progress-striped">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
<span class = "sr-only">90% Complete (Sucess)</span>
</div>
</div>
<div class = "progress progress-striped">
<div class = "progress-bar progress-bar-info" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
<span class = "sr-only">30% Complete (info)</span>
</div>
</div>
<div class = "progress progress-striped">
<div class = "progress-bar progress-bar-warning" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style="width: 20%;">
<span class = "sr-only">20%Complete (warning)</span>
</div>
</div>
<div class = "progress progress-striped">
<div class = "progress-bar progress-bar-danger" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
<span class = "sr-only">10% Complete (danger)</span>
</div>
</div>Barra de Progresso Animada
Para criar uma barra de progresso animada -
Adicione um <div> com uma classe de .progress e .progress-striped. Também adicionar classe.active para .progress-striped.
Em seguida, dentro do <div> acima, adicione um <div> vazio com uma classe de .progress-bar.
Adicione um atributo de estilo com a largura expressa como uma porcentagem. Digamos, por exemplo, style = "60%"; indica que a barra de progresso estava em 60%.
Isso animará as listras da direita para a esquerda.
Vamos ver um exemplo abaixo -
<div class = "progress progress-striped active">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
<span class = "sr-only">40% Complete</span>
</div>
</div>Barra de progresso empilhada
Você pode até empilhar várias barras de progresso. Coloque as várias barras de progresso na mesma.progress para empilhá-los como visto no exemplo a seguir -
<div class = "progress">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
<span class = "sr-only">40% Complete</span>
</div>
<div class = "progress-bar progress-bar-info" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
<span class = "sr-only">30% Complete (info)</span>
</div>
<div class = "progress-bar progress-bar-warning" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
<span class = "sr-only">20%Complete (warning)</span>
</div>
</div>Este capítulo discute sobre o objeto de mídia. Esses são estilos de objetos abstratos para a construção de vários tipos de componentes (como comentários de blog, tweets, etc.) que apresentam uma imagem alinhada à esquerda ou à direita ao lado do conteúdo textual. O objetivo do objeto de mídia é tornar o código para desenvolver esses blocos de informações drasticamente mais curto.
O objetivo dos objetos de mídia (marcação leve, facilidade de extensão) é alcançado aplicando classes a algumas marcações simples. Existem duas formas para o objeto de mídia -
.media - Esta classe permite flutuar um objeto de mídia (imagens, vídeo e áudio) à esquerda ou à direita de um bloco de conteúdo.
.media-list- Se você estiver preparando uma lista onde os itens farão parte de uma lista não ordenada, use uma classe. útil para tópicos de comentários ou listas de artigos.
Vamos ver um exemplo abaixo de objeto de mídia padrão -
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
</div>
</div>Vejamos um exemplo de lista de mídia -
<ul class = "media-list">
<li class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
<p>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</p>
<!-- Nested media object -->
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg"
alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Nested media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
<!-- Nested media object -->
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg"
alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Nested media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
</div>
</div>
<!-- Nested media object -->
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg"
alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Nested media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
</div>
</li>
<li class = "media">
<a class = "pull-right" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg"
alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</li>
</ul>O objetivo do componente de grupo de lista é renderizar conteúdo complexo e personalizado em listas. Para obter um grupo de lista básico -
Adicione a classe .list-group para o elemento <ul>.
Adicionar classe .list-group-item para <li>.
O exemplo a seguir demonstra isso -
<ul class = "list-group">
<li class = "list-group-item">Free Domain Name Registration</li>
<li class = "list-group-item">Free Window Space hosting</li>
<li class = "list-group-item">Number of Images</li>
<li class = "list-group-item">24*7 support</li>
<li class = "list-group-item">Renewal cost per year</li>
</ul>Adicionando emblemas ao grupo de listas
Podemos adicionar o componente de emblemas a qualquer item do grupo de lista e ele será automaticamente posicionado à direita. Basta adicionar<span class = "badge">dentro do elemento <li>. O exemplo a seguir demonstra isso -
<ul class = "list-group">
<li class = "list-group-item">Free Domain Name Registration</li>
<li class = "list-group-item">Free Window Space hosting</li>
<li class = "list-group-item">Number of Images</li>
<li class = "list-group-item">
<span class = "badge">New</span>
24*7 support
</li>
<li class = "list-group-item">Renewal cost per year</li>
<li class = "list-group-item">
<span class = "badge">New</span>
Disocunt Offer
</li>
</ul>Vinculando Itens do Grupo de Lista
Usando as marcas âncora em vez de itens de lista, podemos vincular os grupos de lista. Precisamos usar <div> em vez do elemento <ul>. O exemplo a seguir demonstra isso -
<a href = "#" class = "list-group-item active">
Free Domain Name Registration
</a>
<a href = "#" class = "list-group-item">24*7 support</a>
<a href = "#" class = "list-group-item">Free Window Space hosting</a>
<a href = "#" class = "list-group-item">Number of Images</a>
<a href = "#" class = "list-group-item">Renewal cost per year</a>Adicionar conteúdo personalizado ao grupo de listas
Podemos adicionar qualquer conteúdo HTML aos grupos de listas vinculadas acima. O exemplo a seguir demonstra isso -
<div class = "list-group">
<a href = "#" class = "list-group-item active">
<h4 class = "list-group-item-heading">
Starter Website Package
</h4>
</a>
<a href = "#" class = "list-group-item">
<h4 class = "list-group-item-heading">
Free Domain Name Registration
</h4>
<p class = "list-group-item-text">
You will get a free domain registration with website pages.
</p>
</a>
<a href = "#" class = "list-group-item">
<h4 class = "list-group-item-heading">
24*7 support
</h4>
<p class = "list-group-item-text">
We provide 24*7 support.
</p>
</a>
</div>
<div class = "list-group">
<a href = "#" class = "list-group-item active">
<h4 class = "list-group-item-heading">
Business Website Package
</h4>
</a>
<a href = "#" class="list-group-item">
<h4 class = "list-group-item-heading">
Free Domain Name Registration
</h4>
<p class = "list-group-item-text">
You will get a free domain registration with website pages.
</p>
</a>
<a href = "#" class = "list-group-item">
<h4 class = "list-group-item-heading">24*7 support</h4>
<p class = "list-group-item-text">We provide 24*7 support.</p>
</a>
</div>Este capítulo discutirá sobre os painéis do Bootstrap. Os componentes do painel são usados quando você deseja colocar seu componente DOM em uma caixa. Para obter um painel básico, basta adicionar classe.panelpara o elemento <div>. Também adicionar classe.panel-default a este elemento, conforme mostrado no exemplo a seguir -
<div class = "panel panel-default">
<div class = "panel-body">
This is a Basic panel
</div>
</div>Painel com Título
Existem duas maneiras de adicionar o cabeçalho do painel -
Usar .panel-heading classe para adicionar facilmente um contêiner de título ao painel.
Use qualquer <h1> - <h6> com um .panel-title classe para adicionar um título pré-estilizado.
O exemplo a seguir demonstra as duas maneiras -
<div class = "panel panel-default">
<div class = "panel-heading">
Panel heading without title
</div>
<div class = "panel-body">
Panel content
</div>
</div>
<div class = "panel panel-default">
<div class = "panel-heading">
<h3 class = "panel-title">
Panel With title
</h3>
</div>
<div class = "panel-body">
Panel content
</div>
</div>Painel com rodapé
Você pode adicionar rodapés aos painéis, envolvendo botões ou texto secundário em uma classe contendo <div> .panel-footer. O exemplo a seguir demonstra isso.
<div class = "panel panel-default">
<div class = "panel-body">
This is a Basic panel
</div>
<div class = "panel-footer">Panel footer</div>
</div>Os rodapés do painel não herdam cores e bordas ao usar variações contextuais, pois não devem estar em primeiro plano.
Alternativas contextuais do painel
Use classes de estado contextual como, panel-primary, panel-success, panel-info, panel-warning, panel-danger, para tornar um painel mais significativo para um contexto específico.
<div class = "panel panel-primary">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>
<div class = "panel panel-success">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>
<div class = "panel panel-info">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>
<div class = "panel panel-warning">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>
<div class = "panel panel-danger">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>Painel com Tabelas
Para obter uma tabela sem borda dentro de um painel, use a classe .tabledentro do painel. Suponha que haja um <div> contendo.panel-body, adicionamos uma borda extra no topo da tabela para separação. Se não houver <div> contendo.panel-body, então o componente se move do cabeçalho do painel para a tabela sem interrupção.
O exemplo a seguir demonstra isso -
<div class = "panel panel-default">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
<table class = "table">
<tr>
<th>Product</th>
<th>Price </th>
</tr>
<tr>
<td>Product A</td>
<td>200</td>
</tr>
<tr>
<td>Product B</td>
<td>400</td>
</tr>
</table>
</div>
<div class = "panel panel-default">
<div class = "panel-heading">Panel Heading</div>
<table class = "table">
<tr>
<th>Product</th>
<th>Price </th>
</tr>
<tr>
<td>Product A</td>
<td>200</td>
</tr>
<tr>
<td>Product B</td>
<td>400</td>
</tr>
</table>
</div>Painel com grupos de lista
Você pode incluir grupos de listas em qualquer painel. Crie um painel adicionando classe.panelpara o elemento <div>. Também adicionar classe.panel-defaulta este elemento. Agora, dentro deste painel, inclua seus grupos de lista. Você pode aprender a criar um grupo de listas no capítulo Grupos de listas .
<div class = "panel panel-default">
<div class ="panel-heading">Panel heading</div>
<div class = "panel-body">
<p>This is a Basic panel content. This is a Basic panel content.
This is a Basic panel content. This is a Basic panel content.
This is a Basic panel content. This is a Basic panel content.
This is a Basic panel content.</p>
</div>
<ul class = "list-group">
<li class = "list-group-item">Free Domain Name Registration</li>
<li class = "list-group-item">Free Window Space hosting</li>
<li class = "list-group-item">Number of Images</li>
<li class = "list-group-item">24*7 support</li>
<li class = "list-group-item">Renewal cost per year</li>
</ul>
</div>Um poço é um contêiner em <div> que faz com que o conteúdo pareça afundado ou um efeito de inserção na página. Para criar um poço, simplesmente envolva o conteúdo que você gostaria que aparecesse no poço com um <div> contendo a classe de.well. O exemplo a seguir mostra um poço padrão -
<div class = "well">Hi, am in well !!</div>Dimensionamento
Você pode alterar o tamanho do poço usando as classes opcionais, como, well-lg ou well-lg. Essas classes são usadas em conjunto com.wellclasse. Isso afeta o preenchimento, tornando o poço maior ou menor dependendo da classe.
<div class = "well well-lg">Hi, am in large well !!</div>
<div class = "well well-sm">Hi, am in small well !!</div>Os componentes discutidos nos capítulos anteriores em Layout Componentssão apenas o começo. O Bootstrap vem com 12 plug-ins jQuery que estendem os recursos e podem adicionar mais interação ao seu site. Para começar a usar os plug-ins JavaScript do Bootstrap, você não precisa ser um desenvolvedor JavaScript avançado. Utilizando a API Bootstrap Data, a maioria dos plug-ins pode ser acionada sem escrever uma única linha de código.
Plugins Bootstrap podem ser incluídos em seu site de duas formas -
Individually- Usando arquivos * .js individuais do Bootstrap . Alguns plug-ins e componentes CSS dependem de outros plug-ins. Se você incluir plug-ins individualmente, certifique-se de verificar essas dependências nos documentos.
Ou compiled (all at once)- Usando bootstrap.js ou bootstrap.min.js minificado . Não tente incluir ambos, pois bootstrap.js e bootstrap.min.js contêm todos os plug-ins em um único arquivo.
Todos os plug-ins dependem do jQuery. Portanto, jQuery deve ser incluído antes dos arquivos de plug-in. Verifique bower.json para ver quais versões do jQuery são compatíveis.
Atributos de dados
Todos os plug-ins Bootstrap são acessíveis usando a API de dados incluída. Portanto, você não precisa incluir uma única linha de JavaScript para invocar qualquer um dos recursos do plugin.
Em algumas situações, pode ser desejável desativar essa funcionalidade da API de dados. Se você precisar desligar a API de dados, poderá desvincular os atributos adicionando a seguinte linha de JavaScript -
$(document).off('.data-api')Para desativar um plugin específico / único, basta incluir o nome do plugin como um namespace junto com o namespace data-api como este -
$(document).off('.alert.data-api')API programática
Os desenvolvedores do Bootstrap acreditam que você deve ser capaz de usar todos os plug-ins puramente por meio da API JavaScript. Todas as APIs públicas são métodos únicos encadeados e retornam a coleção utilizada, digamos, por exemplo -
$(".btn.danger").button("toggle").addClass("fat")Todos os métodos aceitam um objeto de opções opcionais, uma string que tem como alvo um método específico ou nada (que inicia um plugin com comportamento padrão), conforme mostrado abaixo -
// initialized with defaults
$("#myModal").modal() // initialized with no keyboard $("#myModal").modal({ keyboard: false })
// initializes and invokes show immediately
$("#myModal").modal('show')Cada plugin também expõe seu construtor bruto em um Constructorpropriedade: $ .fn.popover.Constructor . Se você gostaria de obter uma instância particular do plugin, recupere-o diretamente de um elemento -
$('[rel = popover]').data('popover').Sem conflito
Plug-ins de bootstrap às vezes podem ser usados com outras estruturas de IU. Nessas circunstâncias, as colisões de namespace podem ocorrer ocasionalmente. Para superar esta chamada.noConflict no plugin do qual você deseja reverter o valor.
// return $.fn.button to previously assigned value
var bootstrapButton = $.fn.button.noConflict() // give $().bootstrapBtn the Bootstrap functionality
$.fn.bootstrapBtn = bootstrapButtonEventos
O Bootstrap fornece eventos personalizados para a maioria das ações exclusivas do plugin. Geralmente, esses eventos vêm em duas formas -
Infinitive form- Isso é acionado no início de um evento. Ex: show . Os eventos infinitivos fornecem a funcionalidade preventDefault . Isso fornece a capacidade de interromper a execução de uma ação antes que ela comece.
$('#myModal').on('show.bs.modal', function (e) {
// stops modal from being shown
if (!data) return e.preventDefault()
})Past participle form- Isso é acionado na conclusão de uma ação. Por exemplo, mostrado.
O plugin de transição fornece efeitos de transição simples.
Se você quiser incluir esta funcionalidade de plug-in individualmente, você precisará transition.jsuma vez ao lado dos outros arquivos JS. Além disso, conforme mencionado no capítulo Visão geral dos plug-ins de bootstrap , você pode incluir bootstrap.js ou bootstrap.min.js minimizado .
Transition.js é um auxiliar básico para eventos de transiçãoEnd, bem como um emulador de transição CSS. É usado por outros plug-ins para verificar o suporte de transição CSS e para capturar transições suspensas.
Casos de Uso
Alguns exemplos do plugin de transição são -
Deslizamento ou desbotamento nos modais. Você pode encontrar um exemplo no capítulo Bootstrap Modal Plugin .
Desvanecimento das guias. Você pode encontrar um exemplo no capítulo Bootstrap Tab Plugin .
Desvanecimento de alertas. Você pode encontrar um exemplo no capítulo Alertas de bootstrap .
Painéis deslizantes do carrossel. Você pode encontrar um exemplo no capítulo Bootstrap Carousel Plugin .
Um modal é uma janela filho que é colocada em camadas sobre sua janela pai. Normalmente, o objetivo é exibir o conteúdo de uma fonte separada que pode ter alguma interação sem sair da janela principal. As janelas filhas podem fornecer informações, interação ou mais.
Se você quiser incluir esta funcionalidade de plug-in individualmente, você precisará modal.js. Além disso, conforme mencionado no capítulo Visão geral dos plug-ins de bootstrap , você pode incluir bootstrap.js ou bootstrap.min.js minimizado .
Uso
Você pode alternar o conteúdo oculto do plugin modal -
Via data attributes - Definir atributo data-toggle = "modal" em um elemento controlador, como um botão ou link, junto com um data-target = "#identifier" ou href = "#identifier" para direcionar um modal específico (com o id = "identificador") para alternar.
Via JavaScript - Usando esta técnica, você pode chamar um modal com id = "identificador" com uma única linha de JavaScript -
$('#identifier').modal(options)Exemplo
Um exemplo de janela modal estática é mostrado no exemplo a seguir -
<h2>Example of creating Modals with Twitter Bootstrap</h2>
<!-- Button trigger modal -->
<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" aria-hidden = "true">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
×
</button>
<h4 class = "modal-title" id = "myModalLabel">
This Modal title
</h4>
</div>
<div class = "modal-body">
Add some text here
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-default" data-dismiss = "modal">
Close
</button>
<button type = "button" class = "btn btn-primary">
Submit changes
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->Details of the preceding code −
Para invocar a janela modal, você precisa ter algum tipo de gatilho. Você pode usar um botão ou um link. Aqui usamos um botão.
Se você olhar no código acima, verá que na tag <button>, o data-target = "#myModal"é o destino do modal que você deseja carregar na página. Este código permite que você crie vários modais na página e, em seguida, tenha diferentes gatilhos para cada um deles. Agora, para ser claro, você não carrega vários modais ao mesmo tempo, mas pode criar muitos nas páginas a serem carregadas em momentos diferentes.
Existem duas classes a serem observadas no modal -
O primeiro é .modal, que é simplesmente identificar o conteúdo do <div> como um modal.
E o segundo é o .fadeclasse. Quando o modal é alternado, ele fará com que o conteúdo apareça gradualmente.
aria-labelledby = "myModalLabel", o atributo referencia o título modal.
O atributo aria-hidden = "true" é usado para manter a janela modal invisível até que um gatilho aconteça (como um clique no botão associado).
<div class = "modal-header">, modal-header é a classe para definir o estilo do cabeçalho da janela modal.
class = "close", é um close de classe CSS que define o estilo do botão Fechar da janela modal.
data-dismiss = "modal", é um atributo de dados HTML5 personalizado. Aqui, ele é usado para fechar a janela modal.
class = "modal-body", é uma classe CSS do Bootstrap CSS para definir o estilo do corpo da janela modal.
class = "modal-footer", é uma classe CSS do Bootstrap CSS para definir o estilo do rodapé da janela modal.
data-toggle = "modal", A alternância de dados do atributo de dados personalizados HTML5 é usada para abrir a janela modal.
Opções
Existem certas opções que podem ser passadas por meio de atributos de dados ou JavaScript para personalizar a aparência da janela modal. A tabela a seguir lista as opções -
| Nome da Opção | Tipo / valor padrão | Nome do atributo de dados | Descrição |
|---|---|---|---|
| pano de fundo | booleano ou a string 'estática' Padrão: verdadeiro | data-backdrop | Especifique estático para um pano de fundo, se não quiser que o modal seja fechado quando o usuário clicar fora do modal. |
| teclado | booleano padrão: verdadeiro | teclado de dados | Fecha o modal quando a tecla Escape é pressionada; defina como falso para desativar. |
| exposição | booleano padrão: verdadeiro | data-show | Mostra o modal quando inicializado. |
| controlo remoto | caminho Padrão: falso | data-remote | Usando o método jQuery .load , injete conteúdo no corpo modal. Se um href com um URL válido for adicionado, ele carregará esse conteúdo. Um exemplo disso é mostrado abaixo - |
Métodos
Aqui estão alguns métodos úteis que podem ser usados com modal ().
| Método | Descrição | Exemplo |
|---|---|---|
| Options - .modal (opções) | Ativa seu conteúdo como modal. Aceita um objeto de opções opcional. | |
| Toggle - .modal ('alternar') | Alterna manualmente um modal. | |
| Show - .modal ('mostrar') | Abre manualmente um modal. | |
| Hide - .modal ('ocultar') | Oculta manualmente um modal. | |
Exemplo
O exemplo a seguir demonstra o uso de métodos -
<h2>Example of using methods of Modal Plugin</h2>
<!-- Button trigger modal -->
<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" aria-hidden = "true">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
×
</button>
<h4 class = "modal-title" id = "myModalLabel">
This Modal title
</h4>
</div>
<div class = "modal-body">
Press ESC button to exit.
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-default" data-dismiss = "modal">
Close
</button>
<button type = "button" class = "btn btn-primary">
Submit changes
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
$(function () { $('#myModal').modal({
keyboard: true
})});
</script>Basta clicar no botão Esc para sair da janela modal.
Eventos
A tabela a seguir lista os eventos para trabalhar com modal. Esses eventos podem ser usados para conectar-se à função.
| Evento | Descrição | Exemplo |
|---|---|---|
| show.bs.modal | Disparado após o método show ser chamado. | |
| mostrado.bs.modal | Disparado quando o modal fica visível para o usuário (aguardará a conclusão das transições CSS). | |
| esconder.bs.modal | Disparado quando o método de instância de ocultar foi chamado. | |
| oculto.bs.modal | Disparado quando o modal termina de ser ocultado do usuário. | |
Exemplo
O exemplo a seguir demonstra o uso de eventos -
<h2>Example of using events of Modal Plugin</h2>
<!-- Button trigger modal -->
<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" aria-hidden = "true">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
×
</button>
<h4 class = "modal-title" id = "myModalLabel">
This Modal title
</h4>
</div>
<div class = "modal-body">
Click on close button to check Event functionality.
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-default" data-dismiss = "modal">
Close
</button>
<button type = "button" class = "btn btn-primary">
Submit changes
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
$(function () { $('#myModal').modal('hide')})}); </script> <script> $(function () { $('#myModal').on('hide.bs.modal', function () {
alert('Hey, I heard you like modals...');})
});
</script>Conforme visto na tela acima, se você clicar no botão Fechar , ou seja, ocultar evento, uma mensagem de alerta será exibida.
Usando o plug-in suspenso, você pode adicionar menus suspensos a quaisquer componentes, como barras de navegação, guias, pílulas e botões.
Se você quiser incluir esta funcionalidade de plug-in individualmente, você precisará dropdown.js. Além disso, conforme mencionado no capítulo Visão geral dos plug-ins de bootstrap , você pode incluir bootstrap.js ou bootstrap.min.js minimizado .
Uso
Você pode alternar o conteúdo oculto do plugin suspenso -
Via data attributes - Adicionar data-toggle = "dropdown" a um link ou botão para alternar uma lista suspensa conforme mostrado abaixo -
<div class = "dropdown">
<a data-toggle = "dropdown" href = "#">Dropdown trigger</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
...
</ul>
</div>Se você precisar manter os links intactos (o que é útil se o navegador não estiver habilitando o JavaScript), use o data-target atributo em vez de href = "#"-
<div class = "dropdown">
<a id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html">
Dropdown
<span class = "caret"></span>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
...
</ul>
</div>Via JavaScript - Para chamar o botão suspenso via JavaScript, use o seguinte método -
$('.dropdown-toggle').dropdown()Exemplo
Within Navbar
O exemplo a seguir demonstra o uso do menu suspenso em uma barra de navegação -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class="caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Within Tabs
O exemplo a seguir demonstra o uso do menu suspenso dentro das guias -
<p>Tabs With Dropdown Example</p>
<ul class = "nav nav-tabs">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li class = "dropdown">
<a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
Java
<span class = "caret"></span>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">Swing</a></li>
<li><a href = "#">jMeter</a></li>
<li><a href = "#">EJB</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</li>
<li><a href = "#">PHP</a></li>
</ul>Opções
Não há opções.
Métodos
A alternância da lista suspensa tem um método simples para mostrar ou ocultar a lista suspensa.
$().dropdown('toggle')Exemplo
O exemplo a seguir demonstra o uso do método de plug-in suspenso.
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div id = "myexample">
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle">Java <b class = "caret"></b></a>
<ul class = "dropdown-menu">
<li><a id = "action-1" href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<script>
$(function(){
$(".dropdown-toggle").dropdown('toggle');
});
</script>O plugin Scroll Spy (atualização automática de navegação) permite que você direcione seções da página com base na posição de rolagem. Em sua implementação básica, conforme você rola, você pode adicionar.active classes para a barra de navegação com base na posição de rolagem.
Se você quiser incluir esta funcionalidade de plug-in individualmente, você precisará scrollspy.js. Além disso, conforme mencionado no capítulo Visão geral dos plug-ins de bootstrap , você pode incluir bootstrap.js ou bootstrap.min.js minimizado .
Uso
Você pode adicionar um comportamento de rolagem à sua navegação na barra superior -
Via data attributes - adicionar data-spy = "scroll"ao elemento que você deseja espionar (normalmente o corpo). Em seguida, adicione o atributodata-target com o ID ou classe do elemento pai de qualquer Bootstrap .navcomponente. Para que isso funcione, você deve ter elementos no corpo da página que tenham IDs correspondentes dos links que você está espionando.
<body data-spy = "scroll" data-target = ".navbar-example">
...
<div class = "navbar-example">
<ul class = "nav nav-tabs">
...
</ul>
</div>
...
</body>Via JavaScript - Você pode invocar o scrollspy com JavaScript em vez de usar os atributos de dados, selecionando o elemento para espiar e, em seguida, invocando o .scrollspy() função -
$('body').scrollspy({ target: '.navbar-example' })Exemplo
O exemplo a seguir mostra o uso do plugin scrollspy por meio de atributos de dados -
<nav id = "navbar-example" class = "navbar navbar-default navbar-static" role = "navigation">
<div class = "navbar-header">
<button class = "navbar-toggle" type = "button" data-toggle = "collapse"
data-target = ".bs-js-navbar-scrollspy">
<span class = "sr-only">Toggle navigation</span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class = "navbar-brand" href = "#">Tutorial Name</a>
</div>
<div class = "collapse navbar-collapse bs-js-navbar-scrollspy">
<ul class = "nav navbar-nav">
<li><a href = "#ios">iOS</a></li>
<li><a href = "#svn">SVN</a></li>
<li class = "dropdown">
<a href = "#" id = "navbarDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "navbarDrop1">
<li><a href = "#jmeter" tabindex = "-1">jmeter</a></li>
<li><a href = "#ejb" tabindex = "-1">ejb</a></li>
<li class = "divider"></li>
<li><a href = "#spring" tabindex = "-1">spring</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div data-spy = "scroll" data-target = "#navbar-example" data-offset = "0"
style = "height:200px; overflow:auto; position: relative;">
<h4 id = "ios">iOS</h4>
<p>iOS is a mobile operating system developed and distributed by Apple
Inc. Originally released in 2007 for the iPhone, iPod Touch, and Apple
TV. iOS is derived from OS X, with which it shares the Darwin
foundation. iOS is Apple's mobile version of the OS X operating system
used on Apple computers.</p>
<h4 id = "svn">SVN</h4>
<p>Apache Subversion which is often abbreviated as SVN, is a software
versioning and revision control system distributed under an open source
license. Subversion was created by CollabNet Inc. in 2000, but now it
is developed as a project of the Apache Software Foundation, and as
such is part of a rich community of developers and users.</p>
<h4 id = "jmeter">jMeter</h4>
<p>jMeter is an Open Source testing software. It is 100% pure Java
application for load and performance testing.</p>
<h4 id = "ejb">EJB</h4>
<p>Enterprise Java Beans (EJB) is a development architecture for building
highly scalable and robust enterprise level applications to be deployed
on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
<h4 id = "spring">Spring</h4>
<p>Spring framework is an open source Java platform that provides
comprehensive infrastructure support for developing robust Java
applications very easily and very rapidly.</p>
<p>Spring framework was initially written by Rod Johnson and was first
released under the Apache 2.0 license in June 2003.</p>
</div>Opções
As opções podem ser passadas por meio de atributos de dados ou JavaScript. A tabela a seguir lista as opções -
| Nome da Opção | Tipo / valor padrão | Nome do atributo de dados | Descrição |
|---|---|---|---|
| Deslocamento | número Padrão: 10 | deslocamento de dados | Pixels para deslocar a partir do topo ao calcular a posição da rolagem. |
Métodos
.scrollspy('refresh') - Ao chamar o scrollspy por meio do método JavaScript, você precisa chamar o .refreshmétodo para atualizar o DOM. Isso é útil se algum elemento do DOM foi alterado, ou seja, se você adicionou ou removeu alguns elementos. A seguir está a sintaxe para usar este método.
$('[data-spy = "scroll"]').each(function () { var $spy = $(this).scrollspy('refresh')
})Exemplo
O exemplo a seguir demonstra o uso de .scrollspy('refresh') método -
<nav id = "myScrollspy" class = "navbar navbar-default navbar-static" role = "navigation">
<div class = "navbar-header">
<button class = "navbar-toggle" type = "button" data-toggle = "collapse"
data-target = ".bs-js-navbar-scrollspy">
<span class = "sr-only">Toggle navigation</span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class = "navbar-brand" href = "#">Tutorial Name</a>
</div>
<div class = "collapse navbar-collapse bs-js-navbar-scrollspy">
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#ios">iOS</a></li>
<li><a href = "#svn">SVN</a></li>
<li class = "dropdown">
<a href = "#" id = "navbarDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "navbarDrop1">
<li><a href = "#jmeter" tabindex = "-1">jmeter</a></li>
<li><a href = "#ejb" tabindex = "-1">ejb</a></li>
<li class = "divider"></li>
<li><a href = "#spring" tabindex = "-1">spring</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div data-spy = "scroll" data-target = "#myScrollspy" data-offset = "0"
style = "height:200px; overflow:auto; position: relative;">
<div class = "section">
<h4 id = "ios">iOS<small><a href = "#" onclick = "removeSection(this);">
× Remove this section</a></small>
</h4>
<p>iOS is a mobile operating system developed and distributed by
Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and
Apple TV. iOS is derived from OS X, with which it shares the Darwin
foundation. iOS is Apple's mobile version of the OS X operating system
used on Apple computers.</p>
</div>
<div class = "section">
<h4 id = "svn">SVN<small></small></h4>
<p>Apache Subversion which is often abbreviated as SVN, is a software
versioning and revision control system distributed under an open source
license. Subversion was created by CollabNet Inc. in 2000, but
now it is developed as a project of the Apache Software Foundation,
and as such is part of a rich community of developers and users.</p>
</div>
<div class = "section">
<h4 id = "jmeter">jMeter<small><a href = "#" onclick = "removeSection(this);">
× Remove this section</a></small>
</h4>
<p>jMeter is an Open Source testing software. It is 100% pure Java
application for load and performance testing.</p>
</div>
<div class = "section">
<h4 id = "ejb">EJB</h4>
<p>Enterprise Java Beans (EJB) is a development architecture for
building highly scalable and robust enterprise level applications
to be deployed on J2EE compliant Application Server such as
JBOSS, Web Logic etc.</p>
</div>
<div class = "section">
<h4 id = "spring">Spring</h4>
<p>Spring framework is an open source Java platform that provides
comprehensive infrastructure support for developing robust Java
applications very easily and very rapidly.</p>
<p>Spring framework was initially written by Rod Johnson and was first
released under the Apache 2.0 license in June 2003.</p>
</div>
</div>
<script type = "text/javascript">
$(function(){
removeSection = function(e) {
$(e).parents(".section").remove(); $('[data-spy = "scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
});
}
$("#myScrollspy").scrollspy();
});
</script>Eventos
A tabela a seguir lista os eventos para trabalhar com scrollspy. Este evento pode ser usado para conectar-se à função.
| Evento | Descrição | Exemplo |
|---|---|---|
| activate.bs.scrollspy | Este evento é disparado sempre que um novo item é ativado pelo scrollspy. | |
Exemplo
O exemplo a seguir demonstra o uso de activate.bs.scrollspy evento -
<html>
<head>
<link rel = "stylesheet" href = "bootstrap/css/bootstrap.min.css">
<script src = "bootstrap/scripts/jquery.min.js"></script>
<script src = "bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){ removeSection = function(e) { $(e).parents(".subject").remove();
$('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') }); } $("#Navexample").scrollspy();
// The event is fired when an item gets actived with the scrollspy
$("#Navexample").on('activate.bs.scrollspy', function () { var currentSection = $(".nav li.active > a").text();
$("#spyevent").html("Current Item being viewed >> " + currentSection);
})
});
</script>
<style>
.scroll-box {
height: 250px;
position: relative;
overflow: auto;
font-size:2em;
}
</style>
</head>
<body>
<div class = "container">
<nav id = "Navexample" class = "navbar navbar-default" role = "navigation">
<!-- Nav Bar -->
<div class = "navbar-header">
<button type = "button" class = "navbar-toggle"
data-toggle = "collapse" data-target = "#navbarCollapse">
<span class = "sr-only">Toggle navigation</span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class = "navbar-brand" href = "#">Tutorials Point</a>
</div>
<!-- Links and Sublinks -->
<div class = "collapse navbar-collapse" id = "navbarCollapse">
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#subject-1">Subject 1</a></li>
<li><a href = "#subject-2">Subject 2</a></li>
<li class = "dropdown"><a href = "#" class = "dropdown-toggle"
data-toggle = "dropdown">Subject 3<b class = "caret"></b></a>
<ul class = "dropdown-menu">
<li><a href = "#subject-3-1">Subject 3.1</a></li>
<li><a href = "#subject-3-2">Subject 3.2</a></li>
<li><a href = "#subject-3-3">Subject 3.3</a></li>
</ul>
</li>
<li><a href = "#subject-4">Subject 4</a></li>
</ul>
</div>
</nav>
<div class = "scroll-box" data-spy = "scroll" data-offset = "0">
<div class = "subject">
<h3 id = "subject-1">Subject 1
<small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<hr>
<div class = "subject">
<h3 id = "subject-2">Subject 2
<small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<hr>
<div class = "subject">
<h3 id = "subject-3">Subject 3
<small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><
</div>
<hr>
<div class = "subject">
<h4 id = "subject-3-1">Subject 3.1
<small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class = "subject">
<h4 id = "subject-3-2">Subject 3.2
<small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class = "subject">
<h4 id = "subject-3-3">Subject 3.3
<small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<hr>
<div class = "subject">
<h3 id = "subject-4">Subject 4
<small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<hr>
<h4 id = "spyevent" class = "text-info"></h4>
</div>
</body>
</html>As guias foram apresentadas no capítulo Elementos de navegação do Bootstrap . Ao combinar alguns atributos de dados, você pode criar facilmente uma interface com guias. Com este plug-in, você pode fazer a transição por meio de painéis de conteúdo local em guias ou pílulas, até mesmo por meio de menus suspensos.
Se você quiser incluir esta funcionalidade de plug-in individualmente, você precisará tab.js. Além disso, conforme mencionado no capítulo Visão geral dos plug-ins de bootstrap , você pode incluir bootstrap.js ou bootstrap.min.js minimizado .
Uso
Você pode ativar as guias das duas maneiras a seguir -
Via data attributes - você precisa adicionar data-toggle = "tab" ou data-toggle = "pill" para as âncoras.
Adicionando o nav e nav-tabs classes para a guia ulirá aplicar o estilo da guia Bootstrap , ao adicionar onav e nav-pillsas aulas aplicarão estilo de pílula .
<ul class = "nav nav-tabs">
<li><a href = "#identifier" data-toggle = "tab">Home</a></li>
...
</ul>Via JavaScript - você pode ativar as guias usando Javscript conforme abaixo -
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})Aqui está um exemplo de diferentes maneiras de ativar guias individuais -
// Select tab by name
$('#myTab a[href = "#profile"]').tab('show')
// Select first tab
$('#myTab a:first').tab('show') // Select last tab $('#myTab a:last').tab('show')
// Select third tab (0-indexed)
$('#myTab li:eq(2) a').tab('show')Efeito Fade
Para obter um efeito de esmaecimento para as guias, adicione .fade para cada .tab-pane. O primeiro painel da guia também deve ter.in para desaparecer adequadamente no conteúdo inicial -
<div class = "tab-content">
<div class = "tab-pane fade in active" id = "home">...</div>
<div class = "tab-pane fade" id = "svn">...</div>
<div class = "tab-pane fade" id = "ios">...</div>
<div class = "tab-pane fade" id = "java">...</div>
</div>Exemplo
Um exemplo de plugin de guia usando atributos de dados e efeito de fade é mostrado no exemplo a seguir -
<ul id = "myTab" class = "nav nav-tabs">
<li class = "active">
<a href = "#home" data-toggle = "tab">
Tutorial Point Home
</a>
</li>
<li><a href = "#ios" data-toggle = "tab">iOS</a></li>
<li class = "dropdown">
<a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
<li><a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a></li>
<li><a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a></li>
</ul>
</li>
</ul>
<div id = "myTabContent" class = "tab-content">
<div class = "tab-pane fade in active" id = "home">
<p>Tutorials Point is a place for beginners in all technical areas.
This website covers most of the latest technologies and explains each of
the technology with simple examples.</p>
</div>
<div class = "tab-pane fade" id = "ios">
<p>iOS is a mobile operating system developed and distributed
by Apple Inc. Originally released in 2007 for the iPhone, iPod Touch,
and Apple TV. iOS is derived from OS X, with which it shares the
Darwin foundation. iOS is Apple's mobile version of the OS X
operating system used on Apple computers.</p>
</div>
<div class = "tab-pane fade" id = "jmeter">
<p>jMeter is an Open Source testing software. It is 100% pure Java
application for load and performance testing.</p>
</div>
<div class = "tab-pane fade" id = "ejb">
<p>Enterprise Java Beans (EJB) is a development architecture for
building highly scalable and robust enterprise level applications to be
deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
</div>
</div>Métodos
.$().tab- Este método ativa um elemento de guia e um contêiner de conteúdo. A guia deve ter umdata-target ou um href visando um nó de contêiner no DOM.
<ul class = "nav nav-tabs" id = "myTab">
<li class = "active"><a href = "#identifier" data-toggle = "tab">Home</a></li>
.....
</ul>
<div class = "tab-content">
<div class = "tab-pane active" id = "home">...</div>
.....
</div>
<script>
$(function () { $('#myTab a:last').tab('show')
})
</script>Exemplo
O exemplo a seguir mostra o uso do método de plug-in de guia .tab. Aqui no exemplo, a segunda guia iOS está ativada -
<ul id = "myTab" class = "nav nav-tabs">
<li class = "active">
<a href = "#home" data-toggle = "tab">
Tutorial Point Home
</a>
</li>
<li><a href = "#ios" data-toggle = "tab">iOS</a></li>
<li class = "dropdown">
<a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
<li>
<a href = "#jmeter" tabindex = "-1" data-toggle = "tab">
jmeter
</a>
</li>
<li>
<a href = "#ejb" tabindex = "-1" data-toggle = "tab">
ejb
</a>
</li>
</ul>
</li>
</ul>
<div id = "myTabContent" class = "tab-content">
<div class = "tab-pane fade in active" id = "home">
<p>Tutorials Point is a place for beginners in all technical areas.
This website covers most of the latest technologies and explains each of
the technology with simple examples.</p>
</div>
<div class = "tab-pane fade" id = "ios">
<p>iOS is a mobile operating system developed and distributed by
Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and
Apple TV. iOS is derived from OS X, with which it shares the Darwin
foundation. iOS is Apple's mobile version of the OS X operating system
used on Apple computers.</p>
</div>
<div class = "tab-pane fade" id = "jmeter">
<p>jMeter is an Open Source testing software. It is 100% pure Java
application for load and performance testing.</p>
</div>
<div class = "tab-pane fade" id = "ejb">
<p>Enterprise Java Beans (EJB) is a development architecture for
building highly scalable and robust enterprise level applications to be
deployed on J2EE compliant Application Server such as JBOSS,
Web Logic etc.</p>
</div>
</div>
<script>
$(function () { $('#myTab li:eq(1) a').tab('show');
});
</script>Eventos
A tabela a seguir lista os eventos para trabalhar com o plug-in da guia. Este evento pode ser usado para conectar-se à função.
| Evento | Descrição | Exemplo |
|---|---|---|
| show.bs.tab | Este evento é disparado na exibição da guia, mas antes que a nova guia seja exibida. Usarevent.target e event.relatedTarget para direcionar a guia ativa e a guia ativa anterior (se disponível), respectivamente. | |
| mostrado.bs.tab | Este evento é disparado na exibição de guia depois que uma guia é mostrada. Usarevent.target e event.relatedTarget para direcionar a guia ativa e a guia ativa anterior (se disponível), respectivamente. | |
Exemplo
O exemplo a seguir mostra o uso de eventos de plug-in de guia. Aqui no exemplo, exibiremos as guias visitadas atuais e anteriores -
<hr>
<p class = "active-tab"><strong>Active Tab</strong>: <span></span></p>
<p class = "previous-tab"><strong>Previous Tab</strong>: <span></span></p>
<hr>
<ul id = "myTab" class = "nav nav-tabs">
<li class = "active">
<a href = "#home" data-toggle = "tab">
Tutorial Point Home
</a>
</li>
<li><a href = "#ios" data-toggle = "tab">iOS</a></li>
<li class = "dropdown">
<a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
<li>
<a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a>
</li>
<li>
<a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a>
</li>
</ul>
</li>
</ul>
<div id = "myTabContent" class = "tab-content">
<div class = "tab-pane fade in active" id = "home">
<p>Tutorials Point is a place for beginners in all technical areas.
This website covers most of the latest technologies and explains each of
the technology with simple examples.</p>
</div>
<div class = "tab-pane fade" id = "ios">
<p>iOS is a mobile operating system developed and distributed by
Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and
Apple TV. iOS is derived from OS X, with which it shares the Darwin
foundation. iOS is Apple's mobile version of the OS X operating system
used on Apple computers.</p>
</div>
<div class = "tab-pane fade" id = "jmeter">
<p>jMeter is an Open Source testing software. It is 100% pure Java
application for load and performance testing.</p>
</div>
<div class = "tab-pane fade" id = "ejb">
<p>Enterprise Java Beans (EJB) is a development architecture for
building highly scalable and robust enterprise level applications to be
deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
</div>
</div>
<script>
$(function(){ $('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
// Get the name of active tab
var activeTab = $(e.target).text(); // Get the name of previous tab var previousTab = $(e.relatedTarget).text();
$(".active-tab span").html(activeTab); $(".previous-tab span").html(previousTab);
});
});
</script>As dicas de ferramentas são úteis quando você precisa descrever um link. O plugin foi inspirado no plugin jQuery.tipsy escrito por Jason Frame . Desde então, as dicas de ferramentas foram atualizadas para funcionar sem imagens, animar com uma animação CSS e atributos de dados para armazenamento de títulos local.
Se você quiser incluir esta funcionalidade de plug-in individualmente, você precisará tooltip.js. Além disso, conforme mencionado no capítulo Visão geral dos plug-ins de bootstrap , você pode incluir bootstrap.js ou bootstrap.min.js minimizado .
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 seu elemento acionador. Você pode adicionar dicas de ferramentas das duas maneiras a seguir -
Via data attributes - Para adicionar uma dica, adicione data-toggle = "tooltip"a uma marca de âncora. O título da âncora será o texto de uma dica de ferramenta. Por padrão, a dica de ferramenta é definida como superior pelo plug-in.
<a href = "#" data-toggle = "tooltip" title = "Example tooltip">Hover over me</a>Via JavaScript - Acione a dica de ferramenta via JavaScript -
$('#identifier').tooltip(options)O plug-in de dica de ferramenta NÃO é apenas plug-ins CSS, como o dropdown ou outros plug-ins discutidos nos capítulos anteriores. Para usar este plugin, você DEVE ativá-lo usando jquery (leia javascript). Para habilitar todas as dicas de ferramentas em sua página, basta usar este script -
$(function () { $("[data-toggle = 'tooltip']").tooltip(); });
Exemplo
O exemplo a seguir demonstra o uso do plug-in de dica de ferramenta por meio de atributos de dados.
<h4>Tooltip examples for anchors</h4>
This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip"
title = "Tooltip on left"> Default Tooltip</a>.
This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip"
data-placement = "left" title = "Tooltip on left">Tooltip on Left</a>.
This is a <a href = "#" data-toggle = "tooltip" data-placement = "top"
title = "Tooltip on top">Tooltip on Top</a>.
This is a <a href = "#" data-toggle = "tooltip" data-placement = "bottom"
title = "Tooltip on bottom">Tooltip on Bottom</a>.
This is a <a href = "#" data-toggle = "tooltip" data-placement = "right"
title = "Tooltip on right">Tooltip on Right</a>
<br>
<h4>Tooltip examples for buttons</h4>
<button type = "button" class = "btn btn-default" data-toggle = "tooltip" title = "Tooltip on left">
Default Tooltip
</button>
<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>
<script>
$(function () { $("[data-toggle = 'tooltip']").tooltip(); });
</script>Opções
Existem certas opções que podem ser adicionadas por meio da API Bootstrap Data ou chamadas via JavaScript. A tabela a seguir lista as opções -
| Nome da Opção | Tipo / valor padrão | Nome do atributo de dados | Descrição |
|---|---|---|---|
| animação | booleano padrão: verdadeiro | animação de dados | Aplica uma transição de fade CSS à dica de ferramenta. |
| html | padrão booleano : falso | data-html | Insere HTML na dica de ferramenta. Se for falso, o método de texto do jQuery será usado para inserir conteúdo no dom. Use texto se estiver preocupado com ataques XSS. |
| colocação | string | função Padrão: top | colocação de dados | Especifica como posicionar a dica de ferramenta (ou seja, superior | inferior | esquerdo | direito | automático). Quando auto é especificado, ele reorienta dinamicamente a dica de ferramenta. Por exemplo, se a colocação for "esquerda automática", a dica de ferramenta será exibida à esquerda quando possível, caso contrário, será exibida à direita. |
| seletor | string Padrão: falso | seletor de dados | Se um seletor for fornecido, os objetos de dica de ferramenta serão delegados aos destinos especificados. |
| título | string | função Padrão: " | data-title | A opção de título é o valor de título padrão se o atributo de título não estiver presente. |
| desencadear | string Padrão: 'foco instantâneo' | data-trigger | Define como a dica de ferramenta é acionada: click| hover | focus | manual. Você pode passar vários gatilhos; separe-os com um espaço. |
| conteúdo | string | função Padrão: '' | data-content | Valor de conteúdo padrão se o atributo de conteúdo de dados não estiver presente |
| demora | número | objeto Padrão: 0 | atraso de dados | Atrasos na exibição e ocultação da dica de ferramenta em ms - não se aplica ao tipo de acionamento manual. Se um número for fornecido, o retardo é aplicado tanto para ocultar / mostrar. A estrutura do objeto é - |
| recipiente | string | falso Padrão: falso | data-container | Acrescenta a dica de ferramenta a um elemento específico. Exemplo: container: 'body' |
Métodos
A seguir estão alguns métodos úteis para dicas -
| Método | Descrição | Exemplo |
|---|---|---|
Options - .tooltip (opções) |
Anexa um manipulador de dica de ferramenta a uma coleção de elementos. | |
Toggle - .tooltip ('alternar') |
Alterna a dica de ferramenta de um elemento. | |
Show - .tooltip ('mostrar') |
Revela a dica de ferramenta de um elemento. | |
Hide - .tooltip ('ocultar') |
Oculta a dica de ferramenta de um elemento. | |
Destroy - .tooltip ('destruir') |
Oculta e destrói a dica de ferramenta de um elemento. | |
Exemplo
O exemplo a seguir demonstra o uso do plug-in de dica de ferramenta por meio de atributos de dados.
<div style = "padding: 100px 100px 10px;">
This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip"
title = "show">Tooltip on method show</a>.
This is a <a href = "#" class = "tooltip-hide" data-toggle = "tooltip"
data-placement = "left" title = "hide">Tooltip on method hide</a>.
This is a <a href = "#" class = "tooltip-destroy" data-toggle = "tooltip"
data-placement = "top" title = "destroy">Tooltip on method destroy</a>.
This is a <a href = "#" class = "tooltip-toggle" data-toggle = "tooltip"
data-placement = "bottom" title = "toggle">Tooltip on method toggle</a>.
<br><br><br><br><br><br>
<p class = "tooltip-options" >
This is a <a href = "#" data-toggle = "tooltip" title = "<h2>'am Header2
</h2>">Tooltip on method options</a>.
</p>
<script>
$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-hide').tooltip('hide');});
$(function () { $('.tooltip-destroy').tooltip('destroy');});
$(function () { $('.tooltip-toggle').tooltip('toggle');});
$(function () { $(".tooltip-options a").tooltip({html : true });});
</script>
</div>Eventos
A tabela a seguir lista os eventos para trabalhar com o plug-in de dica de ferramenta. Este evento pode ser usado para conectar-se à função.
| Evento | Descrição | Exemplo |
|---|---|---|
| show.bs.tooltip | Este evento é disparado imediatamente quando o método show instance é chamado. | |
| mostrado.bs.tooltip | Este evento é disparado quando a dica de ferramenta se torna visível para o usuário (aguardará a conclusão das transições CSS). | |
| hide.bs.tooltip | Este evento é disparado imediatamente quando o método de instância de ocultar é chamado. | |
| oculto.bs.tooltip | Este evento é disparado quando a dica de ferramenta termina de ser ocultada do usuário (irá aguardar a conclusão das transições CSS). | |
Exemplo
O exemplo a seguir demonstra o uso do plug-in de dica de ferramenta por meio de atributos de dados.
<h4>Tooltip examples for anchors</h4>
This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip"
title = "Default Tooltip">Default Tooltip</a>.
<script>
$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
alert("Alert message on show");
})});
</script>O popover é semelhante à dica de ferramenta, oferecendo uma visão estendida completa com um título. Para que o popover seja ativado, o usuário só precisa passar o cursor sobre o elemento. O conteúdo do popover pode ser preenchido inteiramente usando a API Bootstrap Data. Este método requer uma dica de ferramenta.
Se você deseja incluir esta funcionalidade de plug-in individualmente, você precisará do popover.jse tem uma dependência do plug-in de dica de ferramenta . Além disso, conforme mencionado no capítulo Visão geral dos plug-ins de bootstrap , você pode incluir bootstrap.js ou bootstrap.min.js minimizado .
Uso
O plug-in popover gera conteúdo e marcação sob demanda e, por padrão, coloca o popover após seu elemento acionador. Você pode adicionar popover das duas maneiras a seguir -
Via data attributes - Para adicionar um popover, adicione data-toggle = "popover"a uma tag âncora / botão. O título da âncora será o texto de um popover. Por padrão, o popover é definido como superior pelo plug-in.
<a href = "#" data-toggle = "popover" title = "Example popover">
Hover over me
</a>Via JavaScript - Habilite popovers via JavaScript usando a seguinte sintaxe -
$('#identifier').popover(options)O plug-in Popover NÃO é apenas plug-ins CSS, como o menu suspenso ou outros plug-ins discutidos nos capítulos anteriores. Para usar este plugin, você DEVE ativá-lo usando jquery (leia javascript). Para habilitar todos os popovers em sua página, basta usar este script -
$(function () { $("[data-toggle = 'popover']").popover(); });
Exemplo
O exemplo a seguir demonstra o uso do plugin popover por meio de atributos de dados.
<div class = "container" style = "padding: 100px 50px 10px;" >
<button type = "button" class = "btn btn-default" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement = "left"
data-content = "Some content in Popover on left">
Popover on left
</button>
<button type = "button" class = "btn btn-primary" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement = "top"
data-content = "Some content in Popover on top">
Popover on top
</button>
<button type = "button" class = "btn btn-success" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement = "bottom"
data-content = "Some content in Popover on bottom">
Popover on bottom
</button>
<button type = "button" class = "btn btn-warning" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement = "right"
data-content = "Some content in Popover on right">
Popover on right
</button>
</div>
<script>
$(function (){
$("[data-toggle = 'popover']").popover();
});
</script>Opções
Existem certas opções que podem ser adicionadas por meio da API Bootstrap Data ou chamadas via JavaScript. A tabela a seguir lista as opções -
| Nome da Opção | Tipo / valor padrão | Nome do atributo de dados | Descrição |
|---|---|---|---|
| animação | padrão booleano - verdadeiro | animação de dados | Aplica uma transição de fade CSS ao popover. |
| html | padrão booleano - falso | data-html | Insere HTML no popover. Se for falso, o método de texto do jQuery será usado para inserir conteúdo no dom. Use texto se estiver preocupado com ataques XSS. |
| colocação | string | função Padrão - topo | colocação de dados | Especifica como posicionar o popover (ou seja, superior | inferior | esquerdo | direito | automático). Quando auto é especificado, ele reorienta dinamicamente o popover. Por exemplo, se a colocação for "esquerda automática", o popover será exibido à esquerda quando possível, caso contrário, será exibido à direita. |
| seletor | string Padrão - falso | seletor de dados | Se um seletor for fornecido, os objetos popover serão delegados aos destinos especificados. |
| título | string | função Padrão - " | data-title | A opção de título é o valor de título padrão se o atributo de título não estiver presente. |
| desencadear | string Padrão - 'foco instantâneo' | data-trigger | Define como o popover é acionado - click| hover | focus | manual. Você pode passar vários gatilhos; separe-os com um espaço. |
| demora | número | objeto Padrão - 0 | atraso de dados | Atrasos na exibição e ocultação do popover em ms - não se aplica ao tipo de acionamento manual. Se um número for fornecido, o retardo é aplicado tanto para ocultar / mostrar. A estrutura do objeto é - |
| recipiente | string | falso Padrão - falso | data-container | Acrescenta o popover a um elemento específico. Exemplo: container: 'body' |
Métodos
A seguir estão alguns métodos úteis para popover -
| Método | Descrição | Exemplo |
|---|---|---|
Options - .popover (opções) |
Anexa um manipulador popover a uma coleção de elementos. | |
Toggle - .popover ('toggle') |
Alterna o popover de um elemento. | |
Show - .popover ('show') |
Revela o popover de um elemento. | |
Hide - .popover ('ocultar') |
Oculta o popover de um elemento. | |
Destroy - .popover ('destruir') |
Oculta e destrói o popover de um elemento. | |
Exemplo
O exemplo a seguir demonstra os métodos do plug-in popover -
<div class = "container" style = "padding: 100px 50px 10px;" >
<button type = "button" class = "btn btn-default popover-show"
title = "Popover title" data-container = "body"
data-toggle = "popover" data-placement = "left"
data-content = "Some content in Popover with show method">
Popover on left
</button>
<button type = "button" class = "btn btn-primary popover-hide"
title = "Popover title" data-container = "body"
data-toggle = "popover" data-placement = "top"
data-content = "Some content in Popover-hide method">
Popover on top
</button>
<button type = "button" class = "btn btn-success popover-destroy"
title = "Popover title" data-container = "body"
data-toggle = "popover" data-placement = "bottom"
data-content = "Some content in Popover-destroy method">
Popover on bottom
</button>
<button type = "button" class = "btn btn-warning popover-toggle"
title = "Popover title" data-container = "body"
data-toggle = "popover" data-placement = "top"
data-content = "Some content in Popover-toggle method">
Popover on right
</button>
<br><br><br><br><br><br>
<p class = "popover-options">
<a href = "#" type = "button" class = "btn btn-warning"
title = "<h2>Title</h2>" data-container = "body"
data-toggle = "popover" data-content = "
<h4>Some content in Popover-options method</h4>">
Popover
</a>
</p>
<script>
$(function () { $('.popover-show').popover('show');});
$(function () { $('.popover-hide').popover('hide');});
$(function () { $('.popover-destroy').popover('destroy');});
$(function () { $('.popover-toggle').popover('toggle');});
$(function () { $(".popover-options a").popover({html : true });});
</script>
</div>Eventos
A tabela a seguir lista os eventos para trabalhar com o plugin popover. Este evento pode ser usado para conectar-se à função.
| Evento | Descrição | Exemplo |
|---|---|---|
| show.bs.popover | Este evento é disparado imediatamente quando o método show instance é chamado. | |
| mostrado.bs.popover | Este evento é disparado quando o popover fica visível para o usuário (irá aguardar a conclusão das transições CSS). | |
| hide.bs.popover | Este evento é disparado imediatamente quando o método de instância de ocultar é chamado. | |
| escondido.bs.popover | Este evento é disparado quando o popover termina de ser ocultado do usuário (irá aguardar a conclusão das transições CSS). | |
Exemplo
O exemplo a seguir demonstra os eventos do plugin Popover -
<div clas = "container" style = "padding: 100px 50px 10px;" >
<button type = "button" class = "btn btn-primary popover-show"
title = "Popover title" data-container = "body" data-toggle = "popover"
data-content = "Some content in Popover with show method">
Popover on left
</button>
</div>
<script>
$(function () { $('.popover-show').popover('show');});
$(function () { $('.popover-show').on('shown.bs.popover', function () {
alert("Alert message on show");
})});
</script>As mensagens de alerta são usadas principalmente para exibir informações como mensagens de aviso ou confirmação para os usuários finais. Usando o plugin de mensagem de alerta, você pode adicionar a funcionalidade de dispensar a todas as mensagens de alerta.
Se você deseja incluir esta funcionalidade de plug-in individualmente, você precisará do alert.js. Além disso, conforme mencionado no capítulo Visão geral dos plug-ins de bootstrap , você pode incluir o bootstrap.js ou o bootstrap.min.js minimizado .
Uso
Você pode ativar a dispensa de um alerta das duas maneiras a seguir -
Via data attributes - Para dispensar via API de dados, basta adicionar data-dismiss = "alert" ao botão Fechar para fornecer automaticamente uma funcionalidade de alerta de fechamento.
<a class = "close" data-dismiss = "alert" href = "#" aria-hidden = "true">
×
</a>Via JavaScript - Para dispensar via JavaScript, use a seguinte sintaxe -
$(".alert").alert()Exemplo
O exemplo a seguir demonstra o uso do plugin de alerta por meio de atributos de dados.
<div class = "alert alert-success">
<a href = "#" class = "close" data-dismiss = "alert">
×
</a>
<strong>Warning!</strong> There was a problem with your network connection.
</div>Opções
Não há opções aqui.
Métodos
A seguir estão alguns métodos úteis para o plugin de alerta -
| Método | Descrição | Exemplo |
|---|---|---|
| .alerta() | Este método envolve todos os alertas com funcionalidade de fechamento. | |
Close Method .alert ('fechar') |
Para permitir que todos os alertas sejam fechados, adicione este método. | |
Para permitir que os alertas sejam animados quando fechados, verifique se eles têm o .fade e .in classe já aplicada a eles.
Exemplo
O exemplo a seguir demonstra o uso de .alert() método -
<h3>Alert messages to demonstrate alert() method </h3>
<div id = "myAlert" class = "alert alert-success">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Success!</strong> the result is successful.
</div>
<div id = "myAlert" class = "alert alert-warning">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Warning!</strong> There was a problem with your network connection.
</div>
<script type = "text/javascript">
$(function(){
$(".close").click(function(){ $("#myAlert").alert();
});
});
</script>O exemplo a seguir demonstra o uso de .alert('close') método -
<h3>Alert messages to demonstrate alert('close') method </h3>
<div id = "myAlert" class = "alert alert-success">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Success!</strong> the result is successful.
</div>
<div id = "myAlert" class = "alert alert-warning">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Warning!</strong> There was a problem with your network connection.
</div>
<script type = "text/javascript">
$(function(){ $(".close").click(function(){
$("#myAlert").alert('close');
});
});
</script>Tente este código usando o Try iteditor. Você pode ver que a funcionalidade de fechamento é aplicada a todas as mensagens de alerta, ou seja, feche qualquer mensagem de alerta, o restante das mensagens de alerta também será fechado.
Eventos
A tabela a seguir lista os eventos para trabalhar com o plugin de alerta. Este evento pode ser usado para conectar-se à função de alerta.
| Evento | Descrição | Exemplo |
|---|---|---|
| close.bs.alert | Este evento é disparado imediatamente quando o método de instância close é chamado. | |
| closed.bs.alert | Este evento é disparado quando o alerta é fechado (irá aguardar a conclusão das transições CSS). | |
Exemplo
O exemplo a seguir demonstra os eventos do plugin de alerta -
<div id = "myAlert" class = "alert alert-success">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Success!</strong> the result is successful.
</div>
<script type = "text/javascript">
$(function(){
$("#myAlert").bind('closed.bs.alert', function () {
alert("Alert message box is closed.");
});
});
</script>Os botões foram explicados no capítulo Botões de bootstrap . Com este plugin, você pode adicionar alguma interação, como estados de botões de controle ou criar grupos de botões para mais componentes, como barras de ferramentas.
Se você deseja incluir esta funcionalidade de plug-in individualmente, você precisará do button.js. Além disso, conforme mencionado no capítulo Visão geral dos plug-ins de bootstrap , você pode incluir o bootstrap.js ou o bootstrap.min.js minimizado .
Carregando estado
Para adicionar um estado de carregamento a um botão, basta adicionar o data-loading-text = "Loading..." como um atributo para o elemento de botão, conforme mostrado no exemplo a seguir -
<button id = "fat-btn" class = "btn btn-primary" data-loading-text = "Loading..." type = "button">
Loading state
</button>
<script>
$(function() {
$(".btn").click(function(){ $(this).button('loading').delay(1000).queue(function() {
// $(this).button('reset');
});
});
});
</script>Quando você clica no botão, o resultado seria como visto na imagem a seguir -
Alternância única
Para ativar a alternância (ou seja, alterar o estado normal de um botão para um estado pressionado e vice-versa) em um único botão, adicione o data-toggle = "button" como um atributo para o elemento de botão, conforme mostrado no exemplo a seguir -
<button type = "button" class = "btn btn-primary" data-toggle = "button">
Single toggle
</button>Caixa de seleção
Você pode criar um grupo de caixas de seleção e adicionar alternância a ele simplesmente adicionando o atributo de dados data-toggle = "buttons" ao btn-group.
<div class = "btn-group" data-toggle = "buttons">
<label class = "btn btn-primary">
<input type = "checkbox"> Option 1
</label>
<label class = "btn btn-primary">
<input type = "checkbox"> Option 2
</label>
<label class = "btn btn-primary">
<input type = "checkbox"> Option 3
</label>
</div>Rádio
Da mesma forma, você pode criar um grupo de entradas de rádio e adicionar alternância a ele simplesmente adicionando o atributo de dados data-toggle = "buttons" ao btn-group.
<div class = "btn-group" data-toggle = "buttons">
<label class = "btn btn-primary">
<input type = "radio" name =" options" id = "option1"> Option 1
</label>
<label class = "btn btn-primary">
<input type = "radio" name = "options" id = "option2"> Option 2
</label>
<label class = "btn btn-primary">
<input type = "radio" name = "options" id = "option3"> Option 3
</label>
</div>Uso
Você pode habilitar o plugin de botões via JavaScript como mostrado abaixo -
$('.btn').button()Opções
Não há opções.
Métodos
Abaixo estão alguns dos métodos úteis para o plugin de botões -
| Método | Descrição | Exemplo |
|---|---|---|
botão ('alternar') |
Alterna o estado de envio. Dá ao botão a aparência de que foi ativado. Você também pode ativar a alternância automática de um botão usando odata-toggle atributo. |
|
.button ('carregando') |
Ao carregar, o botão é desabilitado e o texto é alterado para a opção do data-loading-text atributo do elemento do botão |
|
.button ('reset') |
Redefine o estado do botão, trazendo o conteúdo original de volta ao texto. Este método é útil quando você precisa retornar o botão de volta ao estado principal |
|
.button (string) |
String neste método se refere a qualquer string declarada pelo usuário. Para redefinir o estado do botão e trazer um novo conteúdo, use este método. |
|
Exemplo
O exemplo a seguir demonstra o uso dos métodos acima -
<h2>Click on each of the buttons to see the effects of methods</h2>
<h4>Example to demonstrate .button('toggle') method</h4>
<div id = "myButtons1" class = "bs-example">
<button type = "button" class = "btn btn-primary">Primary</button>
</div>
<h4>Example to demonstrate .button('loading') method</h4>
<div id = "myButtons2" class = "bs-example">
<button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
Primary
</button>
</div>
<h4>Example to demonstrate .button('reset') method</h4>
<div id = "myButtons3" class = "bs-example">
<button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
Primary
</button>
</div>
<h4>Example to demonstrate .button(string) method</h4>
<button type = "button" class = "btn btn-primary" id = "myButton4"
data-complete-text = "Loading finished">
Click Me
</button>
<script type = "text/javascript">
$(function () { $("#myButtons1 .btn").click(function(){
$(this).button('toggle'); }); }); $(function() {
$("#myButtons2 .btn").click(function(){ $(this).button('loading').delay(1000).queue(function() {
});
});
});
$(function() { $("#myButtons3 .btn").click(function(){
$(this).button('loading').delay(1000).queue(function() { $(this).button('reset');
});
});
});
$(function() { $("#myButton4").click(function(){
$(this).button('loading').delay(1000).queue(function() { $(this).button('complete');
});
});
});
</script>O plugin de recolhimento facilita a criação de divisões de recolhimento da página. Quer você o use para construir uma navegação acordeon ou caixas de conteúdo, ele permite muitas opções de conteúdo.
Se você deseja incluir esta funcionalidade de plug-in individualmente, você precisará do collapse.js. Isso também requer que o plug - in de transição seja incluído em sua versão do Bootstrap. Além disso, conforme mencionado no capítulo Visão geral dos plug-ins de bootstrap , você pode incluir o bootstrap.js ou o bootstrap.min.js minimizado .
Você pode usar o plugin de recolhimento -
To create collapsible groups or accordion. Isso pode ser criado como no exemplo de exemplo abaixo -
<div class = "panel-group" id = "accordion">
<div class = "panel panel-default">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
Click me to expand. Click me again to collapse.Section 1
</a>
</h4>
</div>
<div id = "collapseOne" class = "panel-collapse collapse in">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
<div class = "panel panel-default">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
Click me to expand. Click me again to collapse.Section 2
</a>
</h4>
</div>
<div id = "collapseTwo" class = "panel-collapse collapse">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
<div class = "panel panel-default">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
Click me to expand. Click me again to collapse.Section 3
</a>
</h4>
</div>
<div id = "collapseThree" class = "panel-collapse collapse">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
</div>data-toggle = "collapse" é adicionado ao link no qual você clica para expandir ou recolher o componente.
href ou um data-targetatributo é adicionado ao componente pai, cujo valor é id do componente filho.
data-parent atributo é adicionado para criar o efeito de acordeão.
Para criar recolhível simples sem a marcação de acordeão - Isso pode ser criado como no exemplo de exemplo abaixo -
<button type = "button" class = "btn btn-primary" data-toggle = "collapse" data-target = "#demo">
simple collapsible
</button>
<div id = "demo" class = "collapse in">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>Como você pode ver no exemplo, criamos um componente recolhível simples, ao contrário do acordeão, não adicionamos o atributo data-parent.
Uso
A tabela a seguir lista as classes que o plugin de recolhimento utiliza para lidar com o trabalho pesado -
| Sr. Não. | Classe e descrição |
|---|---|
| 1 | .collapse Oculta o conteúdo. |
| 2 | .collapse.in Mostra o conteúdo. |
| 3 | .collapsing É adicionado quando a transição começa e removido quando termina. |
Você pode usar o plugin de recolhimento de duas maneiras -
Via data attributes - Adicionar data-toggle = "collapse" e um data-targetao elemento para atribuir automaticamente o controle de um elemento recolhível. odata-targetatributo aceitará um seletor CSS ao qual aplicar o recolhimento. Certifique-se de adicionar a classe.collapsepara o elemento recolhível. Se quiser que seja aberto por padrão, inclua a classe adicional.in.
Para adicionar gerenciamento de grupo semelhante a acordeão a um controle recolhível, adicione o atributo de dados data-parent = "#selector".
Via JavaScript - O método de recolhimento pode ser ativado com JavaScript, conforme mostrado abaixo -
$('.collapse').collapse()Opções
Existem certas opções que podem ser transmitidas por meio de atributos de dados ou JavaScript, listadas na tabela a seguir -
| Nome da Opção | Tipo / valor padrão | Nome do atributo de dados | Descrição |
|---|---|---|---|
| pai | seletor Padrão - falso | data-parent | Se o seletor for falso, todos os elementos recolhíveis sob o pai especificado serão fechados (semelhante ao comportamento de acordeão tradicional - isso depende da classe do grupo de acordeão). |
| alternancia | padrão booleano - verdadeiro | data-toggle | Alterna o elemento recolhível na chamada. |
Métodos
Aqui está uma lista de alguns métodos úteis que são usados com elementos recolhíveis.
| Método | Descrição | Exemplo |
|---|---|---|
Options - .collapse (opções) |
Ativa seu conteúdo como um elemento recolhível. Aceita um objeto de opções opcional. | |
Toggle - .collapse ('alternar') |
Alterna um elemento recolhível para mostrado ou oculto. | |
Show - .collapse ('mostrar') |
Mostra um elemento recolhível. | |
Hide - .collapse ('ocultar') |
Oculta um elemento recolhível. | |
Exemplo
O exemplo a seguir demonstra o uso de métodos -
<div class = "panel-group" id = "accordion">
<div class = "panel panel-default">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
Click me to expand. Click me again to collapse. Section 1--hide method
</a>
</h4>
</div>
<div id = "collapseOne" class = "panel-collapse collapse in">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
<div class = "panel panel-success">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
Click me to expand. Click me again to collapse. Section 2--show method
</a>
</h4>
</div>
<div id = "collapseTwo" class = "panel-collapse collapse">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
<div class = "panel panel-info">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
Click me to expand. Click me again to collapse. Section 3--toggle method
</a>
</h4>
</div>
<div id = "collapseThree" class = "panel-collapse collapse">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
<div class = "panel panel-warning">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseFour">
Click me to expand. Click me again to collapse. Section 4--options method
</a>
</h4>
</div>
<div id = "collapseFour" class = "panel-collapse collapse">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
</div>
<script type = "text/javascript">
$(function () { $('#collapseFour').collapse({ toggle: false })}); $(function () { $('#collapseTwo').collapse('show')}); $(function () { $('#collapseThree').collapse('toggle')}); $(function () { $('#collapseOne').collapse('hide')});
</script>Eventos
A tabela a seguir lista alguns eventos que podem ser usados com a funcionalidade de recolhimento.
| Evento | Descrição | Exemplo |
|---|---|---|
| show.bs.collapse | Disparado após o método show ser chamado. | |
| mostrado.bs.colapso | Este evento é disparado quando um elemento de recolhimento se torna visível para o usuário (aguardará a conclusão das transições CSS). | |
| hide.bs.collapse | Disparado quando o método de instância de ocultar foi chamado. | |
| hidden.bs.collapse | Este evento é disparado quando um elemento de recolhimento é ocultado do usuário (aguardará a conclusão das transições CSS). | |
Exemplo
O exemplo a seguir demonstra o uso de eventos -
<div class = "panel-group" id = "accordion">
<div class = "panel panel-info">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseexample">
Click me to expand. Click me again to collapse. Section --shown event
</a>
</h4>
</div>
<div id = "collapseexample" class = "panel-collapse collapse">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
</div>
<script type = "text/javascript">
$(function () {
$('#collapseexample').on('show.bs.collapse', function () {
alert('Hey, this alert shows up when you expand it');
})
});
</script>O carrossel Bootstrap é uma maneira flexível e responsiva de adicionar um controle deslizante ao seu site. Além de ser responsivo, o conteúdo é flexível o suficiente para permitir imagens, iframes, vídeos ou qualquer tipo de conteúdo que você desejar.
Se você deseja incluir esta funcionalidade de plug-in individualmente, você precisará do carousel.js. Além disso, conforme mencionado no capítulo Visão geral dos plug-ins de bootstrap , você pode incluir o bootstrap.js ou o bootstrap.min.js minimizado .
Exemplo
Uma apresentação de slides simples abaixo mostra um componente genérico para percorrer os elementos como um carrossel, usando o plug-in de carrossel Bootstrap. Para implementar o carrossel, você só precisa adicionar o código com a marcação. Não há necessidade de atributos de dados, apenas desenvolvimento simples baseado em classe.
<div id = "myCarousel" class = "carousel slide">
<!-- Carousel indicators -->
<ol class = "carousel-indicators">
<li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
<li data-target = "#myCarousel" data-slide-to = "1"></li>
<li data-target = "#myCarousel" data-slide-to = "2"></li>
</ol>
<!-- Carousel items -->
<div class = "carousel-inner">
<div class = "item active">
<img src = "/bootstrap/images/slide1.png" alt = "First slide">
</div>
<div class = "item">
<img src = "/bootstrap/images/slide2.png" alt = "Second slide">
</div>
<div class = "item">
<img src = "/bootstrap/images/slide3.png" alt = "Third slide">
</div>
</div>
<!-- Carousel nav -->
<a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">‹</a>
<a class = "carousel-control right" href = "#myCarousel" data-slide = "next">›</a>
</div>Legendas opcionais
Você pode adicionar legendas aos slides facilmente com o .carousel-caption elemento dentro de qualquer .item. Coloque qualquer HTML opcional lá e ele será alinhado e formatado automaticamente. O exemplo a seguir demonstra isso -
<div id = "myCarousel" class = "carousel slide">
<!-- Carousel indicators -->
<ol class = "carousel-indicators">
<li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
<li data-target = "#myCarousel" data-slide-to = "1"></li>
<li data-target = "#myCarousel" data-slide-to = "2"></li>
</ol>
<!-- Carousel items -->
<div class = "carousel-inner">
<div class = "item active">
<img src = "/bootstrap/images/slide1.png" alt = "First slide">
<div class = "carousel-caption">This Caption 1</div>
</div>
<div class = "item">
<img src = "/bootstrap/images/slide2.png" alt = "Second slide">
<div class = "carousel-caption">This Caption 2</div>
</div>
<div class = "item">
<img src = "/bootstrap/images/slide3.png" alt = "Third slide">
<div class = "carousel-caption">This Caption 3</div>
</div>
</div>
<!-- Carousel nav -->
<a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">‹</a>
<a class = "carousel-control right" href = "#myCarousel" data-slide = "next">›</a>+
</div>Uso
Via data attributes - Use atributos de dados para controlar facilmente a posição do carrossel.
Atributo data-slideaceita as palavras-chave prev ou next , o que altera a posição do slide em relação à sua posição atual.
Usar data-slide-to para 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 uma animação começando no carregamento da página.
Via JavaScript - O carrossel pode ser chamado manualmente com JavaScript conforme abaixo -
$('.carousel').carousel()Opções
Existem algumas opções que podem ser transmitidas por meio de atributos de dados ou JavaScript, listadas na tabela a seguir -
| Nome da Opção | Tipo / valor padrão | Nome do atributo de dados | Descrição |
|---|---|---|---|
| intervalo | número Padrão - 5000 | intervalo de dados | A quantidade de tempo de atraso entre o ciclo automático de um item. Se for falso, o carrossel não circulará automaticamente. |
| pausa | string Padrão - "hover" | pausa de dados | Pausa o ciclo do carrossel no mouseenter e retoma o ciclo do carrossel na página do mouse. |
| embrulho | padrão booleano - verdadeiro | data-wrap | Se o carrossel deve girar continuamente ou ter paradas bruscas. |
Métodos
Aqui está uma lista de métodos úteis que podem ser usados com o código do carrossel.
| Método | Descrição | Exemplo |
|---|---|---|
| .carossel (opções) | Inicializa o carrossel com um objeto opcional de opções e começa a percorrer os itens. | |
| .carossel ('ciclo') | Percorre os itens do carrossel da esquerda para a direita. | |
| .carossel ('pausa') | Impede que o carrossel percorra os itens. | |
| .carossel (número) | Percorre o carrossel para um quadro específico (com base em 0, semelhante a uma matriz). | |
| .carossel ('anterior') | Volta para o item anterior. | |
| .carossel ('próximo') | Alterna para o próximo item. | |
Exemplo
O exemplo a seguir demonstra o uso de métodos -
<div id = "myCarousel" class = "carousel slide">
<!-- Carousel indicators -->
<ol class = "carousel-indicators">
<li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
<li data-target = "#myCarousel" data-slide-to = "1"></li>
<li data-target = "#myCarousel" data-slide-to = "2"></li>
</ol>
<!-- Carousel items -->
<div class = "carousel-inner">
<div class = "item active">
<img src = "/bootstrap/images/slide1.png" alt = "First slide">
</div>
<div class = "item">
<img src = "/bootstrap/images/slide2.png" alt = "Second slide">
</div>
<div class = "item">
<img src = "/bootstrap/images/slide3.png" alt = "Third slide">
</div>
</div>
<!-- Carousel nav -->
<a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">‹</a>
<a class = "carousel-control right" href = "#myCarousel" data-slide = "next">›</a>
<!-- Controls buttons -->
<div style = "text-align:center;">
<input type = "button" class = "btn prev-slide" value = "Previous Slide">
<input type = "button" class = "btn next-slide" value = "Next Slide">
<input type = "button" class = "btn slide-one" value = "Slide 1">
<input type = "button" class = "btn slide-two" value = "Slide 2">
<input type = "button" class = "btn slide-three" value = "Slide 3">
</div>
</div>
<script>
$(function() { // Cycles to the previous item $(".prev-slide").click(function() {
$("#myCarousel").carousel('prev'); }); // Cycles to the next item $(".next-slide").click(function() {
$("#myCarousel").carousel('next'); }); // Cycles the carousel to a particular frame $(".slide-one").click(function() {
$("#myCarousel").carousel(0); }); $(".slide-two").click(function() {
$("#myCarousel").carousel(1); }); $(".slide-three").click(function() {
$("#myCarousel").carousel(2);
});
});
</script>Eventos
A classe carrossel do Bootstrap expõe dois eventos para conexão com a funcionalidade do carrossel, listados na tabela a seguir.
| Evento | Descrição | Exemplo |
|---|---|---|
| slide.bs.carousel | Este evento é disparado imediatamente quando o método de instância de slide é chamado. | |
| slid.bs.carousel | Este evento é disparado quando o carrossel conclui sua transição de slides. | |
Exemplo
O exemplo a seguir demonstra o uso de eventos -
<div id = "myCarousel" class = "carousel slide">
<!-- Carousel indicators -->
<ol class = "carousel-indicators">
<li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
<li data-target = "#myCarousel" data-slide-to = "1"></li>
<li data-target = "#myCarousel" data-slide-to = "2"></li>
</ol>
<!-- Carousel items -->
<div class = "carousel-inner">
<div class = "item active">
<img src = "/bootstrap/images/slide1.png" alt = "First slide">
</div>
<div class = "item">
<img src = "/bootstrap/images/slide2.png" alt = "Second slide">
</div>
<div class = "item">
<img src = "/bootstrap/images/slide3.png" alt = "Third slide">
</div>
</div>
<!-- Carousel nav -->
<a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">‹</a>
<a class = "carousel-control right" href = "#myCarousel" data-slide = "next">›</a>
</div>
<script>
$(function() {
$('#myCarousel').on('slide.bs.carousel', function () {
alert("This event fires immediately when the slide instance method" +"is invoked.");
});
});
</script>O plugin afixo permite que um <div> seja afixado em um local na página. Você também pode ativar e desativar a fixação usando este plugin. Um exemplo comum disso são os ícones sociais. Eles começarão em um local, mas quando a página atingir uma determinada marca, o <div> será travado no lugar e irá parar de rolar com o resto da página.
Se você deseja incluir esta funcionalidade de plug-in individualmente, você precisará do affix.js. Além disso, conforme mencionado no capítulo Visão geral dos plug-ins de bootstrap , você pode incluir o bootstrap.js ou o bootstrap.min.js minimizado .
Uso
Você pode usar o plugin afixo por meio de atributos de dados ou manualmente com seu próprio JavaScript, conforme discutido abaixo.
Via data attributes - Para adicionar facilmente o comportamento do afixo a qualquer elemento, basta adicionar data-spy = "affix"para o elemento que você deseja espionar. Use deslocamentos para definir quando alternar a fixação de um elemento.
Exemplo
O exemplo a seguir demonstra o uso por meio de atributos de dados -
<div class = "container">
<div class = "jumbotron">
<h1>Bootstrap Affix Plugin example</h1>
</div>
<div id = "myNav" data-spy = "affix" data-offset-top = "60" data-offset-bottom = "200">
<div class = "col-md-3">
<ul class = "nav nav-tabs nav-stacked affix" data-spy = "affix" data-offset-top = "190">
<li class = "active"><a href = "#one">Tutorial One</a></li>
<li><a href = "#two">Tutorial Two</a></li>
<li><a href = "#three">Tutorial Three</a></li>
</ul>
</div>
<div class = "col-md-9">
<h2 id = "one">Tutorial One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,
dapibus nec turpis vel, semper malesuada ante. Vestibulum
id metus ac nisl bibendum scelerisque non non purus. Suspendisse
varius nibh non aliquet sagittis. In tincidunt orci sit amet
elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque
aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum
eu, tristique eget risus. Integer aliquet quam ut elit suscipit,
id interdum neque porttitor. Integer faucibus ligula.</p>
<p>Vestibulum quis quam ut magna consequat faucibus.
Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum
risus. Pellentesque viverra sagittis quam at mattis. Suspendisse
potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
Phasellus auctor velit at lacus blandit, commodo iaculis justo
viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget
mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat.
Maecenas mattis lectus enim, quis tincidunt dui molestie euismod.
Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
<hr>
<h2 id = "two">Tutorial Two</h2>
<p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in
sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis
dapibus orci. In dapibus velit blandit pharetra tincidunt.
Quisque non sapien nec lacus condimentum facilisis ut iaculis enim.
Sed viverra interdum bibendum. Donec ac sollicitudin dolor. Sed
fringilla vitae lacus at rutrum. Phasellus congue vestibulum ligula sed consequat.</p>
<p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem
convallis sed. Nam odio tortor, dictum quis malesuada at,
pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis,
diam velit egestas lacus, quis fermentum metus ante quis urna. Sed at
facilisis libero. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Vestibulum bibendum
blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit
tincidunt ante. Vivamus sem augue, hendrerit non sapien in,
mollis ornare augue.</p>
<hr>
<h2 id = "three">Tutorial Three</h2>
<p>Integer pulvinar leo id risus pellentesque vestibulum.
Sed diam libero, sodales eget sapien vel, porttitor bibendum enim.
Donec sed nibh vitae lorem porttitor blandit in nec ante.
Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada
condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec
pharetra id arcu eget blandit. Proin imperdiet mattis augue in
porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse
tincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus
lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl
semper tortor, vel sagittis lacus est consequat eros. Sed id pretium
nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit
amet mauris. </p>
<p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante
id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus
turpis at accumsan tincidunt. Phasellus risus risus,
volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit
dolor eget ante rutrum adipiscing. Cras interdum ipsum mattis,
tempus mauris vel, semper ipsum. Duis sed dolor ut enim lobortis
pellentesque ultricies ac ligula. Pellentesque convallis elit nisi, id
vulputate ipsum ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse
potenti. Integer pellentesque neque et elementum tempus.
Curabitur bibendum in ligula ut rhoncus.</p>
<p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo
sed ligula porta semper eu quis enim. Pellentesque pellentesque,
metus at facilisis hendrerit, lectus velit facilisis leo, quis
volutpat turpis arcu quis enim. Nulla viverra lorem elementum
interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus.
Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
</div>
</div>
</div>Via JavaScript - Você pode afixar um elemento manualmente com JavaScript, conforme mostrado abaixo
$('#myAffix').affix({
offset: {
top: 100, bottom: function () {
return (this.bottom = $('.bs-footer').outerHeight(true))
}
}
})Exemplo
O exemplo a seguir demonstra o uso por meio de atributos de dados -
<div class = "container">
<div class = "jumbotron">
<h1>Bootstrap Affix Plugin example</h1>
</div>
<div>
<div class = "col-md-3">
<ul class = "nav nav-tabs nav-stacked affix" id = "myNav">
<li class = "active"><a href = "#one">Tutorial One</a></li>
<li><a href = "#two">Tutorial Two</a></li>
<li><a href = "#three">Tutorial Three</a></li>
</ul>
</div>
<div class = "col-md-9">
<h2 id = "one">Tutorial One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,
dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus
ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh
non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum.
Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio
in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique
eget risus. Integer aliquet quam ut elit suscipit, id interdum
neque porttitor. Integer faucibus ligula.</p>
<p>Vestibulum quis quam ut magna consequat faucibus.
Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum
risus. Pellentesque viverra sagittis quam at mattis. Suspendisse
potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
Phasellus auctor velit at lacus blandit, commodo iaculis justo
viverra. Etiam vitae est arcu. Mauris vel congue dolor.
Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis,
bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt
dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu,
hendrerit tellus.</p>
<hr>
<h2 id = "two">Tutorial Two</h2>
<p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in
sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris
quis dapibus orci. In dapibus velit blandit pharetra tincidunt.
Quisque non sapien nec lacus condimentum facilisis ut iaculis enim.
Sed viverra interdum bibendum. Donec ac sollicitudin dolor.
Sed fringilla vitae lacus at rutrum. Phasellus congue vestibulum
ligula sed consequat.</p>
<p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem
convallis sed. Nam odio tortor, dictum quis malesuada at,
pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis,
diam velit egestas lacus, quis fermentum metus ante quis urna.
Sed at facilisis libero. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Vestibulum bibendum
blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit
tincidunt ante. Vivamus sem augue, hendrerit non sapien in,
mollis ornare augue.</p>
<hr>
<h2 id = "three">Tutorial Three</h2>
<p>Integer pulvinar leo id risus pellentesque vestibulum.
Sed diam libero, sodales eget sapien vel, porttitor bibendum enim.
Donec sed nibh vitae lorem porttitor blandit in nec ante.
Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada
condimentum. Etiam in aliquam lectus. Nam vel sapien diam.
Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in
porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse
tincidunt risus quis dolor fringilla blandit. Ut sed sapien at
purus lacinia porttitor. Nullam iaculis, felis a pretium ornare,
dolor nisl semper tortor, vel sagittis lacus est consequat eros.
Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id,
tincidunt sit amet mauris.</p>
<p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id
lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis
at accumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac,
tincidunt fringilla massa. Etiam hendrerit dolor eget ante
rutrum adipiscing. Cras interdum ipsum mattis, tempus mauris vel,
semper ipsum. Duis sed dolor ut enim lobortis pellentesque ultricies
ac ligula. Pellentesque convallis elit nisi, id vulputate ipsum
ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse
potenti. Integer pellentesque neque et elementum tempus.
Curabitur bibendum in ligula ut rhoncus.</p>
<p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo
sed ligula porta semper eu quis enim. Pellentesque pellentesque,
metus at facilisis hendrerit, lectus velit facilisis leo, quis
volutpat turpis arcu quis enim. Nulla viverra lorem elementum
interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus.
Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
</div>
</div>
</div>
<script type = "text/javascript">
$(function () {
$('#myNav').affix({
offset: {
top: 60
}
});
});
</script>Posicionamento via CSS
Em ambas as situações acima, você deve fornecer CSS para o posicionamento de seu conteúdo. O plugin afixo alterna entre três classes, cada uma representando um estado particular - .affix, .affix-top e .affix-bottom . Siga as etapas abaixo para definir seu CSS para qualquer uma das opções de uso acima.
Para começar, o plugin adiciona .affix-toppara indicar que o elemento está na posição mais alta. Neste ponto, nenhum posicionamento CSS é necessário.
Rolar além do elemento que você deseja afixar deve acionar a afixação real. Aqui é onde.affix substitui .affix-top e conjuntos position: fixed; (fornecido pelo código CSS do Bootstrap).
Se um deslocamento inferior for definido, rolar além disso deve substituir .affix com .affix-bottom. Uma vez que os deslocamentos são opcionais, a configuração de um requer que você configure o CSS apropriado. Neste caso, adicioneposition: absolute; quando necessário.
Opções
Existem certas opções que podem ser transmitidas por meio de atributos de dados ou JavaScript, conforme listado na tabela a seguir -
| Nome da Opção | Tipo / valor padrão | Nome do atributo de dados | Descrição |
|---|---|---|---|
| Deslocamento | número | função | objeto Padrão: 10 | deslocamento de dados | Pixels para deslocar da tela ao calcular a posição da rolagem. Se um único número for fornecido, o deslocamento será aplicado nas direções superior e inferior. Para fornecer um deslocamento único, inferior e superior, basta fornecer um deslocamento do objeto: {superior: 10} ou deslocamento: {superior: 10, inferior: 5}. Use uma função quando precisar calcular dinamicamente um deslocamento. |
O que é uma grade?
No design gráfico, uma grade é uma estrutura (geralmente bidimensional) composta de uma série de linhas retas que se cruzam (verticais, horizontais) usadas para estruturar o conteúdo. É amplamente utilizado para projetar layout e estrutura de conteúdo em design de impressão. Em web design, é um método muito eficaz para criar um layout consistente de forma rápida e eficaz usando HTML e CSS.
Funcionamento do sistema Bootstrap Grid
Os sistemas de grade são usados para criar layouts de página por meio de uma série de linhas e colunas que hospedam seu conteúdo. É assim que funciona o sistema de grade Bootstrap -
As linhas devem ser colocadas dentro de um .container classe para alinhamento e preenchimento adequados.
Use linhas para criar grupos horizontais de colunas.
O conteúdo deve ser colocado dentro das colunas, e apenas as colunas podem ser filhos imediatos das linhas.
Classes de grade predefinidas como .row and .col-xs-4estão disponíveis para criar layouts de grade rapidamente. Mixins MENOS também podem ser usados para layouts mais semânticos.
As colunas criam medianizes (lacunas entre o conteúdo da coluna) por meio de preenchimento. Esse preenchimento é deslocado nas linhas da primeira e da última coluna por meio da margem negativa em.rows.
As colunas de grade são criadas especificando-se o número de doze colunas disponíveis que você deseja expandir. Por exemplo, três colunas iguais usariam três.col-xs-4.
| Exemplo | Descrição | Link para Download |
|---|---|---|
| Grades | Este exemplo indica sobre a estrutura da grade no Bootstrap. | Baixar |
O Bootstrap fornece um layout limpo para a construção de tabelas. Alguns dos elementos da tabela suportados pelo Bootstrap são -
| Sr. Não. | Tag e descrição |
|---|---|
| 1 | <table> Elemento de empacotamento para exibir dados em um formato tabular |
| 2 | <thead> Elemento de contêiner para linhas de cabeçalho da tabela (<tr>) para rotular as colunas da tabela. |
| 3 | <tbody> Elemento de contêiner para linhas da tabela (<tr>) no corpo da tabela. |
| 4 | <tr> Elemento de contêiner para um conjunto de células da tabela (<td> ou <th>) que aparece em uma única linha. |
| 5 | <td> Célula da tabela padrão. |
| 6 | <th> Célula de tabela especial para rótulos de coluna (ou linha, dependendo do escopo e do posicionamento). Deve ser usado em um <thead> |
| 7 | <caption> Descrição ou resumo do que a tabela contém. |
| Exemplo | Descrição | Link para Download |
|---|---|---|
| Comprar mesa | Este exemplo indica sobre a estrutura da tabela de compra no Bootstrap. | Baixar |
| Tabela de Plano | Este exemplo indica sobre a estrutura da tabela de plano no Bootstrap. | Baixar |
| Mesa com galeria | Este exemplo indica a estrutura da tabela da galeria no Bootstrap. | Baixar |
Layout de formulário
O Bootstrap fornece os seguintes tipos de layouts de formulário -
- Forma vertical (padrão)
- Formulário em linha
- Forma horizontal
Forma vertical ou básica
A estrutura básica do formulário vem com o Bootstrap; os controles de formulário individuais recebem automaticamente algum estilo global. Para criar um formulário básico, faça o seguinte -
Adicione um formulário de função ao elemento pai <form>.
Envolva rótulos e controles em um <div> com class .form-group . Isso é necessário para um espaçamento ideal.
Adicione uma classe de .form-control a todos os elementos textuais <input>, <textarea> e <select>.
Formulário Inline
Para criar um formulário em que todos os elementos estão embutidos, alinhados à esquerda e os rótulos ao lado, adicione a classe .form-embutido à tag <form>.
Forma Horizontal
Os formulários horizontais se diferenciam dos outros não apenas na quantidade de marcação, mas também na apresentação do formulário. Para criar um formulário que usa o layout horizontal, faça o seguinte -
Adicione uma classe de .form-horizontal ao elemento pai <form>.
Envolva rótulos e controles em um <div> com class .form-group .
Adicione uma classe de .control-label aos rótulos.
| Exemplo | Descrição | Link para Download |
|---|---|---|
| Página de login | Este exemplo indica sobre a estrutura da página de login no Bootstrap | Baixar |
| Página de contato | Este exemplo indica sobre a estrutura da página de contato no Bootstrap | Baixar |
| Página de inscrição | Este exemplo indica sobre a estrutura da página de inscrição no Bootstrap | Baixar |
O Bootstrap oferece algumas opções para definir o estilo dos botões, que estão resumidas na tabela a seguir -
| Sr. Não. | Classe e descrição |
|---|---|
| 1 | btn Botão padrão / padrão. |
| 2 | btn-primary Fornece peso visual extra e identifica a ação principal em um conjunto de botões. |
| 3 | btn-success Indica uma ação bem-sucedida ou positiva. |
| 4 | btn-info Botão contextual para mensagens de alerta informativas. |
| 5 | btn-warning Indica que cuidado deve ser tomado com esta ação. |
| 6 | btn-danger Indica uma ação perigosa ou potencialmente negativa. |
| 7 | btn-link Retire a ênfase de um botão fazendo-o parecer um link enquanto mantém o comportamento do botão. |
| Exemplo | Descrição | Link para Download |
|---|---|---|
| Botões IOS | Este exemplo indica sobre a estrutura do botão no Bootstrap | Baixar |
| Botões de imagem | Este exemplo indica a estrutura do botão de imagem no Bootstrap | Baixar |
| Botões de sombra | Este exemplo indica a estrutura do botão Shadow no Bootstrap | Baixar |
| Botões de inscrição | Este exemplo indica sobre a estrutura do botão Sign Up no Bootstrap | Baixar |
O Bootstrap fornece três classes que podem ser usadas para aplicar alguns estilos simples a imagens -
.img-rounded - adiciona border-radius: 6px para dar cantos arredondados à imagem.
.img-circle - torna a imagem inteira redonda adicionando border-radius: 500px .
.img-thumbnail - adiciona um pouco de preenchimento e uma borda cinza:
| Exemplo | Descrição | Link para Download |
|---|---|---|
| Galeria de imagens | Este exemplo indica a estrutura da galeria de imagens no Bootstrap | Baixar |
| Zoom de imagem | Este exemplo indica sobre a estrutura de zoom da imagem no Bootstrap | Baixar |
| Galeria de imagens da equipe | Este exemplo indica sobre a estrutura da imagem de grade no Bootstrap | Baixar |
| Imagem de fundo | Este exemplo indica sobre a estrutura da imagem de fundo no Bootstrap | Baixar |
| Imagem no painel | Este exemplo indica sobre a estrutura da imagem no Bootstrap | Baixar |
O Bootstrap oferece algumas classes auxiliares para um desenvolvimento mais rápido e compatível com dispositivos móveis. Eles podem ser usados para mostrar e ocultar conteúdo por dispositivo por meio de consulta de mídia, combinados com dispositivos grandes, pequenos e médios.
Use-os com moderação e evite criar versões totalmente diferentes do mesmo site. Responsive utilities are currently only available for block and table toggling.
| Aulas | Dispositivos |
|---|---|
| .visible-xs | Extra pequeno (menos de 768 px) visível |
| .visible-sm | Pequeno (até 768 px) visível |
| .visible-md | Médio (768 px a 991 px) visível |
| .visible-lg | Maior (992 px e acima) visível |
| .hidden-xs | Extra pequeno (menos de 768 px) oculto |
| .hidden-sm | Pequeno (até 768 px) oculto |
| .hidden-md | Médio (768 px a 991 px) oculto |
| .hidden-lg | Maior (992 px e acima) oculto |
| Exemplo | Descrição | Link para Download |
|---|---|---|
| Cartão responsivo | Este exemplo indica sobre a estrutura da placa no Bootstrap | Baixar |
| Testemunhos simples | Este exemplo indica sobre a estrutura de Testemunhos no Bootstrap | Baixar |
| Grade de vídeo | Este exemplo indica a estrutura do Grid Video no Bootstrap | Baixar |
| Imagem de banner | Este exemplo indica sobre a estrutura da imagem do banner no Bootstrap | Baixar |
| Carrossel com indicadores de rosto | Este exemplo indica sobre Carrossel com estrutura de indicadores de rosto no Bootstrap | Baixar |
O Bootstrap oferece algumas opções diferentes para estilizar os elementos de navegação. Todos eles compartilham a mesma marcação e classe base, .nav. O Bootstrap também fornece uma classe auxiliar, para compartilhar marcações e estados. Troque as classes do modificador para alternar entre cada estilo.
| Exemplo | Descrição | Link para Download |
|---|---|---|
| Demonstração de navegação | Este exemplo indica sobre a estrutura de navegação no Bootstrap | Baixar |
| Barra de navegação de imagem | Este exemplo indica a estrutura da barra de navegação de imagens no Bootstrap | Baixar |
| Botões Findcon | Este exemplo indica sobre a estrutura do botão findcon no Bootstrap | Baixar |
| Tiny Navbar | Este exemplo indica a estrutura do Tiny Navbar no Bootstrap | Baixar |
Bootstrap fornece algumas opções diferentes para estilizar blogs. Alguns dos elementos do blog são como caixa de comentários, postagem do blog, rodapé do blog etc.
| Exemplo | Descrição | Link para Download |
|---|---|---|
| Demonstração da caixa de comentários | Este exemplo indica a estrutura da caixa de comentários no Bootstrap | Baixar |
| Postagens de blog com imagens | Este exemplo indica sobre a estrutura de elementos de Postagens de Blog com Imagens no Bootstrap | Baixar |
| Rodapé do Blog | Este exemplo indica sobre a estrutura do rodapé do blog no Bootstrap | Baixar |
| Miniaturas | Este exemplo indica sobre a estrutura de miniaturas no Bootstrap | Baixar |
O que é um design de material
O design de material é um guia abrangente para design visual, de movimento e de interação entre plataformas
| Exemplo | Descrição | Link para Download |
|---|---|---|
| Demonstração da caixa de material | Este exemplo indica sobre a estrutura da placa de material no Bootstrap. | Baixar |
| Cartões de Material | Este exemplo indica sobre a estrutura da placa de material no Bootstrap. | Baixar |
| Navegação de Material | Este exemplo indica sobre a estrutura de navegação de material no Bootstrap. | Baixar |
| Navegação na caixa de entrada | Este exemplo indica a estrutura de navegação da caixa de entrada no Bootstrap. | Baixar |
O Bootstrap fornece algumas opções diferentes para estilizar o controle deslizante de navegação. Alguns dos exemplos são mostrados abaixo -
| Exemplo | Descrição | Link para Download |
|---|---|---|
| Menu de slides sobre | Este exemplo indica sobre a estrutura do Menu Slider no Bootstrap | Baixar |
| Submenu | Este exemplo indica a estrutura do submenu do Slider no Bootstrap | Baixar |
| Barra lateral com guias | Este exemplo indica a estrutura do Slider With Tabs no Bootstrap | Baixar |
| Abas | Este exemplo indica sobre a estrutura de guias no Bootstrap | Baixar |
O Bootstrap oferece algumas opções diferentes para definir o estilo da linha do tempo. Alguns exemplos, conforme mostrado abaixo -
| Exemplo | Descrição | Link para Download |
|---|---|---|
| Demonstração da linha do tempo | Este exemplo indica sobre a estrutura da linha do tempo no Bootstrap | baixar |
| Linha do tempo de coluna única pontilhada | Este exemplo indica sobre a estrutura pontilhada da linha do tempo de coluna única no Bootstrap | baixar |
| TimeLine coluna única | Este exemplo indica sobre a estrutura de coluna única TimeLine no Bootstrap | baixar |
| Linha do tempo - pontilhada | Este exemplo indica sobre a linha do tempo - estrutura pontilhada no Bootstrap | baixar |
Os alertas fornecem uma maneira de definir o estilo das mensagens para o usuário. Eles fornecem mensagens de feedback contextual para ações típicas do usuário. Alguns exemplos de alerta conforme mostrado abaixo -
| Exemplo | Descrição | Link para Download |
|---|---|---|
| Alertas de página | Este exemplo indica sobre a estrutura do Alerta de Página no Bootstrap | Baixar |
| Mensagens de Alerta | Este exemplo indica sobre a estrutura de Mensagens de Alerta no Bootstrap | Baixar |
| Pequenas ofertas com cores e raio | Este exemplo indica sobre as ofertas da Little com cores e estrutura de raio no Bootstrap | Baixar |
| Caixas de status | Este exemplo indica sobre a estrutura da Caixa de Status no Bootstrap | Baixar |
O Bootstrap oferece algumas opções diferentes para estilizar a interface de administração. Algumas das interfaces de administração, conforme mostrado abaixo -
| Exemplo | Descrição | Link para Download |
|---|---|---|
| Caixa de entrada de e-mail responsiva e composição | Este exemplo indica sobre a estrutura de Caixa de entrada de e-mail responsiva e composição no Bootstrap | Baixar |
| Admin Simples | Este exemplo indica sobre a estrutura da interface Simple Admin no Bootstrap | Baixar |
| Bootstrap para Datatable | Este exemplo indica sobre a estrutura Bootstrap for Datatable no Bootstrap | Baixar |
| Interface de Email | Este exemplo indica sobre a estrutura da interface de e-mail no Bootstrap | Baixar |
Ajax é usado para se comunicar com páginas da web e servidores da web. Alguns dos exemplos que são baseados em ajax e bootstrap como mostrado abaixo -
| Exemplo | Descrição | Link para Download |
|---|---|---|
| Formulário de pagamento | Este exemplo indica sobre o Formulário de Pagamento Ajax no Bootstrap | Baixar |
| Assistente AJAX / DIV | Este exemplo indica sobre o Ajax AJAX / DIV Wizard no Bootstrap | Baixar |
O Bootstrap oferece algumas opções diferentes para controle deslizante. Controle deslizante com guias conforme mostrado abaixo -
| Exemplo | Descrição | Link para Download |
|---|---|---|
| Controle deslizante com guias | Este exemplo indica sobre o controle deslizante com guias no bootstrap | Baixar |
O Bootstrap oferece algumas opções diferentes para legendas. Efeito de flutuação da legenda da miniatura conforme mostrado abaixo -
| Exemplo | Descrição | Link para Download |
|---|---|---|
| Caption Hover | Este exemplo indica sobre legendas em imagens no Bootstrap | Baixar |
O Bootstrap oferece algumas opções diferentes para o mapa. exemplo de exemplo de mapa é mostrado abaixo -
| Exemplo | Descrição | Link para Download |
|---|---|---|
| Mapas | Este exemplo indica sobre o Mapa no Bootstrap | Baixar |
O Bootstrap oferece algumas opções diferentes para calendários. exemplo de amostra de calendário é mostrado abaixo -
| Exemplo | Descrição | Link para Download |
|---|---|---|
| Paginador de data responsivo | Este exemplo indica sobre o calendário no Bootstrap | Baixar |
| Agenda | Este exemplo indica sobre a Agenda do calendário no Bootstrap | Baixar |
| Selecionador de data simples | Este exemplo indica sobre o selecionador de data no bootstrap | Baixar |
| Calendário | Este exemplo indica sobre o Calendário no Bootstrap | Baixar |
O Bootstrap oferece algumas opções diferentes para ícones sociais. exemplos de ícones sociais são mostrados abaixo -
| Exemplo | Descrição | Link para Download |
|---|---|---|
| Spinning Social Icons | Este exemplo indica a estrutura de Spinning Social Icons no Bootstrap | Baixar |
| Ícones sociais com FontAwesome | Este exemplo indica sobre o ícone Social com a fonte Awesome no Bootstrap | Baixar |
| Zoom Social Icon Hover Animation | Este exemplo indica sobre Zoom Social Icon Hover Animation no Bootstrap | Baixar |
| Botão de compartilhamento | Este exemplo indica sobre o botão Compartilhar no Bootstrap | Baixar |
O Bootstrap oferece algumas opções diferentes para ícones como fontes. exemplos de amostra de ícones são mostrados abaixo -
| Exemplo | Descrição | Link para Download |
|---|---|---|
| Emblemas de ícones redondos | Este exemplo indica sobre emblemas de ícones redondos no Bootstrap | Baixar |
| Rotação e inversão | Este exemplo indica ícones com animação no Bootstrap | Baixar |
| Ui-Kit-Metro como Nav | Este exemplo indica ícones com animação de IU no Bootstrap | Baixar |
| Botão azul gordo e plano | Este exemplo indica sobre o botão azul Fat e Flat no Bootstrap | Baixar |
O Bootstrap oferece algumas opções diferentes para definir o estilo dos elementos do Bootstrap. Alguns dos elementos do bootstrap, conforme mostrado abaixo -
| Exemplo | Descrição | Link para Download |
|---|---|---|
| Interruptor de design de material | Este exemplo indica sobre a estrutura do interruptor do Material Design no Bootstrap | Baixar |
| Modal de bootstrap do Windows 8 | Este exemplo indica sobre a estrutura modal do Bootstrap do Windows 8 no Bootstrap | Baixar |
| Botões de fita | Este exemplo indica a estrutura dos Botões da Faixa de Opções no Bootstrap | Baixar |
| Frases de chamariz - frase de chamariz | Este exemplo indica sobre frases de chamariz - estrutura de frase de chamariz no Bootstrap | Baixar |
| Reportar bug | Este exemplo indica sobre a estrutura de relatório de bug no Bootstrap | Baixar |
| Carrossel com legendas flutuantes | Este exemplo indica sobre a estrutura Carrossel com Hover Captions no Bootstrap | Baixar |
| Parede do Facebook | Este exemplo indica sobre a estrutura do Facebook Wall no Bootstrap | Baixar |
| Alerta móvel | Este exemplo indica sobre a estrutura do Mobile Alert no Bootstrap | Baixar |
| Paginação arredondada | Este exemplo indica sobre paginação arredondada no bootstrap | Baixar |
| Miniaturas da lista de vídeos | Este exemplo indica sobre miniaturas da lista de vídeos no Bootstrap | Baixar |
| Botões de controle de mídia | Este exemplo indica sobre os botões de controle de mídia no Bootstrap | Baixar |
| Guia Vertical Simples | Este exemplo indica sobre Simple Vertical Tab no Bootstrap | Baixar |