Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
+
Apresente mensagens contextuais para ações típicas dos usuários, usando este punhado flexível de mensagens de alerta.
-
Examples
+
Exemplos
-
Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success). For inline dismissal, use the alerts jQuery plugin.
+
Alertas estão disponíveis para qualquer tamanho de texto, assim como um botão de dispersão opcional. Para uma estilização adequada, use uma das oito requeridas classes contextuais (ex: .alert-success). Para dispersão inline, use o plugin jQuery alerts.
- A simple primary alert—check it out!
+ Um simples alerta primary. Olha só!
- A simple secondary alert—check it out!
+ Um simples alerta secondary. Olha só!
- A simple success alert—check it out!
+ Um simples alerta success. Olha só!
- A simple danger alert—check it out!
+ Um simples alerta danger. Olha só!
- A simple warning alert—check it out!
+ Um simples alerta warning. Olha só!
- A simple info alert—check it out!
+ Um simples alerta info. Olha só!
- A simple light alert—check it out!
+ Um simples alerta light. Olha só!
- A simple dark alert—check it out!
+ Um simples alerta dark. Olha só!
<divclass="alert alert-primary"role="alert">
- A simple primary alert—check it out!
+ Um simples alerta primary. Olha só!
</div><divclass="alert alert-secondary"role="alert">
- A simple secondary alert—check it out!
+ Um simples alerta secondary. Olha só!
</div><divclass="alert alert-success"role="alert">
- A simple success alert—check it out!
+ Um simples alerta success. Olha só!
</div><divclass="alert alert-danger"role="alert">
- A simple danger alert—check it out!
+ Um simples alerta danger. Olha só!
</div><divclass="alert alert-warning"role="alert">
- A simple warning alert—check it out!
+ Um simples alerta warning. Olha só!
</div><divclass="alert alert-info"role="alert">
- A simple info alert—check it out!
+ Um simples alerta info. Olha só!
</div><divclass="alert alert-light"role="alert">
- A simple light alert—check it out!
+ Um simples alerta light. Olha só!
</div><divclass="alert alert-dark"role="alert">
- A simple dark alert—check it out!
+ Um simples alerta dark. Olha só!
</div>
-
Conveying meaning to assistive technologies
+
Transmitindo significado a tecnologias assistivas
-
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.
+
Usando cor para adicionar significado só fornece uma indicação visual, a qual não será transmitida para usuários de tecnologias assistivas (como leitores de telas). Se assegure que a informação denotada pela cor é tanto destacada do conteúdo (ex: o texto visível) ou está incluída em meios alternativos, como textos extras escondidos com a classe .sr-class.
-
Link color
+
Cores de links
-
Use the .alert-link utility class to quickly provide matching colored links within any alert.
+
Use a classe utilitária .alert-link para, rapidamente, conseguir cores de links que combinam com o alerta.
- A simple primary alert with an example link. Give it a click if you like.
+ Um simples alerta primary com um link de exemplo. Clique nele, se quiser.
- A simple secondary alert with an example link. Give it a click if you like.
+ Um simples alerta secondary com um link de exemplo. Clique nele, se quiser.
- A simple success alert with an example link. Give it a click if you like.
+ Um simples alerta success com um link de exemplo. Clique nele, se quiser.
- A simple danger alert with an example link. Give it a click if you like.
+ Um simples alerta danger com um link de exemplo. Clique nele, se quiser.
- A simple warning alert with an example link. Give it a click if you like.
+ Um simples alerta warning com um link de exemplo. Clique nele, se quiser.
- A simple info alert with an example link. Give it a click if you like.
+ Um simples alerta info com um link de exemplo. Clique nele, se quiser.
- A simple light alert with an example link. Give it a click if you like.
+ Um simples alerta light com um link de exemplo. Clique nele, se quiser.
- A simple dark alert with an example link. Give it a click if you like.
+ Um simples alerta dark com um link de exemplo. Clique nele, se quiser.
<divclass="alert alert-primary"role="alert">
- A simple primary alert with <ahref="#"class="alert-link">an example link</a>. Give it a click if you like.
+ Um simples alerta primary com <ahref="#"class="alert-link">um link de exemplo</a>. Clique nele, se quiser.
</div><divclass="alert alert-secondary"role="alert">
- A simple secondary alert with <ahref="#"class="alert-link">an example link</a>. Give it a click if you like.
+ Um simples alerta secondary com <ahref="#"class="alert-link">um link de exemplo</a>. Clique nele, se quiser.
</div><divclass="alert alert-success"role="alert">
- A simple success alert with <ahref="#"class="alert-link">an example link</a>. Give it a click if you like.
+ Um simples alerta success com <ahref="#"class="alert-link">um link de exemplo</a>. Clique nele, se quiser.
</div><divclass="alert alert-danger"role="alert">
- A simple danger alert with <ahref="#"class="alert-link">an example link</a>. Give it a click if you like.
+ Um simples alerta danger com <ahref="#"class="alert-link">um link de exemplo</a>. Clique nele, se quiser.
</div><divclass="alert alert-warning"role="alert">
- A simple warning alert with <ahref="#"class="alert-link">an example link</a>. Give it a click if you like.
+ Um simples alerta warning com <ahref="#"class="alert-link">um link de exemplo</a>. Clique nele, se quiser.
</div><divclass="alert alert-info"role="alert">
- A simple info alert with <ahref="#"class="alert-link">an example link</a>. Give it a click if you like.
+ Um simples alerta info com <ahref="#"class="alert-link">um link de exemplo</a>. Clique nele, se quiser.
</div><divclass="alert alert-light"role="alert">
- A simple light alert with <ahref="#"class="alert-link">an example link</a>. Give it a click if you like.
+ Um simples alerta light com <ahref="#"class="alert-link">um link de exemplo</a>. Clique nele, se quiser.
</div><divclass="alert alert-dark"role="alert">
- A simple dark alert with <ahref="#"class="alert-link">an example link</a>. Give it a click if you like.
+ Um simples alerta dark com <ahref="#"class="alert-link">um link de exemplo</a>. Clique nele, se quiser.
</div>
-
Additional content
+
Conteúdo adicional
-
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
+
Alertas também podem conter elementos HTML adicionais como cabeçalhos, parágrafos e divisores.
-
Well done!
-
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
+
Muito bem!
+
Aêêê! Você conseguiu ler essa mensagem de alerta. Esse texto vai ter quer se extender um pouquinho pra você conseguir ver como o espaçamento dentro de um alerta funciona.
-
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
+
Sempre que precisar, use utilitários de margem para manter as coisas perfeitas.
<divclass="alert alert-success"role="alert">
- <h4class="alert-heading">Well done!</h4>
- <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
+ <h4class="alert-heading">Muito bem!</h4>
+ <p>Aêêê! Você conseguiu ler essa mensagem de alerta. Esse texto vai ter quer se extender um pouquinho pra você conseguir ver como o espaçamento dentro de um alerta funciona.</p><hr>
- <pclass="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+ <pclass="mb-0">Sempre que precisar, use utilitários de margem para manter as coisas perfeitas.</p></div>
-
Dismissing
+
Dispersão
-
Using the alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how:
+
Usando o plugin JavaScript de alerta, é possível dispersar qualquer alerta inline, dessa forma:
-
Be sure you’ve loaded the alert plugin, or the compiled Bootstrap JavaScript.
-
If you’re building our JavaScript from source, it requires util.js. The compiled version includes this.
-
Add a dismiss button and the .alert-dismissible class, which adds extra padding to the right of the alert and positions the .close button.
-
On the dismiss button, add the data-dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the <button> element with it for proper behavior across all devices.
-
To animate alerts when dismissing them, be sure to add the .fade and .show classes.
+
Se assegure de carregar o plugin de alerta ou o JavaScript Bootstrap compilado;
+
Se você está construindo nosso JavaScript a partir da fonte, vai precisar do util.js;
+
+
A versão compilada já inclui ele.
+
+
+
Adicione um botão de dispersão e a classe .alert-dismissible, a qual adiciona padding extra a direita do alerta e posiciona o botão .close;
+
No botão de dispersão, use o atributo data-dismiss="alert", o qual aciona a funcionalidade JavaScript;
+
+
Tenha certeza de usar o elemento <button> com isso, para que ele se comporte em todos os dispositivos, adequadamente.
+
+
+
Para animar alertas quando dispersá-los, se assegure de usar as classes .fade e .show.
-
You can see this in action with a live demo:
+
Você pode ver isso, em ação, com essa demonstração em tempo real:
- Holy guacamole! You should check in on some of those fields below.
+ Oloco, meu! Olha esse alerta animado, como é chique!
<divclass="alert alert-warning alert-dismissible fade show"role="alert">
- <strong>Holy guacamole!</strong> You should check in on some of those fields below.
+ <strong>Oloco, meu!</strong> Olha esse alerta animado, como é chique!
<buttontype="button"class="close"data-dismiss="alert"aria-label="Close"><spanaria-hidden="true">×</span></button></div>
-
JavaScript behavior
+
Comportamento JavaScript
-
Triggers
+
Acionadores
-
Enable dismissal of an alert via JavaScript:
+
Ative a dispersão de um alerta, usando JavaScript:
$('.alert').alert()
-
Or with data attributes on a button within the alert, as demonstrated above:
+
Também é possível, usando atributos data em um botão dentro do alerta, como vemos abaixo:
Note that closing an alert will remove it from the DOM.
+
Perceba que dispersar um alerta irá removê-lo do DOM.
-
Methods
+
Métodos
-
Method
-
Description
+
Método
+
Descrição
$().alert()
-
Makes an alert listen for click events on descendant elements which have the data-dismiss="alert" attribute. (Not necessary when using the data-api’s auto-initialization.)
+
Faz um alerta esperar por eventos de cliques em elementos descendentes, os quais possuem o atributo data-dismiss="alert" (não é necessário, quando usando a auto-inicialização do data-api).
$().alert('close')
-
Closes an alert by removing it from the DOM. If the .fade and .show classes are present on the element, the alert will fade out before it is removed.
+
Fecha um alerta, removendo-o do DOM. Se as classes .fade e .show estão presentes no elemento, o alerta vai esmaecer antes de ser removido.
$().alert('dispose')
-
Destroys an element’s alert.
+
Destroi o alerta de um elemento.
$(".alert").alert('close')
-
Events
+
Eventos
-
Bootstrap’s alert plugin exposes a few events for hooking into alert functionality.
+
O plugin de alerta do Bootstrap usa alguns eventos para se ligar com a funcionalidade de alerta.
-
Event
-
Description
+
Evento
+
Descrição
close.bs.alert
-
This event fires immediately when the close instance method is called.
+
Este evento é acionado, imediadatamente, quando a instância do método close é invocada.
closed.bs.alert
-
This event is fired when the alert has been closed (will wait for CSS transitions to complete).
+
Este evento é acionado quando o alerta é fechado (vai esperar a transição CSS se finalizada).
Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.
+
Perceba que dependendo do uso, badges podem ser confusos para usuários de leitores de telas e tecnologias assistivas similares. Apesar do estilo dos badges serem intuitivos, esses usuários vão ser apresentados só ao conteúdo contido neles. Por isso, dependendo da situação, esses badges podem parecer palavras ou números quaisquer ao final da frase, link ou botão.
-
Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.
+
A não ser que o contexto esteja claro (como no exemplo “Notificações”, onde é entendido que o 4 é o número de notificações), considere criar contexto com um texto adicional escondido visualmente.
Add any of the below mentioned modifier classes to change the appearance of a badge.
+
Adicione qualquer uma das classes modificadoras mencionadas abaixo para mudar a aparência de um badge.
@@ -469,14 +469,14 @@
Contextual variations
<spanclass="badge badge-dark">Dark</span>
-
Conveying meaning to assistive technologies
+
Transmitindo significado a tecnologias assistivas
-
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.
+
Usando cor para adicionar significado só fornece uma indicação visual, a qual não será transmitida para usuários de tecnologias assistivas (como leitores de telas). Se assegure que a informação denotada pela cor é tanto destacada do conteúdo (ex: o texto visível) ou está incluída em meios alternativos, como textos extras escondidos com a classe .sr-class.
-
Pill badges
+
Badges em pílulas
-
Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding). Useful if you miss the badges from v3.
+
Use a classe modificadora .badge-pill para fazer com que os badges fiquem mais arredondados (border-radius maior e padding horizontal adicional). É útil se você precisa dos badges da v3.
@@ -500,7 +500,7 @@
Pill badges
Links
-
Using the contextual .badge-* classes on an <a> element quickly provide actionable badges with hover and focus states.
+
Usando as classes contextuais .badge-*, em um elemento <a>, rapidamente, consiga badges acionáveis com estados hover e focus.
Separators are automatically added in CSS through ::before and content. They can be changed by changing $breadcrumb-divider. The quote function is needed to generate the quotes around a string, so if you want > as seperator, you can use this:
+
Separadores são, automaticamente, adicionados com CSS usando ::before e content. Você pode escolhê-los, alterando a variável $breadcrumb-divider. A função quote é necessária para gerar as aspas ao redor de uma string, então, se você quer > como um separador, pode usar isso:
$breadcrumb-divider:quote(">");
-
It’s also possible to use a base64 embedded SVG icon:
+
Também é possível usar um ícone SVG base64 embutido:
The separator can be removed by setting $breadcrumb-divider to none:
+
O separador pode ser removido definindo o valor de $breadcrumb-divider como none:
$breadcrumb-divider:none;
-
Accessibility
+
Acessibilidade
-
Since breadcrumbs provide a navigation, it’s a good idea to add a meaningful label such as aria-label="breadcrumb" to describe the type of navigation provided in the <nav> element, as well as applying an aria-current="page" to the last item of the set to indicate that it represents the current page.
+
Já que breadcrumbs provém uma navegação, é uma boa ideia adicionar um atributo significativo como aria-label="breadcrumb" para descrever o tipo de navegação provida no elemento <nav>, assim como aplicar um aria-current="page" ao último item para indicar que ele representa a atual página.
Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
+
Grupos de botões
+
Agrupe vários botões em uma única linha e tune eles com JavaScript, usando este componente.
-
Basic example
+
Exemplo básico
-
Wrap a series of buttons with .btn in .btn-group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.
+
Envolva vários botões (que possuem .btn) em um elemento com .btn-group. Adicione um comportamento JavaScript opcional de radio ou checkbox com nosso plugin buttons.
Certifique-se de usar o role correto e prover uma label
-
In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate role attribute needs to be provided. For button groups, this would be role="group", while toolbars should have a role="toolbar".
+
Para que uma tecnologia assistiva (como leitores de telas) consiga entender que está lidando com uma série de botões agrupados, um atributo role, apropriado, deve ser usado. Para grupos de botões, o atributo poder ser role="group". Enquanto que toolbars devem usar role="toolbar".
-
In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use aria-label, but alternatives such as aria-labelledby can also be used.
+
Além disso, grupos de botões e toolbars devem receber uma label, já que a maioria das tecnologias assistivas não vão fazer isso, independente da presença do atributo role. Nos exemplos mostrados aqui, usamos aria-label, mas alternativas como aria-labelledby também podem serem usadas.
-
Button toolbar
+
Toolbars
-
Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
+
Combine grupos de botões para criar uma toolbar e ter um componente mais complexo. Use classes utilitárias, sempre que precisar, para espaçar grupos, botões e outras coisas.
-
-
+
+
-
+
-
+
-
<divclass="btn-toolbar"role="toolbar"aria-label="Toolbar with button groups">
- <divclass="btn-group mr-2"role="group"aria-label="First group">
+
Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities though to space things properly.
+
Sinta-se livre para usar uma mistura de grupos de inputs e botões, em suas toolbars. Similar ao exemplo acima, você vai precisar de alguns utilitários para espaçar as coisas, provavelmente.
-
-
+
+
@@ -477,12 +477,12 @@
Button toolbar
@
-
+
-
-
+
+
@@ -492,12 +492,12 @@
Button toolbar
@
-
+
-
<divclass="btn-toolbar mb-3"role="toolbar"aria-label="Toolbar with button groups">
- <divclass="btn-group mr-2"role="group"aria-label="First group">
+
<divclass="btn-toolbar mb-3"role="toolbar"aria-label="Toolbar com grupos de botões">
+ <divclass="btn-group mr-2"role="group"aria-label="Primeiro grupo"><buttontype="button"class="btn btn-secondary">1</button><buttontype="button"class="btn btn-secondary">2</button><buttontype="button"class="btn btn-secondary">3</button>
@@ -507,12 +507,12 @@
Button toolbar
<divclass="input-group-prepend"><divclass="input-group-text"id="btnGroupAddon">@</div></div>
- <inputtype="text"class="form-control"placeholder="Input group example"aria-label="Input group example"aria-describedby="btnGroupAddon">
+ <inputtype="text"class="form-control"placeholder="Exemplo de grupo de input"aria-label="Exemplo de grupo de input"aria-describedby="btnGroupAddon"></div></div>
-<divclass="btn-toolbar justify-content-between"role="toolbar"aria-label="Toolbar with button groups">
- <divclass="btn-group"role="group"aria-label="First group">
+<divclass="btn-toolbar justify-content-between"role="toolbar"aria-label="Toolbar com grupos de botões">
+ <divclass="btn-group"role="group"aria-label="Primeiro grupo"><buttontype="button"class="btn btn-secondary">1</button><buttontype="button"class="btn btn-secondary">2</button><buttontype="button"class="btn btn-secondary">3</button>
@@ -522,31 +522,31 @@
Button toolbar
<divclass="input-group-prepend"><divclass="input-group-text"id="btnGroupAddon2">@</div></div>
- <inputtype="text"class="form-control"placeholder="Input group example"aria-label="Input group example"aria-describedby="btnGroupAddon2">
+ <inputtype="text"class="form-control"placeholder="Exemplo de grupo de input"aria-label="Exemplo de grupo de input"aria-describedby="btnGroupAddon2"></div></div>
-
Sizing
+
Dimensionamento
-
Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including each one when nesting multiple groups.
+
Invés de aplicar classes para dimensionamento em cada botão de um grupo, basta adicionar .btn-group-* para cada .btn-group, incluindo cada um quando aninhar vários grupos.
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
+
Botões
+
Use os botões Bootstrap personalizados para ações em formulários, diálogos e outras coisas. Lembrando que esse componente tem suporte a escolha de tamanhos, estados e muito mais.
-
Examples
+
Exemplos
-
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
+
Bootstrap possui vários estilos de botões pré-definidos, cada um com seu próprosito semântico e outros recursos extras para mais controle.
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.
+
Usando cor para adicionar significado só fornece uma indicação visual, a qual não será transmitida para usuários de tecnologias assistivas (como leitores de telas). Se assegure que a informação denotada pela cor é tanto destacada do conteúdo (ex: o texto visível) ou está incluída em meios alternativos, como textos extras escondidos com a classe .sr-class.
Button tags
-
The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).
+
A classe .btn foi desenhada para ser usada com o elemento <button>. No entanto, você também pode usar esta classe nos elementos <a> ou <input>, apesar de alguns browser aplicarem um visual um pouco diferente.
-
When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.
+
Quando usando classes de botão em elementos <a> que funcionam como gatilhos in-page (igual aos conteúdos colapsáveis), invés de link para novas páginas ou seções dentro da página atual, estas âncoras devem receber role="button" para expliciar seu propósito a tecnologias assistivas, como leitores de telas.
In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.
+
Precisa de um botão, mas sem cor de backround? Substitua as classes modificadoras padrões pelas .btn-outline-* que removem todas as imagens de background e cores, em qualquer botão.
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. There’s no need to add a class to <button>s as they use a pseudo-class. However, you can still force the same active appearance with .active (and include the aria-pressed="true" attribute) should you need to replicate the state programmatically.
+
Os botões parecem pressionados (background, borda e sombra internas mais escuras), quando estão em estado ativo. Não há necessidade de usar a classe no <button>, porque eles usam uma pseudo-classe. No entanto, você ainda pode forçar a aparência de estado ativo com a classe .active e incuir o atributo aria-pressed="true", se precisar.
Disabled buttons using the <a> element behave a bit different:
+
Botões desativados usando o elemento <a> se comportam um pouco diferente:
-
<a>s don’t support the disabled attribute, so you must add the .disabled class to make it visually appear disabled.
-
Some future-friendly styles are included to disable all pointer-events on anchor buttons. In browsers which support that property, you won’t see the disabled cursor at all.
-
Disabled buttons should include the aria-disabled="true" attribute to indicate the state of the element to assistive technologies.
+
O elemento <a> não suport o atributo disabled, então, você deve usar a classe .disabled para fazê-lo parecer desativado, visualmente;
+
Alguns estilos (que ainda não são bem suportados) são usados para desativarem todos os pointer-events, em botões âncora;
+
+
Em browsers que suportam essa propriedade, você não verá o cursor desativado.
+
+
+
Botões desativados devem ter o atributo aria-disabled="true" para indicar o estado do elemento para tecnologias assistivas.
A class .disabled usa pointer-events: none para tentar desativar a funcionalidade de link do <a>, mas esta propriedade CSS ainda não foi padronizada. Além disso, até em navegadores que suportam pointer-events: none, a navegação por teclado continua inatingida, significando que tanto usuários com ou sem tecnologias assistivas ainda conseguirão ativar estes links. Portanto, para evitar isso, use o atributo tabindex="-1" (evita que tenham foco) nestes links e use seu próprio JavaScript para desativar as funcionalidades.
-
The .disabled class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a tabindex="-1" attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
-
Button plugin
+
Plugin de botão
-
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
+
Faça mais com botões. Controle estados ou crie grupos de botões, para mais componentes como toolbars.
-
Toggle states
+
Alternar estados
-
Add data-toggle="button" to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class andaria-pressed="true" to the <button>.
+
Use data-toggle="button" para alternar o estado ativo do botão. Se você pré-ativar o botão, deve usar a classe .activee o atributo aria-pressed="true", no <button>.
<buttontype="button"class="btn btn-primary"data-toggle="button"aria-pressed="false"autocomplete="off">
- Single toggle
+ Única alternância
</button>
-
Checkbox and radio buttons
+
Botões checkbox e radio
-
Bootstrap’s .button styles can be applied to other elements, such as <label>s, to provide checkbox or radio style button toggling. Add data-toggle="buttons" to a .btn-group containing those modified buttons to enable their toggling behavior via JavaScript and add .btn-group-toggle to style the <input>s within your buttons. Note that you can create single input-powered buttons or groups of them.
+
Os estilos do .button Bootstrap podem seren usado em outros elementos, como <label> para se ter um botão no estilo checkbox ou radio com alternância. Use data-toggle="buttons" em um .btn-group para estilizar o os inputs dentro de seus botões. Perceba que você pode criar botões com apenas um input ou grupos deles.
-
The checked state for these buttons is only updated via click event on the button. If you use another method to update the input—e.g., with <input type="reset"> or by manually applying the input’s checked property—you’ll need to toggle .active on the <label> manually.
+
O estado checado destes botões só é atualizado através do evento de clique, no botão. Se você usar outro método para atualizar o input (ex: <input type="reset"> ou aplicando a propriedade checked, manualmente), vai precisar anternar a classe .active da <label>, manualmente.
-
Note that pre-checked buttons require you to manually add the .active class to the input’s <label>.
+
Note que botões pré-checados requerem que você coloque a classe .active, manualmente, no input do <label>.
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
+
Os cards Bootstrap proporcionam um container de conteúdo flexível e extensível com múltiplos variantes e opções.
-
About
+
Sobre
-
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.
+
Um card é um container de conteúdo flexível e extensível. Ele tem opções para cabeçalhos e rodapés, uma larga variedade de conteúdo, cores de background contextuais e opções de display poderosas. Se você é familiarizado com Bootstrap 3, saiba que os cards substituem nossos antigos panels, wells e thumbnails. Uma funcionalidade similar a destes componentes está disponível, usando classes modificadoras para cards.
-
Example
+
Exemplo
-
Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no margin by default, so use spacing utilities as needed.
+
Cards são feitos com menos marcação HTML e estilos possível, mas ainda assim conseguem entregar bastante controle e personalização. Feitos com flexbox, oferecem fácil alinhamento e combinação com outros componentes. Por padrão, não possuem margin, então, use utilitários de espaçamento, se necessário.
-
Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various sizing options.
+
Abaixo, tem um exemplo de um card básico com conteúdo misto e largura fixa. Cards não possuem largura fixa, inicialmente, então, eles vão preencher toda a largura de seu elemento pai, naturalmente. Isso é fácilmente personalizado com nossas várias opções de tamanhos.
-
+
-
Card title
-
Some quick example text to build on the card title and make up the bulk of the card's content.
<divclass="card"style="width: 18rem;">
- <imgclass="card-img-top"src=".../100px180/"alt="Card image cap">
+ <imgclass="card-img-top"src=".../100px180/"alt="Imagem de capa do card"><divclass="card-body">
- <h5class="card-title">Card title</h5>
- <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
- <ahref="#"class="btn btn-primary">Go somewhere</a>
+ <h5class="card-title">Título do card</h5>
+ <pclass="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p>
+ <ahref="#"class="btn btn-primary">Visitar</a></div></div>
-
Content types
+
Tipos de conteúdo
-
Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.
+
Cards suportam uma larga variedade de conteúdos, incluindo imagens, texto, grupo de listas, links e muito mais. Abaixo, temos oquê é suportado.
Body
-
The building block of a card is the .card-body. Use it whenever you need a padded section within a card.
+
A base de um card é o .card-body. Use ele, sempre que precisar de um espaço dentro do card.
- This is some text within a card body.
+ Isto é um texto dentro de um card.
<divclass="card"><divclass="card-body">
- This is some text within a card body.
+ Isto é um texto dentro de um card.
</div></div>
-
Titles, text, and links
+
Títulos, textos e cards.
-
Card titles are used by adding .card-title to a <h*> tag. In the same way, links are added and placed next to each other by adding .card-link to an <a> tag.
+
Os títulos dos card são usados adicionando a classe .card-title em uma tag <h*>. Da mesma maneira, links são adicionados e posicionados próximos um dos outros, colocando .card-link em um elemento <a>.
-
Subtitles are used by adding a .card-subtitle to a <h*> tag. If the .card-title and the .card-subtitle items are placed in a .card-body item, the card title and subtitle are aligned nicely.
+
Subtitulos são criadas usando uma .card-subtitle em uma tag <h*>. Se os itens .card-title e .card-subtitle são colocados em um .card-body, os títulos e subtitulos serão alinhados, adequadamente.
-
Card title
-
Card subtitle
-
Some quick example text to build on the card title and make up the bulk of the card's content.
<divclass="card"style="width: 18rem;"><divclass="card-body">
- <h5class="card-title">Card title</h5>
- <h6class="card-subtitle mb-2 text-muted">Card subtitle</h6>
- <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
- <ahref="#"class="card-link">Card link</a>
- <ahref="#"class="card-link">Another link</a>
+ <h5class="card-title">Título do card</h5>
+ <h6class="card-subtitle mb-2 text-muted">Subtitulo do card</h6>
+ <pclass="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p>
+ <ahref="#"class="card-link">Link do card</a>
+ <ahref="#"class="card-link">Outro link</a></div></div>
-
Images
+
Imagens
-
.card-img-top places an image to the top of the card. With .card-text, text can be added to the card. Text within .card-text can also be styled with the standard HTML tags.
+
A .card-img-top posiciona uma imagem no topo do card. Com .card-text, textos podem ser adicionados ao card. O texto dentro do .card-text também pode ser estilizado com as tags HTML padrões.
-
+
-
Some quick example text to build on the card title and make up the bulk of the card's content.
+
Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.
<divclass="card"style="width: 18rem;">
- <imgclass="card-img-top"src=".../100px180/?text=Image cap"alt="Card image cap">
+ <imgclass="card-img-top"src=".../100px180/?text=Image cap"alt="Imagem de capa do card"><divclass="card-body">
- <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+ <pclass="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p></div></div>
-
List groups
+
Grupo e listas
-
Create lists of content in a card with a flush list group.
+
Crie listas de conteúdo em um card, usando um grupo de listas.
Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
+
Misture e combine vários tipos de conteúdos para ter o card que precisa. Mostrando abaixo, estão estilos de imagens, blocos, estilos de textos e grupo de listas, todos dentro de um card com largura fixa.
-
+
-
Card title
-
Some quick example text to build on the card title and make up the bulk of the card's content.
+
Título do card
+
Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.
<divclass="card"style="width: 18rem;">
- <imgclass="card-img-top"src=".../100px180/?text=Image cap"alt="Card image cap">
+ <imgclass="card-img-top"src=".../100px180/?text=Image cap"alt="Imagem de capa do card"><divclass="card-body">
- <h5class="card-title">Card title</h5>
- <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+ <h5class="card-title">Título do card</h5>
+ <pclass="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p></div><ulclass="list-group list-group-flush"><liclass="list-group-item">Cras justo odio</li>
@@ -609,80 +609,80 @@
Card title
<liclass="list-group-item">Vestibulum at eros</li></ul><divclass="card-body">
- <ahref="#"class="card-link">Card link</a>
- <ahref="#"class="card-link">Another link</a>
+ <ahref="#"class="card-link">Link do card</a>
+ <ahref="#"class="card-link">Outro link</a></div></div>
-
Header and footer
+
Cabeçalho e rodapé
-
Add an optional header and/or footer within a card.
+
Coloque um cabeçalho e/ou rodapé opcional, dentro de um card.
- Featured
+ Destaque
-
Special title treatment
-
With supporting text below as a natural lead-in to additional content.
<divclass="card"><divclass="card-header">
- Featured
+ Destaque
</div><divclass="card-body">
- <h5class="card-title">Special title treatment</h5>
- <pclass="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <ahref="#"class="btn btn-primary">Go somewhere</a>
+ <h5class="card-title">Título especial</h5>
+ <pclass="card-text">Com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.</p>
+ <ahref="#"class="btn btn-primary">Visitar</a></div></div>
-
Card headers can be styled by adding .card-header to <h*> elements.
+
Cabeçalhos de cards podem ser estilizados usando .card-header em elementos <h*>.
-
Featured
+
Destaque
-
Special title treatment
-
With supporting text below as a natural lead-in to additional content.
<divclass="card">
- <h5class="card-header">Featured</h5>
+ <h5class="card-header">Destaque</h5><divclass="card-body">
- <h5class="card-title">Special title treatment</h5>
- <pclass="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <ahref="#"class="btn btn-primary">Go somewhere</a>
+ <h5class="card-title">Título especial</h5>
+ <pclass="card-text">Com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.</p>
+ <ahref="#"class="btn btn-primary">Visitar</a></div></div>
- Quote
+ Citação
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
-
+
<divclass="card"><divclass="card-header">
- Quote
+ Citação
</div><divclass="card-body"><blockquoteclass="blockquote mb-0"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
- <footerclass="blockquote-footer">Someone famous in <citetitle="Source Title">Source Title</cite></footer>
+ <footerclass="blockquote-footer">Alguém famoso em <citetitle="Título da fonte">Título da fonte</cite></footer></blockquote></div></div>
@@ -690,57 +690,57 @@
Special title treatment
- Featured
+ Destaque
-
Special title treatment
-
With supporting text below as a natural lead-in to additional content.
<divclass="card text-center"><divclass="card-header">
- Featured
+ Destaque
</div><divclass="card-body">
- <h5class="card-title">Special title treatment</h5>
- <pclass="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <ahref="#"class="btn btn-primary">Go somewhere</a>
+ <h5class="card-title">Título especial</h5>
+ <pclass="card-text">Com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.</p>
+ <ahref="#"class="btn btn-primary">Visitar</a></div><divclass="card-footer text-muted">
- 2 days ago
+ 2 dias atrás
</div></div>
-
Sizing
+
Tamanhos
-
Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.
+
Os cards não recebem nenhuma largura inicial específica, então, eles vão ter 100% da largura do pai, se não for declarado. Você pode mudar isso, se necessário, usando CSS personalizado, classes grid, mixins grid Sass ou utilitários.
-
Using grid markup
+
Usando a marcação do grid
-
Using the grid, wrap cards in columns and rows as needed.
+
Usando o grid, envolva cards em colunas e rows, o quanto quiser.
-
Special title treatment
-
With supporting text below as a natural lead-in to additional content.
<divclass="col-sm-6"><divclass="card"><divclass="card-body">
- <h5class="card-title">Special title treatment</h5>
- <pclass="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <ahref="#"class="btn btn-primary">Go somewhere</a>
+ <h5class="card-title">Título especial</h5>
+ <pclass="card-text">Com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.</p>
+ <ahref="#"class="btn btn-primary">Visitar</a></div></div></div><divclass="col-sm-6"><divclass="card"><divclass="card-body">
- <h5class="card-title">Special title treatment</h5>
- <pclass="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <ahref="#"class="btn btn-primary">Go somewhere</a>
+ <h5class="card-title">Título especial</h5>
+ <pclass="card-text">Com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.</p>
+ <ahref="#"class="btn btn-primary">Visitar</a></div></div></div></div>
-
<divclass="card w-75"><divclass="card-body">
- <h5class="card-title">Card title</h5>
- <pclass="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <ahref="#"class="btn btn-primary">Button</a>
+ <h5class="card-title">Título do card</h5>
+ <pclass="card-text">Com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.</p>
+ <ahref="#"class="btn btn-primary">Botão</a></div></div><divclass="card w-50"><divclass="card-body">
- <h5class="card-title">Card title</h5>
- <pclass="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <ahref="#"class="btn btn-primary">Button</a>
+ <h5class="card-title">Título do card</h5>
+ <pclass="card-text">Com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.</p>
+ <ahref="#"class="btn btn-primary">Botão</a></div></div>
-
Using custom CSS
+
Usando CSS personalizado
-
Use custom CSS in your stylesheets or as inline styles to set a width.
+
Use CSS personalizado em suas folhas de estilos ou estilos inline para definir a largura.
-
Special title treatment
-
With supporting text below as a natural lead-in to additional content.
<divclass="card"style="width: 18rem;"><divclass="card-body">
- <h5class="card-title">Special title treatment</h5>
- <pclass="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <ahref="#"class="btn btn-primary">Go somewhere</a>
+ <h5class="card-title">Título especial</h5>
+ <pclass="card-text">Com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.</p>
+ <ahref="#"class="btn btn-primary">Visitar</a></div></div>
-
Text alignment
+
Alinhamento de texto
-
You can quickly change the text alignment of any card—in its entirety or specific parts—with our text align classes.
+
Você pode alterar o alinhamento de texto de qualquer card, rapidamente, em seu todo ou partes específicas, com nossas classes de alinhamento.
-
Special title treatment
-
With supporting text below as a natural lead-in to additional content.
<divclass="card"style="width: 18rem;"><divclass="card-body">
- <h5class="card-title">Special title treatment</h5>
- <pclass="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <ahref="#"class="btn btn-primary">Go somewhere</a>
+ <h5class="card-title">Título especial</h5>
+ <pclass="card-text">Com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.</p>
+ <ahref="#"class="btn btn-primary">Visitar</a></div></div><divclass="card text-center"style="width: 18rem;"><divclass="card-body">
- <h5class="card-title">Special title treatment</h5>
- <pclass="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <ahref="#"class="btn btn-primary">Go somewhere</a>
+ <h5class="card-title">Título especial</h5>
+ <pclass="card-text">Com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.</p>
+ <ahref="#"class="btn btn-primary">Visitar</a></div></div><divclass="card text-right"style="width: 18rem;"><divclass="card-body">
- <h5class="card-title">Special title treatment</h5>
- <pclass="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <ahref="#"class="btn btn-primary">Go somewhere</a>
+ <h5class="card-title">Título especial</h5>
+ <pclass="card-text">Com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.</p>
+ <ahref="#"class="btn btn-primary">Visitar</a></div></div>
-
Navigation
+
Navegação
-
Add some navigation to a card’s header (or block) with Bootstrap’s nav components.
+
Adicione alguma navegação no cabeçalho do card com os componentes nav do Bootstrap.
<divclass="card-header"><ulclass="nav nav-pills card-header-pills"><liclass="nav-item">
- <aclass="nav-link active"href="#">Active</a>
+ <aclass="nav-link active"href="#">Ativo</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item">
- <aclass="nav-link disabled"href="#">Disabled</a>
+ <aclass="nav-link disabled"href="#">Desativado</a></li></ul></div><divclass="card-body">
- <h5class="card-title">Special title treatment</h5>
- <pclass="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <ahref="#"class="btn btn-primary">Go somewhere</a>
+ <h5class="card-title">Título especial</h5>
+ <pclass="card-text">Com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.</p>
+ <ahref="#"class="btn btn-primary">Visitar</a></div></div>
-
Images
+
Imagens
-
Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.
+
Cards possuem algumas opções para trabalharmos com imagens. Escolha entre anexar “capas com imagens” no final do card, sobrepor ela com o conteúdo ou, simplesmente, embutir a imagem no card.
-
Image caps
+
Capas com imagens
-
Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.
+
Semelhante aos cabeçalhos e rodapés, cards podem ter capas com imagens na parte inferior ou superior.
-
+
-
Card title
-
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-
Last updated 3 mins ago
+
Título do card
+
Este é um card maior com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional. Este conteúdo é um pouco maior, para demonstração.
+
Atualizados 3 minutos atrás
-
Card title
-
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-
Last updated 3 mins ago
+
Título do card
+
Este é um card maior com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional. Este conteúdo é um pouco maior, para demonstração.
+
Atualizados 3 minutos atrás
-
+
<divclass="card mb-3">
- <imgclass="card-img-top"src=".../100px180/"alt="Card image cap">
+ <imgclass="card-img-top"src=".../100px180/"alt="Imagem de capa do card"><divclass="card-body">
- <h5class="card-title">Card title</h5>
- <pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
- <pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
+ <h5class="card-title">Título do card</h5>
+ <pclass="card-text">Este é um card maior com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional. Este conteúdo é um pouco maior, para demonstração.</p>
+ <pclass="card-text"><smallclass="text-muted">Atualizados 3 minutos atrás</small></p></div></div><divclass="card"><divclass="card-body">
- <h5class="card-title">Card title</h5>
- <pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
- <pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
+ <h5class="card-title">Título do card</h5>
+ <pclass="card-text">Este é um card maior com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional. Este conteúdo é um pouco maior, para demonstração.</p>
+ <pclass="card-text"><smallclass="text-muted">Atualizados 3 minutos atrás</small></p></div>
- <imgclass="card-img-bottom"src=".../100px180/"alt="Card image cap">
+ <imgclass="card-img-bottom"src=".../100px180/"alt="Imagem de capa do card"></div>
-
Image overlays
+
Sobreposição de imagens
-
Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.
+
Transforme uma imagem em background de card, sobrepondo o texto do seu card. Dependendo da imagem, você pode precisar de estilos ou utilitários adicionais.
-
+
-
Card title
-
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-
Last updated 3 mins ago
+
Título do card
+
Este é um card maior com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional. Este conteúdo é um pouco maior, para demonstração.
+
Atualizados 3 minutos atrás
<divclass="card bg-dark text-white">
- <imgclass="card-img"src=".../100px270/#55595c:#373a3c/text:Card image"alt="Card image">
+ <imgclass="card-img"src=".../100px270/#55595c:#373a3c/text:Card image"alt="Imagem do card"><divclass="card-img-overlay">
- <h5class="card-title">Card title</h5>
- <pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
- <pclass="card-text">Last updated 3 mins ago</p>
+ <h5class="card-title">Título do card</h5>
+ <pclass="card-text">Este é um card maior com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional. Este conteúdo é um pouco maior, para demonstração.</p>
+ <pclass="card-text">Atualizados 3 minutos atrás</p></div></div>
-
Card styles
+
Estilos de card
-
Cards include various options for customizing their backgrounds, borders, and color.
+
Cards possuem várias opções para customizar seus backgrounds, bordas e cores.
Some quick example text to build on the card title and make up the bulk of the card's content.
+
Título de Card Primary
+
Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.
-
Header
+
Cabeçalho
-
Secondary card title
-
Some quick example text to build on the card title and make up the bulk of the card's content.
+
Título de Card Secondary
+
Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.
-
Header
+
Cabeçalho
-
Success card title
-
Some quick example text to build on the card title and make up the bulk of the card's content.
+
Título de Card Success
+
Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.
-
Header
+
Cabeçalho
-
Danger card title
-
Some quick example text to build on the card title and make up the bulk of the card's content.
+
Título de Card Danger
+
Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.
-
Header
+
Cabeçalho
-
Warning card title
-
Some quick example text to build on the card title and make up the bulk of the card's content.
+
Título de Card Warning
+
Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.
-
Header
+
Cabeçalho
-
Info card title
-
Some quick example text to build on the card title and make up the bulk of the card's content.
+
Título de Card Info
+
Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.
-
Header
+
Cabeçalho
-
Light card title
-
Some quick example text to build on the card title and make up the bulk of the card's content.
+
Título de Card Light
+
Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.
-
Header
+
Cabeçalho
-
Dark card title
-
Some quick example text to build on the card title and make up the bulk of the card's content.
+
Título de Card Dark
+
Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.
<divclass="card text-white bg-primary mb-3"style="max-width: 18rem;">
- <divclass="card-header">Header</div>
+ <divclass="card-header">Cabeçalho</div><divclass="card-body">
- <h5class="card-title">Primary card title</h5>
- <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+ <h5class="card-title">Título de Card Primary</h5>
+ <pclass="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p></div></div><divclass="card text-white bg-secondary mb-3"style="max-width: 18rem;">
- <divclass="card-header">Header</div>
+ <divclass="card-header">Cabeçalho</div><divclass="card-body">
- <h5class="card-title">Secondary card title</h5>
- <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+ <h5class="card-title">Título de Card Secondary</h5>
+ <pclass="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p></div></div><divclass="card text-white bg-success mb-3"style="max-width: 18rem;">
- <divclass="card-header">Header</div>
+ <divclass="card-header">Cabeçalho</div><divclass="card-body">
- <h5class="card-title">Success card title</h5>
- <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+ <h5class="card-title">Título de Card Success</h5>
+ <pclass="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p></div></div><divclass="card text-white bg-danger mb-3"style="max-width: 18rem;">
- <divclass="card-header">Header</div>
+ <divclass="card-header">Cabeçalho</div><divclass="card-body">
- <h5class="card-title">Danger card title</h5>
- <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+ <h5class="card-title">Título de Card Danger</h5>
+ <pclass="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p></div></div><divclass="card text-white bg-warning mb-3"style="max-width: 18rem;">
- <divclass="card-header">Header</div>
+ <divclass="card-header">Cabeçalho</div><divclass="card-body">
- <h5class="card-title">Warning card title</h5>
- <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+ <h5class="card-title">Título de Card Warning</h5>
+ <pclass="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p></div></div><divclass="card text-white bg-info mb-3"style="max-width: 18rem;">
- <divclass="card-header">Header</div>
+ <divclass="card-header">Cabeçalho</div><divclass="card-body">
- <h5class="card-title">Info card title</h5>
- <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+ <h5class="card-title">Título de Card Info</h5>
+ <pclass="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p></div></div><divclass="card bg-light mb-3"style="max-width: 18rem;">
- <divclass="card-header">Header</div>
+ <divclass="card-header">Cabeçalho</div><divclass="card-body">
- <h5class="card-title">Light card title</h5>
- <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+ <h5class="card-title">Título de Card Light</h5>
+ <pclass="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p></div></div><divclass="card text-white bg-dark mb-3"style="max-width: 18rem;">
- <divclass="card-header">Header</div>
+ <divclass="card-header">Cabeçalho</div><divclass="card-body">
- <h5class="card-title">Dark card title</h5>
- <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+ <h5class="card-title">Título de Card Dark</h5>
+ <pclass="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p></div></div>
-
Conveying meaning to assistive technologies
+
Transmitindo significado a tecnologias assistivas
-
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.
+
Usando cor para adicionar significado só fornece uma indicação visual, a qual não será transmitida para usuários de tecnologias assistivas (como leitores de telas). Se assegure que a informação denotada pela cor é tanto destacada do conteúdo (ex: o texto visível) ou está incluída em meios alternativos, como textos extras escondidos com a classe .sr-class.
-
Border
+
Bordas
-
Use border utilities to change just the border-color of a card. Note that you can put .text-{color} classes on the parent .card or a subset of the card’s contents as shown below.
+
Use utilitários de bordas para mudar só a cor das bordas de um card. Perceba que você pode usar as classes .text-{color} no .card pai ou um subconjunto de cards, como mostrado abaixo.
-
Header
+
Cabeçalho
-
Primary card title
-
Some quick example text to build on the card title and make up the bulk of the card's content.
+
Título de Card Primary
+
Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.
-
Header
+
Cabeçalho
-
Secondary card title
-
Some quick example text to build on the card title and make up the bulk of the card's content.
+
Título de Card Secondary
+
Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.
-
Header
+
Cabeçalho
-
Success card title
-
Some quick example text to build on the card title and make up the bulk of the card's content.
+
Título de Card Success
+
Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.
-
Header
+
Cabeçalho
-
Danger card title
-
Some quick example text to build on the card title and make up the bulk of the card's content.
+
Título de Card Danger
+
Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.
-
Header
+
Cabeçalho
-
Warning card title
-
Some quick example text to build on the card title and make up the bulk of the card's content.
+
Título de Card Warning
+
Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.
-
Header
+
Cabeçalho
-
Info card title
-
Some quick example text to build on the card title and make up the bulk of the card's content.
+
Título de Card Info
+
Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.
-
Header
+
Cabeçalho
-
Light card title
-
Some quick example text to build on the card title and make up the bulk of the card's content.
+
Título de Card Light
+
Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.
-
Header
+
Cabeçalho
-
Dark card title
-
Some quick example text to build on the card title and make up the bulk of the card's content.
+
Título de Card Dark
+
Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.
<divclass="card border-primary mb-3"style="max-width: 18rem;">
- <divclass="card-header">Header</div>
+ <divclass="card-header">Cabeçalho</div><divclass="card-body text-primary">
- <h5class="card-title">Primary card title</h5>
- <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+ <h5class="card-title">Título de Card Primary</h5>
+ <pclass="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p></div></div><divclass="card border-secondary mb-3"style="max-width: 18rem;">
- <divclass="card-header">Header</div>
+ <divclass="card-header">Cabeçalho</div><divclass="card-body text-secondary">
- <h5class="card-title">Secondary card title</h5>
- <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+ <h5class="card-title">Título de Card Secondary</h5>
+ <pclass="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p></div></div><divclass="card border-success mb-3"style="max-width: 18rem;">
- <divclass="card-header">Header</div>
+ <divclass="card-header">Cabeçalho</div><divclass="card-body text-success">
- <h5class="card-title">Success card title</h5>
- <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+ <h5class="card-title">Título de Card Success</h5>
+ <pclass="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p></div></div><divclass="card border-danger mb-3"style="max-width: 18rem;">
- <divclass="card-header">Header</div>
+ <divclass="card-header">Cabeçalho</div><divclass="card-body text-danger">
- <h5class="card-title">Danger card title</h5>
- <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+ <h5class="card-title">Título de Card Danger</h5>
+ <pclass="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p></div></div><divclass="card border-warning mb-3"style="max-width: 18rem;">
- <divclass="card-header">Header</div>
+ <divclass="card-header">Cabeçalho</div><divclass="card-body text-warning">
- <h5class="card-title">Warning card title</h5>
- <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+ <h5class="card-title">Título de Card Warning</h5>
+ <pclass="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p></div></div><divclass="card border-info mb-3"style="max-width: 18rem;">
- <divclass="card-header">Header</div>
+ <divclass="card-header">Cabeçalho</div><divclass="card-body text-info">
- <h5class="card-title">Info card title</h5>
- <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+ <h5class="card-title">Título de Card Info</h5>
+ <pclass="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p></div></div><divclass="card border-light mb-3"style="max-width: 18rem;">
- <divclass="card-header">Header</div>
+ <divclass="card-header">Cabeçalho</div><divclass="card-body">
- <h5class="card-title">Light card title</h5>
- <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+ <h5class="card-title">Título de Card Light</h5>
+ <pclass="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p></div></div><divclass="card border-dark mb-3"style="max-width: 18rem;">
- <divclass="card-header">Header</div>
+ <divclass="card-header">Cabeçalho</div><divclass="card-body text-dark">
- <h5class="card-title">Dark card title</h5>
- <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+ <h5class="card-title">Título de Card Dark</h5>
+ <pclass="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p></div></div>
-
Mixins utilities
+
Utilitários mixins
-
You can also change the borders on the card header and footer as needed, and even remove their background-color with .bg-transparent.
+
Você também pode mudar as bordas no cabeçalho e rodapé do card, como quiser. Ainda pior: pode remover suas background-color com .bg-transparent.
-
Header
+
Cabeçalho
-
Success card title
-
Some quick example text to build on the card title and make up the bulk of the card's content.
+
Título de Card Success
+
Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.
-
+
<divclass="card border-success mb-3"style="max-width: 18rem;">
- <divclass="card-header bg-transparent border-success">Header</div>
+ <divclass="card-header bg-transparent border-success">Cabeçalho</div><divclass="card-body text-success">
- <h5class="card-title">Success card title</h5>
- <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+ <h5class="card-title">Título de Card Success</h5>
+ <pclass="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p></div>
- <divclass="card-footer bg-transparent border-success">Footer</div>
+ <divclass="card-footer bg-transparent border-success">Rodapé</div></div>
-
Card layout
+
Layout do card
-
In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive.
+
Além da estilização do conteúdo dentro dos cards, Bootstrap possui algumas opções para a criação de vários cards. No momento, estas opções de layout ainda não são responsivas.
-
Card groups
+
Grupo de cards
-
Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing.
+
Use grupo de cards para renderizá-los como um único elemento anexado com largura e altura igual. Grupo de cards usam display: flex; para conseguir seus tamanhos adequados.
-
+
-
Card title
-
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-
Last updated 3 mins ago
+
Título do card
+
Este é um card maior com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional. Este conteúdo é um pouco maior, para demonstração.
+
Atualizados 3 minutos atrás
-
+
-
Card title
-
This card has supporting text below as a natural lead-in to additional content.
-
Last updated 3 mins ago
+
Título do card
+
Este é um card com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.
+
Atualizados 3 minutos atrás
-
+
-
Card title
-
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
-
Last updated 3 mins ago
+
Título do card
+
Este é um card maior com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional. Este card tem o conteúdo ainda maior que o primeiro, para mostrar a altura igual, em ação.
+
Atualizados 3 minutos atrás
<divclass="card-group"><divclass="card">
- <imgclass="card-img-top"src=".../100px180/"alt="Card image cap">
+ <imgclass="card-img-top"src=".../100px180/"alt="Imagem de capa do card"><divclass="card-body">
- <h5class="card-title">Card title</h5>
- <pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
- <pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
+ <h5class="card-title">Título do card</h5>
+ <pclass="card-text">Este é um card maior com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional. Este conteúdo é um pouco maior, para demonstração.</p>
+ <pclass="card-text"><smallclass="text-muted">Atualizados 3 minutos atrás</small></p></div></div><divclass="card">
- <imgclass="card-img-top"src=".../100px180/"alt="Card image cap">
+ <imgclass="card-img-top"src=".../100px180/"alt="Imagem de capa do card"><divclass="card-body">
- <h5class="card-title">Card title</h5>
- <pclass="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
- <pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
+ <h5class="card-title">Título do card</h5>
+ <pclass="card-text">Este é um card com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.</p>
+ <pclass="card-text"><smallclass="text-muted">Atualizados 3 minutos atrás</small></p></div></div><divclass="card">
- <imgclass="card-img-top"src=".../100px180/"alt="Card image cap">
+ <imgclass="card-img-top"src=".../100px180/"alt="Imagem de capa do card"><divclass="card-body">
- <h5class="card-title">Card title</h5>
- <pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
- <pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
+ <h5class="card-title">Título do card</h5>
+ <pclass="card-text">Este é um card maior com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional. Este card tem o conteúdo ainda maior que o primeiro, para mostrar a altura igual, em ação.</p>
+ <pclass="card-text"><smallclass="text-muted">Atualizados 3 minutos atrás</small></p></div></div></div>
-
When using card groups with footers, their content will automatically line up.
+
Quando usar grupo de cards com rodapé, seus conteúdos vão se alinhar automaticamente.
-
+
-
Card title
-
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
Título do card
+
Este é um card maior com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional. Este conteúdo é um pouco maior, para demonstração.
-
+
-
Card title
-
This card has supporting text below as a natural lead-in to additional content.
+
Título do card
+
Este é um card com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.
-
+
-
Card title
-
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
Título do card
+
Este é um card maior com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional. Este card tem o conteúdo ainda maior que o primeiro, para mostrar a altura igual, em ação.
<divclass="card-group"><divclass="card">
- <imgclass="card-img-top"src=".../100px180/"alt="Card image cap">
+ <imgclass="card-img-top"src=".../100px180/"alt="Imagem de capa do card"><divclass="card-body">
- <h5class="card-title">Card title</h5>
- <pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ <h5class="card-title">Título do card</h5>
+ <pclass="card-text">Este é um card maior com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional. Este conteúdo é um pouco maior, para demonstração.</p></div><divclass="card-footer">
- <smallclass="text-muted">Last updated 3 mins ago</small>
+ <smallclass="text-muted">Atualizados 3 minutos atrás</small></div></div><divclass="card">
- <imgclass="card-img-top"src=".../100px180/"alt="Card image cap">
+ <imgclass="card-img-top"src=".../100px180/"alt="Imagem de capa do card"><divclass="card-body">
- <h5class="card-title">Card title</h5>
- <pclass="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+ <h5class="card-title">Título do card</h5>
+ <pclass="card-text">Este é um card com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.</p></div><divclass="card-footer">
- <smallclass="text-muted">Last updated 3 mins ago</small>
+ <smallclass="text-muted">Atualizados 3 minutos atrás</small></div></div><divclass="card">
- <imgclass="card-img-top"src=".../100px180/"alt="Card image cap">
+ <imgclass="card-img-top"src=".../100px180/"alt="Imagem de capa do card"><divclass="card-body">
- <h5class="card-title">Card title</h5>
- <pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
+ <h5class="card-title">Título do card</h5>
+ <pclass="card-text">Este é um card maior com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional. Este card tem o conteúdo ainda maior que o primeiro, para mostrar a altura igual, em ação.</p></div><divclass="card-footer">
- <smallclass="text-muted">Last updated 3 mins ago</small>
+ <smallclass="text-muted">Atualizados 3 minutos atrás</small></div></div></div>
Card decks
-
Need a set of equal width and height cards that aren’t attached to one another? Use card decks.
+
Precisa de um conjunto de cards com larguras e alturas iguais, mas sem que estejam interligados? Use os card decks.
-
+
-
Card title
-
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-
Last updated 3 mins ago
+
Título do card
+
Este é um card mais longo com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional. Este conteúdo é um pouco maior.
+
Atualizados 3 minutos atrás
-
+
-
Card title
-
This card has supporting text below as a natural lead-in to additional content.
-
Last updated 3 mins ago
+
Título do card
+
Este é um card com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.
+
Atualizados 3 minutos atrás
-
+
-
Card title
-
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
-
Last updated 3 mins ago
+
Título do card
+
Este é um card maior com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional. Este card tem o conteúdo ainda maior que o primeiro, para mostrar a altura igual, em ação.
+
Atualizados 3 minutos atrás
<divclass="card-deck"><divclass="card">
- <imgclass="card-img-top"src=".../100px200/"alt="Card image cap">
+ <imgclass="card-img-top"src=".../100px200/"alt="Imagem de capa do card"><divclass="card-body">
- <h5class="card-title">Card title</h5>
- <pclass="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
- <pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
+ <h5class="card-title">Título do card</h5>
+ <pclass="card-text">Este é um card mais longo com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional. Este conteúdo é um pouco maior.</p>
+ <pclass="card-text"><smallclass="text-muted">Atualizados 3 minutos atrás</small></p></div></div><divclass="card">
- <imgclass="card-img-top"src=".../100px200/"alt="Card image cap">
+ <imgclass="card-img-top"src=".../100px200/"alt="Imagem de capa do card"><divclass="card-body">
- <h5class="card-title">Card title</h5>
- <pclass="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
- <pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
+ <h5class="card-title">Título do card</h5>
+ <pclass="card-text">Este é um card com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.</p>
+ <pclass="card-text"><smallclass="text-muted">Atualizados 3 minutos atrás</small></p></div></div><divclass="card">
- <imgclass="card-img-top"src=".../100px200/"alt="Card image cap">
+ <imgclass="card-img-top"src=".../100px200/"alt="Imagem de capa do card"><divclass="card-body">
- <h5class="card-title">Card title</h5>
- <pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
- <pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
+ <h5class="card-title">Título do card</h5>
+ <pclass="card-text">Este é um card maior com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional. Este card tem o conteúdo ainda maior que o primeiro, para mostrar a altura igual, em ação.</p>
+ <pclass="card-text"><smallclass="text-muted">Atualizados 3 minutos atrás</small></p></div></div></div>
-
Just like with card groups, card footers in decks will automatically line up.
+
Assim como os grupos de cards, rodapés de cards nos decks vão se alinhar, automaticamente.
-
+
-
Card title
-
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
Título do card
+
Este é um card maior com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional. Este conteúdo é um pouco maior, para demonstração.
-
+
-
Card title
-
This card has supporting text below as a natural lead-in to additional content.
+
Título do card
+
Este é um card com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.
-
+
-
Card title
-
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
Título do card
+
Este é um card maior com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional. Este card tem o conteúdo ainda maior que o primeiro, para mostrar a altura igual, em ação.
<divclass="card-deck"><divclass="card">
- <imgclass="card-img-top"src=".../100px180/"alt="Card image cap">
+ <imgclass="card-img-top"src=".../100px180/"alt="Imagem de capa do card"><divclass="card-body">
- <h5class="card-title">Card title</h5>
- <pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ <h5class="card-title">Título do card</h5>
+ <pclass="card-text">Este é um card maior com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional. Este conteúdo é um pouco maior, para demonstração.</p></div><divclass="card-footer">
- <smallclass="text-muted">Last updated 3 mins ago</small>
+ <smallclass="text-muted">Atualizados 3 minutos atrás</small></div></div><divclass="card">
- <imgclass="card-img-top"src=".../100px180/"alt="Card image cap">
+ <imgclass="card-img-top"src=".../100px180/"alt="Imagem de capa do card"><divclass="card-body">
- <h5class="card-title">Card title</h5>
- <pclass="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+ <h5class="card-title">Título do card</h5>
+ <pclass="card-text">Este é um card com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.</p></div><divclass="card-footer">
- <smallclass="text-muted">Last updated 3 mins ago</small>
+ <smallclass="text-muted">Atualizados 3 minutos atrás</small></div></div><divclass="card">
- <imgclass="card-img-top"src=".../100px180/"alt="Card image cap">
+ <imgclass="card-img-top"src=".../100px180/"alt="Imagem de capa do card"><divclass="card-body">
- <h5class="card-title">Card title</h5>
- <pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
+ <h5class="card-title">Título do card</h5>
+ <pclass="card-text">Este é um card maior com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional. Este card tem o conteúdo ainda maior que o primeiro, para mostrar a altura igual, em ação.</p></div><divclass="card-footer">
- <smallclass="text-muted">Last updated 3 mins ago</small>
+ <smallclass="text-muted">Atualizados 3 minutos atrás</small></div></div></div>
-
Card columns
+
Colunas de cards
-
Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.
+
Cards podem ser organizados de uma maneira parecida com as colunas Masonry, apenas com CSS e envoltos em uma .card-column. Eles são feitos com propriedades CSS column, invés de flexbox, para fácil alinhamento. Além do mais, são orientados de cima para baixo, da esquerda para direita.
-
Heads up! Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to display: inline-block as column-break-inside: avoid isn’t a bulletproof solution yet.
+
Atenção! Sua experiência com colunas de cards pode variar. Para evitar cards bugando nas colunas, devemos defini-los como display: inline-block, já que column-break-inside: avoid ainda não é uma solução infalível.
-
+
-
Card title that wraps to a new line
-
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
Título do card que quebra em uma nova linha
+
Este é um card mais longo com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional. Este conteúdo é um pouco maior.
@@ -1587,17 +1587,17 @@
Card title that wraps to a new line
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
-
+
-
Card title
-
This card has supporting text below as a natural lead-in to additional content.
-
Last updated 3 mins ago
+
Título do card
+
Este é um card com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.
+
Atualizados 3 minutos atrás
@@ -1605,46 +1605,46 @@
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
-
Card title
-
This card has supporting text below as a natural lead-in to additional content.
-
Last updated 3 mins ago
+
Título do card
+
Este é um card com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.
+
Atualizados 3 minutos atrás
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
-
Card title
-
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
-
Last updated 3 mins ago
+
Título do card
+
Este é um card maior com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional. Este card tem o conteúdo ainda maior que o primeiro, para mostrar a altura igual, em ação.
+
Atualizados 3 minutos atrás
<divclass="card-columns"><divclass="card">
- <imgclass="card-img-top"src=".../100px160/"alt="Card image cap">
+ <imgclass="card-img-top"src=".../100px160/"alt="Imagem de capa do card"><divclass="card-body">
- <h5class="card-title">Card title that wraps to a new line</h5>
- <pclass="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ <h5class="card-title">Título do card que quebra em uma nova linha</h5>
+ <pclass="card-text">Este é um card mais longo com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional. Este conteúdo é um pouco maior.</p></div></div><divclass="card p-3">
@@ -1652,17 +1652,17 @@
Card title
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footerclass="blockquote-footer"><smallclass="text-muted">
- Someone famous in <citetitle="Source Title">Source Title</cite>
+ Alguém famoso em <citetitle="Título da fonte">Título da fonte</cite></small></footer></blockquote></div><divclass="card">
- <imgclass="card-img-top"src=".../100px160/"alt="Card image cap">
+ <imgclass="card-img-top"src=".../100px160/"alt="Imagem de capa do card"><divclass="card-body">
- <h5class="card-title">Card title</h5>
- <pclass="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
- <pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
+ <h5class="card-title">Título do card</h5>
+ <pclass="card-text">Este é um card com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.</p>
+ <pclass="card-text"><smallclass="text-muted">Atualizados 3 minutos atrás</small></p></div></div><divclass="card bg-primary text-white text-center p-3">
@@ -1670,41 +1670,41 @@
Card title
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p><footerclass="blockquote-footer"><small>
- Someone famous in <citetitle="Source Title">Source Title</cite>
+ Alguém famoso em <citetitle="Título da fonte">Título da fonte</cite></small></footer></blockquote></div><divclass="card text-center"><divclass="card-body">
- <h5class="card-title">Card title</h5>
- <pclass="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
- <pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
+ <h5class="card-title">Título do card</h5>
+ <pclass="card-text">Este é um card com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.</p>
+ <pclass="card-text"><smallclass="text-muted">Atualizados 3 minutos atrás</small></p></div></div><divclass="card">
- <imgclass="card-img"src=".../100px260/"alt="Card image">
+ <imgclass="card-img"src=".../100px260/"alt="Imagem do card"></div><divclass="card p-3 text-right"><blockquoteclass="blockquote mb-0"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footerclass="blockquote-footer"><smallclass="text-muted">
- Someone famous in <citetitle="Source Title">Source Title</cite>
+ Alguém famoso em <citetitle="Título da fonte">Título da fonte</cite></small></footer></blockquote></div><divclass="card"><divclass="card-body">
- <h5class="card-title">Card title</h5>
- <pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
- <pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
+ <h5class="card-title">Título do card</h5>
+ <pclass="card-text">Este é um card maior com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional. Este card tem o conteúdo ainda maior que o primeiro, para mostrar a altura igual, em ação.</p>
+ <pclass="card-text"><smallclass="text-muted">Atualizados 3 minutos atrás</small></p></div></div></div>
-
Card columns can also be extended and customized with some additional code. Shown below is an extension of the .card-columns class using the same CSS we use—CSS columns— to generate a set of responsive tiers for changing the number of columns.
+
Colunas de cards também podem ser extendidas e customizadas com algum código personalizado. Abaixo, vemos uma extensão da classe .card-columns usando o mesmo CSS que usamos para gerar uma graduação responsiva de alteração do número de colunas.
A slideshow component for cycling through elements—images or slides of text—like a carousel.
+
Um componente de slideshow para fazer um giro através de elementos (imagens ou slides de texto), como se fosse um carrosel.
-
How it works
+
Como funciona
-
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
+
O carousel é um slideshow para fazer um giro em vários coteúdos, construído com CSS 3D transforms e um pouco de JavaScript. Ele funciona com o uso de imagens, texto ou marcação personalizada. Também possui suporte para controles anterior, próximo e indicadores.
-
In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).
+
Nos navegadores onde a API Page Visibility é suportada, o carousel vai evitar deslizar quando a página não está visível para o usuário (como quando o browser está inativo, janela minimizada, etc).
-
Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.
+
Por favor, esteja atento que carousels aninhados não são suportados e não são, geralmente, amigáveis aos padrões de acessibilidades.
-
Lastly, if you’re building our JavaScript from source, it requires util.js.
+
Por último, se você está construindo nosso JavaScript a partir da fonte, vai precisar do util.js.
-
Example
+
Exemplo
-
Carousels don’t automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they’re not explicitly required. Add and customize as you see fit.
+
Carousels não normalizam dimensões, automaticamente. Assim, você pode precisar usar utilitários adicionais ou estilos personalizados para dimensionar conteúdos, apropriadamente. Apesar de carousels suportarem controles anterior, próximo e indicadores, eles não são obrigatórios, necessariamente. Use e abuse, como quiser.
-
The .active class needs to be added to one of the slides otherwise the carousel will not be visible. Also be sure to set a unique id on the .carousel for optional controls, especially if you’re using multiple carousels on a single page. Control and indicator elements must have a data-target attribute (or href for links) that matches the id of the .carousel element.
+
A classe .active precisa ser usada em um dos slides, caso contrário, o carousel não ficará visível. Também, se assegure de definir um único ID no .carousel para os controles opcionais, especialmente, se você está usando múltiplos carousels em uma página. Elementos de controle e indicador devem ter um atributo data-target (ou links href) que combinam com o ID do elemento .carousel.
-
Slides only
+
Só slides
-
Here’s a carousel with slides only. Note the presence of the .d-block and .w-100 on carousel images to prevent browser default image alignment.
+
Aqui está um carousel só com slides. Perceba a presença do .d-block e .w-100 nas imagens do carousel para evitar alinhamento padrão de imagens do navegador.
Add captions to your slides easily with the .carousel-caption element within any .carousel-item. They can be easily hidden on smaller viewports, as shown below, with optional display utilities. We hide them initially with .d-none and bring them back on medium-sized devices with .d-md-block.
+
Adicione legendas nos seus slides, facilmente, usando o elemento .carousel-caption dentro de qualquer .carousel-item. Eles podem ser escondidos, facilmente, em qualquer viewport menor, como mostrado é mostrado abaixo, usando utilitários display. Escondemos eles, inicialmente, com .d-none e trazemos de volta em dispositivos de tamanho mediano, usando .d-md-block.
@@ -595,34 +595,34 @@
With captions
-
+
-
First slide label
+
Título do primeiro slide
Nulla vitae elit libero, a pharetra augue mollis interdum.
-
+
-
Second slide label
+
Título do segundo slide
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
+
-
Third slide label
+
Título do terceiro slide
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
Use data attributes to easily control the position of the carousel. data-slide accepts the keywords prev or next, which alters the slide position relative to its current position. Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", which shifts the slide position to a particular index beginning with 0.
+
Use atributos data para, facilmente, controlar a posição do carousel. O data-slide aceita as palavras-chaves prev ou next, as quais alteram a posição do slide, de acordo com sua atual posição. Opcionalmente, use data-slide-to para passar um index ao carousel, o qual muda a posição do slide para o index específico, com valores começando em 0 (ex: data-slide-to="2").
-
The data-ride="carousel" attribute is used to mark a carousel as animating starting at page load. It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.
+
O atributo data-ride="carousel" é usado para declarar que o carousel vai começar a animação assim que a página carregar. Este atributo não pode ser usado em combinação com uma (redundante e desnecessária) inicialização JavaScript explícita, do mesmo carousel.
Via JavaScript
-
Call carousel manually with:
+
Invoque o carousel, manualmente, usando:
$('.carousel').carousel()
-
Options
+
Opções
-
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-interval="".
+
Opções podem ser passadas via atributos data ou JavaScript. Para atributos data, anexe o nome da opção no prefixo data-, como acontece em data-interval="".
-
Name
-
Type
-
Default
-
Description
+
Nome
+
Tipo
+
Padrão
+
Descrição
@@ -716,49 +716,49 @@
Options
interval
number
5000
-
The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
+
A quantidade de tempo de espera entre a troca de slides. Se o valor é false, o carousel não vai girar, automaticamente.
keyboard
-
boolean
+
booleano
true
-
Whether the carousel should react to keyboard events.
+
Diz se o carousel deve reagir aos eventos de teclado.
pause
-
string | boolean
+
string | booleano
"hover"
-
If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it.
-
On touch-enabled devices, when set to "hover", cycling will pause on touchend (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.
+
Se tiver definido como "hover", pausa o ciclo do carousel no evento mouseenter e volta o ciclo no mouseleave. Se definido para false, passar o mouse sobre o carousel não irá pausá-lo.
+
Em dispositivos com touch, quando tiver definido o valor "hover", o ciclo vai pausar no evento touchend (uma vez que o usuário parar de interagir com o carousel) por dois intervalos, antes de voltar sozinho, novamente. Perceba que isso acontece devido ao comportamento de mouse, mencionado acima.
ride
string
false
-
Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.
+
Auto inicia o carousel, depois do usuário clicar no primeiro item, manualmente. Se definido com o valor "carousel", o carousel começa assim que carrega.
wrap
boolean
true
-
Whether the carousel should cycle continuously or have hard stops.
+
Diz se o carousel deve girar continuamente ou ter paradas bruscas.
-
Methods
+
Métodos
-
Asynchronous methods and transitions
+
Métodos é transições assíncronas
-
All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.
+
Todos métodos API são assíncronos e iniciam a transição. Eles retornam ao invocador, assim que a transição é iniciada, mas que ela finalize. Além do mais, uma chamada de método em um componente transicionando é ignorada.
Cycles through the carousel items from left to right.
+
Gira pelos itens do carousel, da esquerda para direita.
.carousel('pause')
-
Stops the carousel from cycling through items.
+
Impede o carousel de girar pelos itens.
-
.carousel(number)
+
.carousel(Número)
-
Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (i.e. before the slid.bs.carousel event occurs).
+
Gira o carousel para um frame particular (começa em 0, como uma array). Retorna ao invocador, antes do item alvo ser mostrado (antes do evento slid.bs.carousel ocorrer).
.carousel('prev')
-
Cycles to the previous item. Returns to the caller before the previous item has been shown (i.e. before the slid.bs.carousel event occurs).
+
Gira para o item anterior. Retorna ao invocador, antes do item anterior ser mostrado (antes do evento slid.bs.carousel ocorrer).
.carousel('next')
-
Cycles to the next item. Returns to the caller before the next item has been shown (i.e. before the slid.bs.carousel event occurs).
+
Gira para o próximo item. Retorna ao invocador, antes do próximo item ser mostrado (antes do evento slid.bs.carousel ocorrer).
.carousel('dispose')
-
Destroys an element’s carousel.
+
Destroi um elemento do carousel.
-
Events
+
Eventos
-
Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:
+
A classe carousel do Bootstrap tem dois evento para serem ligados a funcionalidade do carousel. Ambos eventos possuem as seguintes propriedades adicionais:
-
direction: The direction in which the carousel is sliding (either "left" or "right").
-
relatedTarget: The DOM element that is being slid into place as the active item.
-
from: The index of the current item
-
to: The index of the next item
+
direction: a direção na qual o carousel está deslizando (tanto "left" quanto "right");
+
relatedTarget: o elemento DOM que está sendo deslizado para o lugar do item ativo;
+
from: o index do atual item;
+
to: o index do próximo item.
-
All carousel events are fired at the carousel itself (i.e. at the <div class="carousel">).
+
Todos eventos carousel são acionados no próprio carousel (acionados no elemento <div class="carousel">).
-
Event Type
-
Description
+
Tipo de evento
+
Descrição
slide.bs.carousel
-
This event fires immediately when the slide instance method is invoked.
+
Este evento aciona, imediatamente, quando o método slide é invocado.
slid.bs.carousel
-
This event is fired when the carousel has completed its slide transition.
+
Este evento é acionado quando o carousel acabou de finalizar sua transição.
$('#myCarousel').on('slide.bs.carousel',function(){
- // do something…
+ // Faça algo...})
-
Change transition duration
+
Mude a duração da transição
-
The transition duration of .carousel-item can be changed with the $carousel-transition Sass variable before compiling or custom styles if you’re using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. transition: transform 2s ease, opacity .5s ease-out).
+
A duração da transição do .carousel-item pode ser alterada na variável Sass $carousel-transition, antes de compilar ou em estilos personalizados (se você está usando CSS compilado). Se várias transições são aplicadas, se assegure da transição transform ser declarada primeiro (ex: transition: transform 2s ease, opacity .5s ease-out).
Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
+
Alterne a visibilidade do conteúdo de seu projeto com algumas classes e nossos plugins JavaScript.
-
How it works
+
Como funciona
-
The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from it’s current value to 0. Given how CSS handles animations, you cannot use padding on a .collapse element. Instead, use the class as an independent wrapping element.
+
O plugin JavaScript collapse é usado para mostrar e esconder conteúdo. Botões ou âncoras são usados como gatilhos que são mapeados para elementos específicos que você alterna visibilidade. Mostrar um elemento (de tal maneira) vai animar a height, de seu valor atual, para 0. Dado como CSS lida com animações, você não pode usar padding em um elemento .collapse. Pelo contrário, use esta classe como um elemento pai independente.
-
Example
+
Exemplo
-
Click the buttons below to show and hide another element via class changes:
+
Clique nos botões abaixo para mostrar e esconder outro elemento, através de mudanças de classes:
-
.collapse hides content
-
.collapsing is applied during transitions
-
.collapse.show shows content
+
.collapse esconde o conteúdo;
+
.collapsing é aplicado durante a transição;
+
.collapse.show mostra o conteúdo.
-
You can use a link with the href attribute, or a button with the data-target attribute. In both cases, the data-toggle="collapse" is required.
+
Você pode usar um link com o atributo href ou um botão com data-target. Em ambos casos, data-toggle="collapse" é exigido.
<p><aclass="btn btn-primary"data-toggle="collapse"href="#collapseExample"role="button"aria-expanded="false"aria-controls="collapseExample">
- Link with href
+ Link com href
</a><buttonclass="btn btn-primary"type="button"data-toggle="collapse"data-target="#collapseExample"aria-expanded="false"aria-controls="collapseExample">
- Button with data-target
+ Botão com data-target
</button></p><divclass="collapse"id="collapseExample">
@@ -462,22 +462,22 @@
Example
</div></div>
-
Multiple targets
+
Vários alvos
-
A <button> or <a> can show and hide multiple elements by referencing them with a JQuery selector in its href or data-target attribute.
-Multiple <button> or <a> can show and hide an element if they each reference it with their href or data-target attribute
+
Um <button> ou uma <a> pode mostrar e esconder vários elementos, referenciando-os com um seletor jQuery em seu href ou data-target.
+Vários <button> ou <a> podem mostrar e esconder um elemento, se cada um deles referenciá-lo com seus href ou data-target.
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+ Anim pariatur cliche reprehenderit, enim alemanha 7x1 brasil life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
@@ -491,15 +491,15 @@
Multiple targets
<p>
- <aclass="btn btn-primary"data-toggle="collapse"href="#multiCollapseExample1"role="button"aria-expanded="false"aria-controls="multiCollapseExample1">Toggle first element</a>
- <buttonclass="btn btn-primary"type="button"data-toggle="collapse"data-target="#multiCollapseExample2"aria-expanded="false"aria-controls="multiCollapseExample2">Toggle second element</button>
- <buttonclass="btn btn-primary"type="button"data-toggle="collapse"data-target=".multi-collapse"aria-expanded="false"aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
+ <aclass="btn btn-primary"data-toggle="collapse"href="#multiCollapseExample1"role="button"aria-expanded="false"aria-controls="multiCollapseExample1">Alterna primeiro elemento</a>
+ <buttonclass="btn btn-primary"type="button"data-toggle="collapse"data-target="#multiCollapseExample2"aria-expanded="false"aria-controls="multiCollapseExample2">Alterna segundo elemento</button>
+ <buttonclass="btn btn-primary"type="button"data-toggle="collapse"data-target=".multi-collapse"aria-expanded="false"aria-controls="multiCollapseExample1 multiCollapseExample2">Alterna terceiro elemento</button></p><divclass="row"><divclass="col"><divclass="collapse multi-collapse"id="multiCollapseExample1"><divclass="card card-body">
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+ Anim pariatur cliche reprehenderit, enim alemanha 7x1 brasil life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div></div></div>
@@ -512,9 +512,9 @@
Multiple targets
</div></div>
-
Accordion example
+
Exemplo de acordeão
-
Using the card component, you can extend the default collapse behavior to create an accordion.
+
Usando o componente card, você pode extender o comportamento padrão do collapse, para criar um acordeão.
@@ -522,14 +522,14 @@
Accordion example
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non alemanha 0 x 2 coreia do sul cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
@@ -537,7 +537,7 @@
@@ -551,7 +551,7 @@
@@ -568,14 +568,14 @@
<divclass="card-header"id="headingOne"><h5class="mb-0"><buttonclass="btn btn-link"type="button"data-toggle="collapse"data-target="#collapseOne"aria-expanded="true"aria-controls="collapseOne">
- Collapsible Group Item #1
+ Grupo de itens colapsável #1
</button></h5></div><divid="collapseOne"class="collapse show"aria-labelledby="headingOne"data-parent="#accordion"><divclass="card-body">
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non alemanha 0 x 2 coreia do sul cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div></div></div>
@@ -583,7 +583,7 @@
<divclass="card-header"id="headingTwo"><h5class="mb-0"><buttonclass="btn btn-link collapsed"type="button"data-toggle="collapse"data-target="#collapseTwo"aria-expanded="false"aria-controls="collapseTwo">
- Collapsible Group Item #2
+ Grupo de itens colapsável #2
</button></h5></div>
@@ -597,7 +597,7 @@
<divclass="card-header"id="headingThree"><h5class="mb-0"><buttonclass="btn btn-link collapsed"type="button"data-toggle="collapse"data-target="#collapseThree"aria-expanded="false"aria-controls="collapseThree">
- Collapsible Group Item #3
+ Grupo de itens colapsável #3
</button></h5></div>
@@ -609,80 +609,103 @@
</div></div>
-
Accessibility
+
Acessibilidade
-
Be sure to add aria-expanded to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of aria-expanded="false". If you’ve set the collapsible element to be open by default using the show class, set aria-expanded="true" on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsbile element). If the control element’s HTML element is not a button (e.g., an <a> or <div>), the attribute role="button" should be added to the element.
-
-
If your control element is targeting a single collapsible element – i.e. the data-target attribute is pointing to an id selector – you should add the aria-controls attribute to the control element, containing the id of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.
-
-
Note that Bootstrap’s current implementation does not cover the various keyboard interactions described in the WAI-ARIA Authoring Practices 1.1 accordion pattern - you will need to include these yourself with custom JavaScript.
+
+
Se assegure de usar aria-expanded no elemento controle. Este atributo transmite o atual estado do elemento colapsável, ligado ao contole, para leitores de telas e tecnologias assistivas;
+
Se o elemento colapsável é fechado por padrão, o atributo no elemento controle deve ter o valor de aria-expanded="false";
+
+
Já, se você configurou para que o elemento estivesse aberto, por padrão, usando a classe .show, defina aria-expanded="true" no controle;
+
O plugin vai, automaticamente, alternar este atributo no controle, verificando se o elemento colapsável foi aberto ou não, via JavaScript ou porque o usuário acionou um outro elemento controle, também vinculado ao mesmo elemento colapsável.
+
+
+
Se a tag do elemento controle não é um botão (ex: <a> ou <div>), o atributo role="button" deve ser usado no elemento;
+
Se seu elemento controle está atingindo só um elemento colapsável (data-target referenciando um seletor de id), você deve adicionar o atributo aria-controls no elemento controle.
+
+
Leitores de telas modernos e tecnologias assistivas similares fazem uso desse atributo para dar atalhos adicionais aos usuários, para navegar diretamente para o próprio elemento colapsável.
+
+
+
-
Usage
+
Perceba que a atual implementação do Bootstrap não cobre as diversas interações de teclado descritas no WAI-ARIA Authoring Practices 1.1 accordion pattern. Você vai precisar incluir elas, com seu próprio JavaScript.
+d
+
Modo de uso
-
The collapse plugin utilizes a few classes to handle the heavy lifting:
+
O plugin collapse usa algumas classes para cumprir seu dever:
-
.collapse hides the content
-
.collapse.show shows the content
-
.collapsing is added when the transition starts, and removed when it finishes
+
.collapse esconde o conteúdo;
+
.collapse.show mostra o conteúdo;
+
.collapsing é adicionado quando a transição inicia e removido quando finaliza.
-
These classes can be found in _transitions.scss.
+
Essas classes podem ser encontradas em _transitions.scss.
-
Via data attributes
+
Via atributos data
-
Just add data-toggle="collapse" and a data-target to the element to automatically assign control of one or more collapsible elements. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you’d like it to default open, add the additional class show.
+
+
Basta adicionar data-toggle="collapse" e um data-target no elemento para, automaticamente, atribuir controle em um ou mais elementos colapsáveis;
+
+
O atributo data-target aceita um seletor CSS para aplicar o colapso.
+
+
+
Se assegure de adicionar a classe .collapse no elemento colapsável.
+
+
Se quer que ele esteja aberto por padrão, use a classe adicional show.
+
+
+
-
To add accordion-like group management to a collapsible area, add the data attribute data-parent="#selector". Refer to the demo to see this in action.
+
Para criar um acordeão em uma área colapsável, use o atributo data-parent="#seletor". Veja a demonstração, para ver isso em ação.
Via JavaScript
-
Enable manually with:
+
Ative, manualmente, usando:
$('.collapse').collapse()
-
Options
+
Opções
-
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent="".
+
Opções podem ser passadas via atributos data ou JavaScript. Para atributos data, anexe o nome da opção no prefixo data-, como em data-parent="".
-
Name
-
Type
-
Default
-
Description
+
Nome
+
Tipo
+
Padrão
+
Descrição
parent
-
selector | jQuery object | DOM element
+
seletor | objeto jQuery | elemento DOM
false
-
If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the card class). The attribute has to be set on the target collapsible area.
+
Se o pai é provido, então, todos elementos colapsáveis dentro dele vão ser fechados quando este item colapsável é mostrado (semelhante ao comportamento do acordeão, dependendo da classe do card). O atributo deve ser definido na área colapsável do alvo.
toggle
-
boolean
+
booleano
true
-
Toggles the collapsible element on invocation
+
Alterna o elemento colapsável, na invocação.
-
Methods
+
Métodos
-
Asynchronous methods and transitions
+
Métodos é transições assíncronas
-
All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.
+
Todos métodos API são assíncronos e iniciam a transição. Eles retornam ao invocador, assim que a transição é iniciada, mas que ela finalize. Além do mais, uma chamada de método em um componente transicionando é ignorada.
Toggles a collapsible element to shown or hidden. Returns to the caller before the collapsible element has actually been shown or hidden (i.e. before the shown.bs.collapse or hidden.bs.collapse event occurs).
+
Alterna um elemento colapsável para mostrar ou escondê-lo. Retorna ao invocador antes do elemento colapsável ter sido mostrado ou escondido, de fato (antes do evento shown.bs.collapse ou hidden.bs.collapse ocorrer).
.collapse('show')
-
Shows a collapsible element. Returns to the caller before the collapsible element has actually been shown (i.e. before the shown.bs.collapse event occurs).
+
Mostra um elemento colapsável. Retorna ao invocador antes do elemento colapsável ter sido mostrado, de fato (antes do evento shown.bs.collapse ocorrer).
.collapse('hide')
-
Hides a collapsible element. Returns to the caller before the collapsible element has actually been hidden (i.e. before the hidden.bs.collapse event occurs).
+
Esconde um elemento colapsável. Retorna ao invocar antes do elemento colapsável ter sido escondido, de fato (antes do evento hidden.bs.collapse ocorrer).
.collapse('dispose')
-
Destroys an element’s collapse.
+
Destroi o colapso de um elemento.
-
Events
+
Eventos
-
Bootstrap’s collapse class exposes a few events for hooking into collapse functionality.
+
A classe Bootstrap do collapse tem alguns eventos para ativar a funcionalidade de colapso.
-
Event Type
-
Description
+
Tipo de evento
+
Descrição
show.bs.collapse
-
This event fires immediately when the show instance method is called.
+
Este evento é acionado, imediatamente, quando o método show é chamado.
shown.bs.collapse
-
This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
+
Este evento é acionado quando um elemento colapsável fica visível para o usuário (espera as transições CSS finalizarem).
hide.bs.collapse
-
This event is fired immediately when the hide method has been called.
+
Este evento é acionado, imediatamente, quando o método hide é chamado.
hidden.bs.collapse
-
This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).
+
Este evento é acionado quando um elemento colapsável foi escondido do usuário (espera as transições CSS finalizarem).
$('#myCollapsible').on('hidden.bs.collapse',function(){
- // do something…
+ //faça algo, aqui...})
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
+
Clique em botões para ver um lista de links e outras coisas, usando o plugin Bootstrap dropdown.
-
Overview
+
Visão Geral
-
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is an intentional design decision.
+
Dropdowns são botões com alternância de visibilidade de listas de links e outras coisas. Conseguem ser interativos graças a sua construção que foi feita com o plugin JavaScript dropdown. A visibilidade do conteúdo é alternada com cliques e nunca só ao passar o mouse em cima do botão (uma decisão de design intencional).
-
Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js. Popper.js isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.
+
Dropdowns são feitos em cima de uma biblioteca de terceiros, Popper.js, a qual permite posicionamento dinâmico e detecção de viewport. Se assegure de invocar popper.min.js, antes do JavaScript Bootstrap ou use bootstrap.bundle.min.js / bootstrap.bundle.js, os quais já possuem o Popper.js. No entanto, Popper.js não é usada para posicionar dropdowns em navbars, já que posicionamento dinâmico não é necessário.
-
If you’re building our JavaScript from source, it requires util.js.
+
Se você está construindo nosso JavaScript a partir da fonte, vai precisar do util.js.
-
Accessibility
+
Acessibilidade
-
The WAI ARIA standard defines an actual role="menu" widget, but this is specific to application-like menus which trigger actions or functions. ARIA menus can only contain menu items, checkbox menu items, radio button menu items, radio button groups, and sub-menus.
+
O padrões WAI ARIA pedem o uso do atributo role="menu", mas ele é específico para menus de aplicações que ativam ações ou funções. Menus ARIA só podem conter itens de menu, checkbox, grupos e botões radio, além de sub-menus.
-
Bootstrap’s dropdowns, on the other hand, are designed to be generic and applicable to a variety of situations and markup structures. For instance, it is possible to create dropdowns that contain additional inputs and form controls, such as search fields or login forms. For this reason, Bootstrap does not expect (nor automatically add) any of the role and aria- attributes required for true ARIA menus. Authors will have to include these more specific attributes themselves.
+
Os dropdowns Bootstrap, por outro lado, são desenhados para serem genéricos e aplicáveis em várias situações e estruturas de marcação. Por exemplo, é possível criar dropdowns que possuem inputs e form controls adicionais, como campos de pesquisa ou formulários de login. Por essa razão, Bootstrap não espera (nem adiciona automaticamente) a presença dos atributos role e aria, exigidos nos reais menus ARIA. Os autores terão que incluí-los, por si só.
-
However, Bootstrap does add built-in support for most standard keyboard menu interactions, such as the ability to move through individual .dropdown-item elements using the cursor keys and close the menu with the ESC key.
+
No entanto, Bootstrap tem suporte para a maioria das interações padrões de teclado, como a habilidade de mover-se através de elementos individuais dropdown-item (usando o as setinhas do teclado) ou fechar o menu com a tecla ESC.
-
Examples
+
Exemplos
-
Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown, or another element that declares position: relative;. Dropdowns can be triggered from <a> or <button> elements to better fit your potential needs.
+
Envolte os itens ou menu dropdown dentro da classe .dropdown ou qualquer outro elemento que tenha position: relative; declarado. Dropdowns podem ser acionados de um elemento <a> ou <button>, te dando mais flexibilidade.
-
Single button
+
Único botão
-
Any single .btn can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either <button> elements:
+
Qualquer .btn pode se transformar em um dropdown, com algumas adições na marcação HTML.
+
+
Aqui está como você pode fazê-los funcionar, usando <button>:
Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret.
+
Similarmente, crie botões divididos com a mesma marcação HTML de botões dropdowns, mas com a adição da classe .dropdown-toggle-split para espaçamento apropriado, ao redor da setinha.
-
We use this extra class to reduce the horizontal padding on either side of the caret by 25% and remove the margin-left that’s added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button.
+
Nós usamos esta classe extra para reduzir o padding horizontal, em 25% dos lados da setinha e remover a margin-left que é adicionada em botões dropdowns comuns. Estas mudanças extras mantém a setinha centralizada e dá uma área de clique maior, no botão principal.
<!-- Large button groups (default and split) -->
+
<!-- Grupo de botões grandes (padrões e divididos) --><divclass="btn-group"><buttonclass="btn btn-secondary btn-lg dropdown-toggle"type="button"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">
- Large button
+ Botão grande
</button><divclass="dropdown-menu">
...
@@ -763,20 +765,20 @@
Sizing
</div><divclass="btn-group"><buttonclass="btn btn-secondary btn-lg"type="button">
- Large split button
+ Botão grande dividido
</button><buttontype="button"class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">
- <spanclass="sr-only">Toggle Dropdown</span>
+ <spanclass="sr-only">Dropdown</span></button><divclass="dropdown-menu">
...
</div></div>
-<!-- Small button groups (default and split) -->
+<!-- Grupo de botões pequenos (padrão e dividido) --><divclass="btn-group"><buttonclass="btn btn-secondary btn-sm dropdown-toggle"type="button"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">
- Small button
+ Botão pequeno
</button><divclass="dropdown-menu">
...
@@ -784,21 +786,21 @@
Historically dropdown menu contents had to be links, but that’s no longer the case with v4. Now you can optionally use <button> elements in your dropdowns instead of just <a>s.
+
Historicamente, o conteúdo dos dropdowns tinham que ser links, mas isso não é mais o caso, na v4. Agora, você pode usar elementos <button> em seus dropdowns, invés de <a>.
You can also create non-interactive dropdown items with .dropdown-item-text. Feel free to style further with custom CSS or text utilities.
+
Você também pode criar dropdowns com itens não interativos, usando .dropdown-item-text. Sinta-se livre para fazer mais estilizações com CSS ou utilitários de texto.
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.
+
Por padrão, o menu dropdown é, automaticamente, posicionado 100% a partir do topo e esquerda do elemento pai. Use .dropdown-menu-right em um .dropdown-menu para alinhar o menu dropdown a direita.
-
Heads up! Dropdowns are positioned thanks to Popper.js (except when they are contained in a navbar).
+
Atenção! Dropdowns são posicionados com ajuda do Popper.js (exceto quando estão dentro de uma navbar).
+
-
-
-
+
+
+
<divclass="btn-group"><buttontype="button"class="btn btn-secondary dropdown-toggle"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">
- Right-aligned menu
+ Menu alinhado a direita
</button><divclass="dropdown-menu dropdown-menu-right">
- <buttonclass="dropdown-item"type="button">Action</button>
- <buttonclass="dropdown-item"type="button">Another action</button>
- <buttonclass="dropdown-item"type="button">Something else here</button>
+ <buttonclass="dropdown-item"type="button">Ação</button>
+ <buttonclass="dropdown-item"type="button">Another Ação</button>
+ <buttonclass="dropdown-item"type="button">Algo mais aqui</button></div></div>
-
Menu content
+
Conteúdo do menu
-
Headers
+
Cabeçalho
-
Add a header to label sections of actions in any dropdown menu.
+
Coloque um cabeçalho para rotular seções, no menu dropdown.
Place any freeform text within a dropdown menu with text and use spacing utilities. Note that you’ll likely need additional sizing styles to constrain the menu width.
+
Coloque qualquer texto dentro do menu dropdown e use utilitários de espaçamentos. Perceba que você pode precisar estilizar o tamanho da fonte para se adequar a largura do menu.
- Some example text that's free-flowing within the dropdown menu.
+ Algum exemplo de texto, aqui dentro do menu.
- And this is more example text.
+ Mais um exemplo de texto.
<divclass="dropdown-menu p-4 text-muted"style="max-width: 200px;"><p>
- Some example text that's free-flowing within the dropdown menu.
+ Algum exemplo de texto, aqui dentro do menu.
</p><pclass="mb-0">
- And this is more example text.
+ Mais um exemplo de texto.
</p></div>
-
Forms
+
Formulários
-
Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.
+
Coloque um formulário dentro do menu dropdown ou transforme-o em um menu dropdown. Use utilitários de margem ou padding para conseguir o espaço negativo necessário.
Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .show class on the parent list item. The data-toggle="dropdown" attribute is relied on for closing dropdown menus at an application level, so it’s a good idea to always use it.
+
Usando JavaScript ou atributos data, o plugin dropdown alterna a visibilidade de conteúdo invisível (menus dropdown) trocando a classe .show, no elemento pai da lista. O atributo data-toggle="dropdown" é acreditado para fechar os menus dropdown em level de aplicação, então, é uma boa ideia sempre usá-lo.
-
On touch-enabled devices, opening a dropdown adds empty ($.noop) mouseover handlers to the immediate children of the <body> element. This admittedly ugly hack is necessary to work around a quirk in iOS’ event delegation, which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty mouseover handlers are removed.
+
Em dispositivos touch, abrir um menu adiciona manipuladores ($.noop) mouseover vazios em filhos imediatos do elemento <body>. Essa gambiarra feia é necessária para contornar um problema na delegação de eventos do iOS, o qual poderia evitar que toques fora do dropdown acionassem o código que fecha o próprio dropdown. Uma vez que o dropdown é fechado, esses manipuladores mouseover adicionais vazios são removidos.
-
Via data attributes
+
Via atributos data
-
Add data-toggle="dropdown" to a link or button to toggle a dropdown.
+
Use data-toggle="dropdown" em um link ou botão para alternar a visibilidade do menu dropdown.
Regardless of whether you call your dropdown via JavaScript or instead use the data-api, data-toggle="dropdown" is always required to be present on the dropdown’s trigger element.
+
Independente se você invoca seu dropdown com JavaScript ou com a data-api, o uso de data-toggle="dropdown" sempre é obrigatório no gatilho dropdown.
-
Options
+
Parâmetros
-
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset="".
+
Parâmetros sempre podem ser passados usando atributos ou JavaScript. Para atributos, anexe o parâmetro no prefixo data-, como em data-offset="".
-
Name
-
Type
-
Default
-
Description
+
Nome
+
Tipo
+
Padrão
+
Descrição
offset
-
number | string | function
+
number | string | função
0
-
Offset of the dropdown relative to its target. For more information refer to Popper.js's offset docs.
+
Deslocamento do dropdown, em relação ao seu alvo. Para mais informações, veja a documentação do offset Popper.js.
flip
boolean
true
-
Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper.js's flip docs.
+
Permite o dropdown virar, em caso de sobreposição no elemento de referência. Para mais informações, veja a documentação do flip Popper.js.
boundary
-
string | element
+
string | elemento
'scrollParent'
-
Overflow constraint boundary of the dropdown menu. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs.
+
Limite de transbordamento do menu dropdown. Aceita os valores 'viewport', 'window', 'scrollParent' ou uma referência HTMLElement (JavaScript, apenas). Para mias informações, veja a documentação preventOverflow Popper.js.
reference
-
string | element
+
string | elemento
'toggle'
-
Reference element of the dropdown menu. Accepts the values of 'toggle', 'parent', or an HTMLElement reference. For more information refer to Popper.js's referenceObject docs.
+
Elemento de referência do menu dropdown. Aceita os valores 'toggle', 'parent' ou uma referência HTMLElement. Para mais informações, veja a documentação referenceObject Popper.js.
display
string
'dynamic'
-
By default, we use Popper.js for dynamic positioning. Disable this with `static`.
+
Por padrão, nós usamos o posicionamento dinâmico do Popper.js. Desative isso, usando o valor `static`.
-
Note when boundary is set to any value other than 'scrollParent', the style position: static is applied to the .dropdown container.
+
Nota: quando boundary tem como valor definido qualquer coisa, que não 'scrollParent', o estilo position: static é aplicado no container .dropdown.
-
Methods
+
Métodos
-
Method
-
Description
+
Método
+
Descrição
$().dropdown('toggle')
-
Toggles the dropdown menu of a given navbar or tabbed navigation.
+
Alterna a visibilidade do menu dropdown em uma dada navbar ou navegação por abas.
$().dropdown('update')
-
Updates the position of an element’s dropdown.
+
Atualiza a posição do dropdown de um elemento.
$().dropdown('dispose')
-
Destroys an element’s dropdown.
+
Destroi o dropdown de um elemento.
-
Events
+
Eventos
-
All dropdown events are fired at the .dropdown-menu’s parent element and have a relatedTarget property, whose value is the toggling anchor element.
+
Todos eventos dropdown são acionados no elemento pai do .dropdown-menu e possuem uma propriedade relatedTarget, a qual tem o valor referente ao elemento âncora de alternância.
-
Event
-
Description
+
Evento
+
Descrição
show.bs.dropdown
-
This event fires immediately when the show instance method is called.
+
Este evento é acionado, imediatamente, quando o método show é invocado.
shown.bs.dropdown
-
This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).
+
Este evento é acionado quando o dropdown se torna visível ao usuário (espera as transições CSS finalizarem)
hide.bs.dropdown
-
This event is fired immediately when the hide instance method has been called.
+
Este evento é acionado, imediatamente, quando o método hide foi invocado.
hidden.bs.dropdown
-
This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).
+
Este evento é acionado quando o dropdown acaba de se esconder do usuário (espera as transições CSS finalizarem).
$('#myDropdown').on('show.bs.dropdown',function(){
- // do something…
+ // Faça algo, aqui…})
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
+
Formulários
+
Exemplos, instruções para estilizar campos de formulários, opções de layout e componentes personalizados para criar uma grande variedade de formulários.
-
Overview
+
Visão geral
-
Bootstrap’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.
+
Campos de formulários Bootstrap extendem os estilos herdados do Reboot, graças a classes. Use estas classes para conseguir uma exibição personalizada e, portanto, uma renderização nos browsers e dispositivos, mais consistentes.
-
Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.
+
Se assegure de usar um atributo type adequado em todos inputs (email em campos de email, por exemplo) para conseguir se aproveitar dos novos inputs, como seletores de números, verificadores de emails, etc.
-
Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.
+
Aqui está um rápido exemplo para demonstrar os estilos de formulário Bootstrap. Continue lendo a documentação para descobrir sobre classes obrigatórias, layout de formulários e muito mais.
<form><divclass="form-group">
- <labelfor="exampleInputEmail1">Email address</label>
- <inputtype="email"class="form-control"id="exampleInputEmail1"aria-describedby="emailHelp"placeholder="Enter email">
- <smallid="emailHelp"class="form-text text-muted">We'll never share your email with anyone else.</small>
+ <labelfor="exampleInputEmail1">Endereço de email</label>
+ <inputtype="email"class="form-control"id="exampleInputEmail1"aria-describedby="emailHelp"placeholder="Seu email">
+ <smallid="emailHelp"class="form-text text-muted">Nunca vamos compartilhar seu email, com ninguém.</small></div><divclass="form-group">
- <labelfor="exampleInputPassword1">Password</label>
- <inputtype="password"class="form-control"id="exampleInputPassword1"placeholder="Password">
+ <labelfor="exampleInputPassword1">Senha</label>
+ <inputtype="password"class="form-control"id="exampleInputPassword1"placeholder="Senha"></div><divclass="form-group form-check"><inputtype="checkbox"class="form-check-input"id="exampleCheck1">
- <labelclass="form-check-label"for="exampleCheck1">Check me out</label>
+ <labelclass="form-check-label"for="exampleCheck1">Clique em mim</label></div>
- <buttontype="submit"class="btn btn-primary">Submit</button>
+ <buttontype="submit"class="btn btn-primary">Enviar</button></form>
-
Form controls
+
Campos de formulário
-
Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.
+
Campos de formulário textuais como <input>, <select> e <textarea> são estilizados com a classe .form-control. Ela possui estilos para aparência, estado de foco e muito mais.
-
Be sure to explore our custom forms to further style <select>s.
Set horizontally scrollable range inputs using .form-control-range.
+
Crie um input range, usando .form-control-range.
<form><divclass="form-group">
- <labelfor="formControlRange">Example Range input</label>
+ <labelfor="formControlRange">Exemplo de input range</label><inputtype="range"class="form-control-range"id="formControlRange"></div></form>
-
Readonly
+
Input só de leitura
-
Add the readonly boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
+
Use o atributo booleano readonly em um input para evitar alterações no valor dele. Inputs readonly são mais esmaecidos (como os desativados), mas preservam o cursor padrão.
<inputclass="form-control"type="text"placeholder="Input só de leitura, aqui..."readonly>
-
Readonly plain text
+
Input só de leitura em texto
-
If you want to have <input readonly> elements in your form styled as plain text, use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.
+
Se você quiser elementos <input readonly> em seu formuláro, mas no estilo de texto, use a classe .form-control-plaintext para remover os estilos padrões do campo, preservando margem e padding.
Default checkboxes and radios are improved upon with the help of .form-check, a single class for both input types that improves the layout and behavior of their HTML elements. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
+
Checkboxes e radios padrões são aprimorados com ajuda da .form-check, uma classe para os dois tipos de input que melhora o layout e comportamento de seus elementos HTML. Checkboxes são para selecionar várias opções em uma lista, enquanto radios são para selecionar uma em muitas.
-
Disabled checkboxes and radios are supported, but to provide a not-allowed cursor on hover of the parent <label>, you’ll need to add the disabled attribute to the .form-check-input. The disabled attribute will apply a lighter color to help indicate the input’s state.
+
Checkboxes e radios desativados são suportados, mas para se ter um cursor not-allowed quando passá-lo sobre o <label> pai, você precisará adicionar o atributo disabled no elemento com .form-check-input. O atributo disabled vai aplicar um cor mais clara para indicar o estado do input.
-
Checkboxes and radios use are built to support HTML-based form validation and provide concise, accessible labels. As such, our <input>s and <label>s are sibling elements as opposed to an <input> within a <label>. This is slightly more verbose as you must specify id and for attributes to relate the <input> and <label>.
+
Checkboxes e radios são feitos para terem suporte a validação de formulário HTML e prover labels consisos e acessíveis. Assim, nossos <input> e <label> são elementos irmãos, diferente de um <input> dentro de uma <label>. Isso é um pouco mais massante, já que você precisa especificar atributos id e for para vincular o <input> a <label>.
-
Default (stacked)
+
Padrão (empilhados)
-
By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with .form-check.
+
Por padrão, qualquer número de checkboxes e radios, que são irmãos imediatos, vão se empilhar e receber espaçamento apropriado com a classe .form-check.
<divclass="form-check">
- <inputclass="form-check-input"type="radio"name="exampleRadios"id="exampleRadios1"value="option1"checked>
+ <inputclass="form-check-input"type="radio"name="exampleRadios"id="exampleRadios1"value="opcao1"checked><labelclass="form-check-label"for="exampleRadios1">
- Default radio
+ Radio padrão
</label></div><divclass="form-check">
- <inputclass="form-check-input"type="radio"name="exampleRadios"id="exampleRadios2"value="option2">
+ <inputclass="form-check-input"type="radio"name="exampleRadios"id="exampleRadios2"value="opcao2"><labelclass="form-check-label"for="exampleRadios2">
- Second default radio
+ Segundo radio padrão
</label></div><divclass="form-check disabled">
- <inputclass="form-check-input"type="radio"name="exampleRadios"id="exampleRadios3"value="option3"disabled>
+ <inputclass="form-check-input"type="radio"name="exampleRadios"id="exampleRadios3"value="opcao3"disabled><labelclass="form-check-label"for="exampleRadios3">
- Disabled radio
+ Radio desativado
</label></div>
Inline
-
Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.
+
Crie grupos de checkboxes ou radios, na mesma linha horizontal, usando .form-check-inline em qualquer .form-check.
Add .position-static to inputs within .form-check that don’t have any label text. Remember to still provide some form of label for assistive technologies (for instance, using aria-label).
+
Use .position-static em inputs dentro de .form-check, os quais não possuem qualquer texto de label. Lembre-se de, ainda assim, criar algum tipo de label para tecnologias assistivas (usando aria-label, por exemplo).
Since Bootstrap applies display: block and width: 100% to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.
+
Já que Bootstrap aplica display: block e width: 100% em quase todos campos de formulários, eles vão se empilhar, por padrão. Classes adicionais podem ser usadas para variar este layout.
-
Form groups
+
Grupos de formulários
-
The .form-group class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies margin-bottom, but it picks up additional styles in .form-inline as needed. Use it with <fieldset>s, <div>s, or nearly any other element.
+
A classe .form-group é o jeito mais fácil de adicionar alguma estrutura aos formulários. Ela cria uma base para o agrupamento apropriado de labels, controles, textos de ajuda e mensagens de validação de formulário. Por padrão, ela só aplica margin-bottom, mas usa alguns estilos adicionais de form-inline, sempre que necessário. Use-a em <fieldset>, <div> ou quase qualquer outro elemento.
More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.
+
Formulários mais complexos podem ser feitos usando classes do grid. Use-as para fazer layouts de formulários que precisam de várias colunas, larguras e outras opções de alinhamento.
You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.
+
Você também pode trocar .row por .form-row, uma variação de nosso grid row padrão, a qual sobrescreve as gutters padrões das colunas para conseguir layouts mais compactos.
Create horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and controls. Be sure to add .col-form-label to your <label>s as well so they’re vertically centered with their associated form controls.
+
Crie formulários horizontais com o grid, usando a classe .row em grupos de formulários e as classes .col-*-* para especificar a largura de seus labels e controles. Também, se assegure de usar .col-form-label no seu <label>, para que ele se centralize verticalmente com seus campos de formulário.
-
At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we’ve removed the padding-top on our stacked radio inputs label to better align the text baseline.
+
As vezes, você pode precisar usar utilitários de margem ou padding para criar o alinhamento perfeito que precisa. Por exemplo, nós removemos padding-top em nossos inputs radios empilhados para melhorar o alinhamento da baseline do texto.
<legendclass="col-form-label col-sm-2 pt-0">Radios</legend><divclass="col-sm-10"><divclass="form-check">
- <inputclass="form-check-input"type="radio"name="gridRadios"id="gridRadios1"value="option1"checked>
+ <inputclass="form-check-input"type="radio"name="gridRadios"id="gridRadios1"value="opcao1"checked><labelclass="form-check-label"for="gridRadios1">
- First radio
+ Primeiro radio
</label></div><divclass="form-check">
- <inputclass="form-check-input"type="radio"name="gridRadios"id="gridRadios2"value="option2">
+ <inputclass="form-check-input"type="radio"name="gridRadios"id="gridRadios2"value="opcao2"><labelclass="form-check-label"for="gridRadios2">
- Second radio
+ Segundo radio
</label></div><divclass="form-check disabled">
- <inputclass="form-check-input"type="radio"name="gridRadios"id="gridRadios3"value="option3"disabled>
+ <inputclass="form-check-input"type="radio"name="gridRadios"id="gridRadios3"value="opcao3"disabled><labelclass="form-check-label"for="gridRadios3">
- Third disabled radio
+ Terceiro radio desativado
</label></div></div>
@@ -1157,21 +1157,21 @@
Be sure to use .col-form-label-sm or .col-form-label-lg to your <label>s or <legend>s to correctly follow the size of .form-control-lg and .form-control-sm.
+
Tenha certeza de usar .col-form-label-sm ou .col-form-label-lg em um <label> ou <legend> para, adequadamente, seguir o tamanho de .form-control-lg e .form-control-sm.