Tipografia
Fontes
A biblioteca waStandards com o template Mobile utiliza a família de fontes Open Sans.
Títulos
Todos os títulos, <h1> até <h6> estão disponíveis.
Exemplo
h1. Cabeçalho 1
h2. Cabeçalho 2
h3. Cabeçalho 3
h4. Cabeçalho 4
h5. Cabeçalho 5
h6. Cabeçalho 6
Caixa de título
A caixa de título pode ser usada sozinha ou em conjunto com outros elementos. É instanciada a partir da classe pageHeader. Dentro dela, instanciam
se títulos <h1>, <h2>, <h3>, <h4>, <h5> ou <h6>
Ênfase de título
Faça o uso da ênfase padrão do título utilizando a tag <small>.
Exemplo
Título texto com small
<h1>
Título <small>texto com small</small>
</h1>
Corpo
O padrão global do font-size é 14px, com um line-height de 22px.
Isto é aplicado ao <body> e todos os parágrafos. E ainda, <p> (parágrafos) recebem uma margem da metade
inferior de 15px por padrão.
Exemplo
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Negrito
Para enfatizar um pedaço de texto com uma propriedade font-weight mais pesada, através da tag <strong> ou da classe CSS fontBold
Exemplo
The following snippet of text is rendered as bold text.
The following snippet of text is rendered as bold text using CSS class fontBold.
<strong>rendered as bold text</strong> <span class="fontBold">rendered as bold text</span> using CSS class fontBold
Itálicos
Utilize a tag <em> ou a classe CSS fontItalic para enfatizar um trecho de texto com itálico
Exemplo
The following snippet of text is rendered as italicized text.
The following snippet of text is rendered as italicized text using CSS class fontItalic.
<em>rendered as italicized text</em> <span class="fontItalic">rendered as italicized text</span> using CSS class fontItalic
Marcadores
Os marcadores highlight servem para marcar textos, ou para criar caixas de alerta com cores pré-definidas (sinalizadores, por exemplo).
Podem ser usados em conjunto com as tags <div>, <span>, <a>, etc.
Estão disponíveis nas cores gray, red, orange, yellow, green, blue, black.
Exemplo
Lorem ipsum dolor sit amet, Destaque vermelho consectetur adipiscing elit Destaque laranja. Suspendisse et dignissim metus. Destaque amarelo tempus aliquam. Sed pharetra placerat est suscipit sagittis. Destaque verde Phasellus aliquam malesuada blandit. Donec adipiscing sem erat. Destaque azul Nunc at dui id purus Destaque preto lacinia tincidunt sit amet vel erat. Quisque congue urna ut nunc tempor sodales. Destaque cinza
<span class="highlight red">exemplo de marcador vermelho</span> <span class="highlight orange">exemplo de marcador laranja</span> <span class="highlight yellow">exemplo de marcador amarelo</span> <span class="highlight green">exemplo de marcador verde</span> <span class="highlight gray">exemplo de marcador cinza</span> <span class="highlight black">exemplo de marcador preto</span>
Semáforos
Os Semáforos signal servem para criar elementos circulares, definidores de status ou definidores de destaque.
Estão disponíveis nas cores green, yellow, orange white, blue e red.
Podem ser instanciados nos tamanhos mini, small e large.
Exemplo
1 13 145
<i class="signal green"></i> <i class="signal yellow"></i> <i class="signal red"></i>
Botões
Os botões são chamados de singleButton. Eles podem ser instanciados em elementos do tipo <input>, <button> ou <a>.
Existem em diversos estilos e podem ser instanciados a partir de cores diferentes, com as seguintes classes: success, error, info, warning, note, negative, positive.
Ao instanciar um botão, também podem ser incluídas classes complementares que definirão o tamanho padrão de cada um. Existem 3 tamanhos padrão para os botões:
| Classe do Botão | Classe CSS 'mini' | Classe CSS 'small' | Classe CSS 'large' |
|---|---|---|---|
| singleButton1 | |||
| singleButton1 success | |||
| singleButton1 error | |||
| singleButton1 info | |||
| singleButton1 warning | |||
| singleButton1 note | |||
| singleButton1 negative | |||
| singleButton1 positive | |||
| singleButton2 |
<button class="singleButton1 mini">Mini Button</button> <button class="singleButton1 small">Small Button</button> <button class="singleButton1 large">Large Button</button> <button class="singleButton2 mini">Mini Button</button> <button class="singleButton2 small">Small Button</button> <button class="singleButton2 large">Large Button</button>
Botões com ícones
É possível criar botões associados a ícones internamente. Clique aqui para ver como fazer.
Botões agrupados
Os Botões Padrão singleButton* podem ser usados na criação de grupos. Para isto, basta
criá-los contidos em um elemento <div> instanciado com a classe CSS buttonGroup.
Os botões podem ser instanciados e agrupados em qualquer tamanho (mini, small e large).
Adicione ao botão ativo a classe active para diferenciá-lo dos demais.
Exemplos
<div class="buttonGroup">
<input type="button" class="singleButton1 small active" value="Opção 1" />
<input type="button" class="singleButton1 small" value="Opção 2" />
<input type="button" class="singleButton1 small" value="Opção 3" />
</div>
Botões dropdown
Os Botões Padrão singleButton* suportam inserção de menus dropdown em seu interior. Para isso, basta inserir uma
lista <ul> em seu código, acrecido dos ícones sinalizadores de retração / expansão que você desejar:
O alinhamento padrão do submenu é à esquerda do botão. No elemento <ul>, pode ser inserida a classe CSS posRight para alinhamento do submenu à direita.
Exemplo
Dropdown- Opção 1
- Opção 2
- Opção 3
<a class="singleButton2 small" id="sampleButton">
Dropdown
<span class="ddwButton"><i class="icon-caret-down"></i></span>
<ul> <!-- Pode ser inserida a classe posRight na tag ul, para posicionamento à direita -->
<li>Opção 1</li>
<li>Opção 2</li>
...
</ul>
<i class="icon16px pattern black opacity50percent sprite-chevron-medium-fat-4-01 separator"></i>
</a>
Dica quente! Na lista de itens do menu dropdown, você pode incluir elementos
<li> com classe separator para criar separadores entre os elementos.
<a class="singleButton1 small" id="sampleButton">
Dropdown
<ul>
<li>Opção 1</li>
<li class="separator"></li>
<li>Opção 2</li>
...
</ul>
<i class="icon16px pattern black opacity50percent sprite-chevron-medium-fat-4-01 separator"></i>
</a>
Atenção! Para o correto funcionamento dos menus dropdown no singleButton*,
é necessário o uso de um recurso JavaScript. Veja mais na documentação do Dropdown.
<script>
$('#ddwButton2').dropdown();
</script>
Separadores
Os separadores são instanciados através da classe thinLine, associados a um elemento <hr />.
Podem ser usados para separar elementos da página.
Existem em diferentes formatos e tem seus estilos diferenciados por classes CSS thinLine*, adicionadas a numeradores. Veja:
thinLine1
thinLine2
thinLine3
<hr class="thinLine1" /> <hr class="thinLine2" /> <hr class="thinLine3" />
Listas
Listas Horizontais
As listas horizontais tem diversas funcionalidades. Podem ser utilizadas itens de listagem como uma galeria de imagens ou uma lista de botões, ou até mesmo como estruturas de menus.
São instanciadas na página através da classe horizontalList* e possuem numeração, de acordo com o seu estilo (horizontalList1,
horizontalList2, etc.). Veja os tipos de lista disponíveis no template Mobile:
horizontalList1
A horizontalList1 pode receber uma classe CSS adicional que definirá o espaçamento entre os elementos. Essa classe pode ser mini, small ou large.
horizontalList1 mini:
horizontalList1 small:
horizontalList1 large:
<ul class="horizontalList1 mini">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
horizontalList2
A horizontalList2 pode receber uma classe CSS adicional que definirá o espaçamento entre os elementos. Essa classe pode ser mini, small ou large.
horizontalList2 mini:
horizontalList2 small:
horizontalList2 large:
<ul class="horizontalList2 mini">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
Listas Verticais
As listas verticais também tem diversas funcionalidades. Podem ser utilizadas como estruturas de menus ou como separadores de elementos.
São instanciadas na página através da classe verticalList* e são numeradas de acordo com o seu estilo (verticalList1, verticalList2, etc.).
Veja os tipos de lista disponíveis neste template:
verticalList1
Estas são listas verticalList1 simples. Elas podem receber uma classe CSS adicional que definirá o espaçamento entre os elementos. Essa classe pode ser mini, small ou large.
verticalList1 mini
- Item de lista 1
- Item de lista 2
- Item de lista 3
- Item de lista 4
verticalList1 small
- Item de lista 1
- Item de lista 2
- Item de lista 3
- Item de lista 4
verticalList1 large
- Item de lista 1
- Item de lista 2
- Item de lista 3
- Item de lista 4
<ul class="verticalList1 small">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
verticalList2
Estas são listas verticalList2 simples. Elas podem receber uma classe CSS adicional que definirá o espaçamento entre os elementos. Essa classe pode ser mini, small ou large.
verticalList2 mini
- Item de lista 1
- Item de lista 2
- Item de lista 3
- Item de lista 4
verticalList2 small
- Item de lista 1
- Item de lista 2
- Item de lista 3
- Item de lista 4
verticalList2 large
- Item de lista 1
- Item de lista 2
- Item de lista 3
- Item de lista 4
<ul class="verticalList1 small">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
verticalList3
Esta é uma lista verticalList3. Ela pode ser utilizada como um menu lateral.
Possui 4 níveis de segmentação e tem a sua cor de base formulada de acordo com a
Cor padrão do template.
As tags <li> podem receber até duas classes adicionais, para indicar o elemento corrente (classe CSS current),
ou o elemento ativo (classe CSS active), veja no exemplo a seguir:
<ul class="verticalList6">
<li class="active">
<a>Item de lista 1 com a classe CSS 'active'</a>
<ul>
<li><a>Item de lista 1.1</a>
<ul>
<li><a>Item de lista 1.1.1</a>
<ul>
<li class="current"><a>Item de lista 1.1.1.1 com a classe CSS 'current'</a>
</li>
<li><a>Item de lista 1.1.1.2</a></li>
<li><a>Item de lista 1.1.1.3</a></li>
</ul>
</li>
<li><a>Item de lista 1.1.2</a></li>
<li><a>Item de lista 1.1.3</a></li>
</ul>
</li>
<li><a>Item de lista 1.2</a></li>
<li><a>Item de lista 1.3</a></li>
</ul>
</li>
<li><a>Item de lista 2</a></li>
<li><a>Item de lista 3</a></li>
<li><a>Item de lista 4</a></li>
</ul>
Tabelas
Para estilização básica, adicione a classe base singleTable* para qualquer <table>.
Para definição de espaçamento entre os elementos, podemos instanciar as classes adicionais mini, small e large.
singleTable1
singleTable1 mini
| Status | Conteúdo | Prioridade |
|---|---|---|
| Conteúdo 1 |
Alta
|
|
| Conteúdo 2 |
Baixa
|
|
| Conteúdo 3 |
Média
|
singleTable1 small
| Status | Conteúdo | Prioridade |
|---|---|---|
| Conteúdo 1 |
Alta
|
|
| Conteúdo 2 |
Baixa
|
|
| Conteúdo 3 |
Média
|
singleTable1 large
| Status | Conteúdo | Prioridade |
|---|---|---|
| Conteúdo 1 |
Alta
|
|
| Conteúdo 2 |
Baixa
|
|
| Conteúdo 3 |
Média
|
<table class="singleTable1 mini">
…
</table>
Efeito de iluminação ao passar o mouse
Adicione a classe singleTable1 hover na tag <table> para habilitar o efeito de iluminação ao passar o mouse em cima das linhas da tabela.
| Número | Conteúdo |
|---|---|
| 1 | At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum |
| 2 | Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga |
| 3 | Et harum quidem rerum facilis est et expedita distinctio. |
<table class="singleTable1 hover">
…
</table>
Efeito zebrado
Adicione a classe singleTable1 striped na tag <table> para habilitar o efeito zebrado na tabela.
| Número | Conteúdo |
|---|---|
| 1 | At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum |
| 2 | Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga |
| 3 | Et harum quidem rerum facilis est et expedita distinctio. |
<table class="singleTable1 striped">
…
</table>
Grupos de botões de ação em tabelas
Adicione à <td> container dos botões de ação da tabela a classe actionGroup
para habilitar a estilização e os efeitos de iluminação nos ícones de ação no evento mouseOver.
<table class="singleTable1 large">
<tr>
<th>Conteúdo</th>
<th>Ações</th>
</tr>
<tr>
<td>
...
</td>
<td class="actionGroup">
<a class="icon-pencil"></a>
<a class="icon-trash"></a>
</td>
</tr>
Boxes
Os boxes são sempre chamados a partir de classes CSS singleBox*. Seus tipos variados são definidos por
numeração (singleBox1, singleBox2, singleBox3, etc.). Veja os modelos:
singleBox1
singleBox1
<div class="singleBox1">
…
</div>
singleBox2
singleBox2
<div class="singleBox2">
…
</div>
singleBox3
singleBox3
<div class="singleBox3">
…
</div>
singleBox4
singleBox4
<div class="singleBox4">
…
</div>
Os boxes que recebem a classe CSS singleBox4 suportam setas laterais. Basta inserir um elemento com a classe CSS arrow dentro do container,
e instanciá-lo com as classes complementares topLeft, topCenter, topRight, leftTop, leftCenter,
leftBottom, bottomLeft, bottomCenter, bottomRight, rightTop, rightCenter ou rightBottom,
que definirão a sua posição.
topLeft
topCenter
topRight
leftTop
leftCenter
leftBottom
bottomLeft
bottomCenter
bottomRight
rightTop
rightCenter
rightBottom
<div class="singleBox4 positionRelative">
<div class="arrow topLeft"></div>
</div>
singleBox5
singleBox5
<div class="singleBox5">
…
</div>
singleBox6
singleBox6
<div class="singleBox6">
…
</div>
Ícones
A biblioteca de ícones mobile oferece ao desenvolvedor um conjunto de figuras vetoriais escaláveis. Ela é desenvolvida a partir do uso de ícones como fontes truetype. Com isso, é possível customizar a sua cor, tamanho sobra, opacidade, etc., assim como qualquer fonte comum. Para isso, foi incorporada ao projeto Standards a biblioteca fontAwesome, que possui ao todo 361 ícones.
Nomenclatura
Para criar um ícone, basta instanciar em uma tag <i> a classe CSS icon-*, onde o asterísco representa o
nome da figura que devará ser instanciada.
<i class="icon-camera-retro"></i>
Ícones grandes
Os ícones sempre seguem o tamanho de fonte padrão do container onde ele está instanciado.
Então, se o ícone for instanciado no body da página, ele será renderizado com 14px, que é o tamanho
de fone padrão do body na biblioteca.
Lembrete! Os ícones são, na verdade, fontes truetype e se comportam como tal!
A primeira forma de alterar o tamanho dos ícones, então, é definí-lo com um tamanho de fonte específico. Você pode usar os
atalhos CSS da biblioteca para fazê-lo (font12px, font14px, font16px, etc.).
<i class="icon-camera-retro font30px"></i>
O outro modo é utilizar as classes icon-large (33% de aumento), icon-2x (2x maior que o tamanho inicial),
icon-3x (3x maior que o tamanho inicial), ou icon-4x (4x maior que o tamanho inicial).
<i class="icon-camera-retro icon-large"></i> <i class="icon-camera-retro icon-2x"></i> <i class="icon-camera-retro icon-3x"></i> <i class="icon-camera-retro icon-4x"></i>
Ícones alinhados
Utilize as classes pull-right ou pull-left para inserir um ícone nas laterais de um conteúdo.
Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all of them in any combination to get lots of new possibilities.
<i class="icon-quote-left icon-4x pull-left icon-muted"></i> Use a few of the new styles together ... lots of new possibilities.
Ícones com botões
A biblioteca de ícones funciona perfeitamente dentro de botões. Você pode criar combinações entre ícones e botões, usando os estilos de ícone disponíveis,
como pull-right, pull-left e icon-spin.
waStandards
Versão 1.1
<button class="singleButton1 mini info">
<i class="icon-refresh icon-spin"></i> Carregando...
</button>
<button class="singleButton1 success small">
<i class="icon-shopping-cart icon-large"></i> Comprar
</button>
<button class="singleButton1 warning large">
<i class="icon-comment"></i> Comentar
</button>
<a class="singleButton1 large error">
<i class="icon-flag icon-2x pull-left"></i> waStandards<br/>Versão 1.1
</a>
Ícones com rotação
Um conjunto de classes pode se utilizado para rotacionar os ícones: icon-rotate-90, icon-rotate-180
icon-rotate-270, icon-flip-horizontal, icon-flip-vertical
normal
icon-rotate-90
icon-rotate-180
icon-rotate-270
icon-flip-horizontal
icon-flip-vertical
<i class="icon-shield"></i> normal<br> <i class="icon-shield icon-rotate-90"></i> icon-rotate-90<br> <i class="icon-shield icon-rotate-180"></i> icon-rotate-180<br> <i class="icon-shield icon-rotate-270"></i> icon-rotate-270<br> <i class="icon-shield icon-flip-horizontal"></i> icon-flip-horizontal<br> <i class="icon-shield icon-flip-vertical"></i> icon-flip-vertical
Ícones disponíveis
Web Applications
Edição de textos
Direções
Marcas e produtos
Imagens
A biblioteca waStandards possui uma classe picture1 para a padronização de imagens. Ela pode ser atribuida em elementos <img/> ou em
containers <div> que comportem imagens. As imagens instanciadas com a class picture1 recebem um fio lateral decorativo.
Exemplo
<img src="..." class="picture1" />
<!--Usando uma div container-->
<div class="picture1">
(icon/img here)...
</div>
Formulários
Campos de Formulários
Os campos de formulários padrão recebem a classe CSS singleField1. Para efeitos visuais adicionais, podemos
inserir também as classes CSS required, active e error.
singleField1
|
Campo simples | |
singleField1 required
|
Campo obrigatório | |
singleField1 active
|
Campo ativo | |
singleField1 error
|
Dados inválidos | |
singleField1 com <select>
|
Campo select | |
singleField1 com <textarea>
|
Campo textarea |
<input type="text" class="singleField1" /> <input type="text" class="singleField1 required" /> <input type="text" class="singleField1 active" /> <input type="text" class="singleField1 error" /> <select class="singleField1"></select> <textarea class="singleField1"></textarea>
Campos arredondados
Adicione a classe rounded singleField1 para criar campos com bordas arredondadas
singleField1 rounded
|
Campo simples | |
singleField1 rounded required
|
Campo obrigatório | |
singleField1 rounded active
|
Campo ativo | |
singleField1 rounded error
|
Dados inválidos | |
singleField1 rounded com <select>
|
Campo select | |
singleField1 rounded com <textarea>
|
Campo textarea |
<input type="text" class="singleField1" /> <input type="text" class="singleField1 required" /> <input type="text" class="singleField1 active" /> <input type="text" class="singleField1 error" /> <select class="singleField1"></select> <textarea class="singleField1"></textarea>
Estrutura de formulário horizontal
A estrutura básica de um formulário é composta por um container formGrid, que comporta uma
estrutura de linhas e colunas padrão da biblioteca waStandards.
Então, para criar um formulário com linhas e colunas, basta utilizar o sistema de grids. Veja abaixo:
Os elementos do tipo input podem receber classes para tamanhos fixos, como width150px, ou líquidos, baseados na classe col-* do sistema de grids.
Insira col-xs-12 para que ele assuma 100% do espaço disponível em seu container. Insira col-xs-6 para que ele assuma 50% do espaço disponível.
Dica quente! Torne os seus layouts responsivos utilizando as classes de grids específicas para os tamanhos padrão de dispositivos (col-xs, col-sm, col-md, col-lg)
Exemplo
<form>
<div class="formGrid">
<div class="row">
<div class="col-sm-3">
<label for="txtDemo1" class="cor1_color fontBold alignRight">
Campo 1 obrigatório
</label>
</div>
<div class="col-sm-9">
<input type="text" name="txtDemo1" class="singleField1 col-xs-12 required" />
</div>
</div>
<div class="row">
<div class="col-sm-3">
<label for="txtDemo2" class="cor1_color fontBold alignRight">
Campo 2
</label>
</div>
<div class="col-sm-3">
<input type="text" name="txtDemo2" class="singleField1 col-xs-12" />
</div>
<div class="col-sm-3">
<label for="txtDemo3" class="cor1_color fontBold alignRight">
Campo 3
</label>
</div>
<div class="col-sm-3">
<input type="text" name="txtDemo3" class="singleField1 col-xs-12" />
</div>
</div>
<div class="row">
<div class="col-sm-9 col-sm-offset-3">
<input type="submit" name="btnEnviar" class="singleButton1 small" value="Enviar" />
</div>
</div>
</div>
</form>
Dica quente! Para melhor controle e uso dos formulários, insira recursos de validação e de máscara de campos, disponíveis na Biblioteca de JavaScripts.
Listas de campos horizontais e verticais
As listas horizontais e verticais são feitas através de uma tag <ul> instanciada com a classe
horizontalFormList1 (para listas horizontais) e verticalFormList1 (para listas verticais).
<form>
<div class="formGrid">
<div class="row">
<div class="col-md-2">
<label for="chkGroup1">
Checkboxes - Grupo Horizontal
</label>
</div>
<div class="col-md-10">
<ul class="horizontalFormList1">
<li>
<input type="checkbox" name="chkGroup1" />
Opção 1
</li>
<li>
<input type="checkbox" name="chkGroup1" />
Opção 2
</li>
<li>
<input type="checkbox" name="chkGroup1" />
Opção 3
</li>
<li>
<input type="checkbox" name="chkGroup1" />
Opção 4
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-2">
<label for="radioGroup1">
Radio Buttons - Grupo Vertical
</label>
</div>
<div class="col-md-10">
<ul class="verticalFormList1">
<li>
<input type="radio" name="radioGroup1" value="1" />
Opção 1 – Lorem ipsum dolor sit amet solon enac felagun et minimus. Are sinuet elinac son maximus.
Et minimus son en ensuit posturi. Lorem ipsum dolor sit amet solon enac felagun et minimus.
</li>
<li>
<input type="radio" name="radioGroup1" value="2" />
Opção 2 – Lorem ipsum dolor sit amet solon enac felagun et minimus. Are sinuet elinac son maximus.
Et minimus son en ensuit posturi. Lorem ipsum dolor sit amet solon enac felagun et minimus.
</li>
<li>
<input type="radio" name="radioGroup1" value="3" />
Opção 3 – Lorem ipsum dolor sit amet solon enac felagun et minimus. Are sinuet elinac son maximus.
Et minimus son en ensuit posturi. Lorem ipsum dolor sit amet solon enac felagun et minimus.
</li>
</ul>
</div>
</div>
</div>
</form>
Utilitários responsivos
Para um desenvolvimento responsivo mais ágil, utilize as classes CSS listadas a seguir para esconder ou exibir conteúdos por dispositivos via media queries. Também estão inclusas algumas classes úteis para exibição ou não de elementos para impressão
Classes disponíveis
Use uma única ou a combinação das classes disponíveis para alternar conteúdo em dispositivos com tamanhos de tela distintos.
| Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
|---|---|---|---|---|
.visible-xs |
Visible | Hidden | Hidden | Hidden |
.visible-sm |
Hidden | Visible | Hidden | Hidden |
.visible-md |
Hidden | Hidden | Visible | Hidden |
.visible-lg |
Hidden | Hidden | Hidden | Visible |
.hidden-xs |
Hidden | Visible | Visible | Visible |
.hidden-sm |
Visible | Hidden | Visible | Visible |
.hidden-md |
Visible | Visible | Hidden | Visible |
.hidden-lg |
Visible | Visible | Visible | Hidden |
Classes de impressão
Similar às classes de exibição responsiva, as classes a seguir podem ser utilizadas para exibir ou esconder conteúdos ao imprimir uma tela.
| Browser | ||
|---|---|---|
.visible-print |
Hidden | Visible |
.hidden-print |
Visible | Hidden |
