As classes de contêiner
| Classe | define | |
|---|---|---|
| w3-container | Contêiner para o conteúdo HTML (acrescenta 16px preenchimento à esquerda e à direita) | Tente |
| Usado com classes de cor | Tente | |
| Usado como cabeçalho | Tente | |
| Usado como rodapé | Tente | |
| Usado com w3-leftBar | Tente | |
| Usado com w3-bottombar | Tente | |
| w3-section | Contêiner para o conteúdo HTML (acrescenta topo 16px margem e inferior) | Tente |
| w3-badge | Badge Circular 8 | Tente |
| w3-tag | Tag rectangular mais tarde! | Tente |
| W3-UL | lista não ordenada | Tente |
| w3-display-contêiner | Recipiente para as classes w3-display-(posicionar um elemento no canto superior esquerdo, superior direito, inferior esquerdo ou no canto inferior direito, ou no meio do recipiente) | Tente |
| w3-image | Obsoleto. Use w3-display-container em vez disso. | Tente |
| w3-blockquote | Removido em 2,0 (uso w3-leftBar vez) | Tente |
| W3-código | recipiente código | Tente |
| w3-progress-container | Progress recipiente bar | Tente |
Classes de mesa
| Classe | define | |
|---|---|---|
| w3-table | Recipiente para uma tabela HTML | Tente |
| w3-listrado | mesa listrada | Tente |
| w3-border | mesa, contornada | Tente |
| w3-fronteira | linhas de fronteira | Tente |
| w3-centrada | tabela centrada | Tente |
| w3-hoverable | mesa Hoverable | Tente |
| w3-table-tudo | Todas as propriedades definidas | Tente |
| Com listrado-w3, w3-fronteira e w3-fronteira | Tente | |
| Com a cabeça colorido | Tente | |
| Com w3-responsáveis | Tente | |
| Com w3-tiny | Tente | |
| Com w3-small | Tente | |
| Com w3-large | Tente | |
| Com w3-xlarge | Tente | |
| Com w3-XXLarge | Tente | |
| Com w3-XXXLarge | Tente | |
| com a cor | Tente | |
| Com w3-jumbo | Tente |
Classes de cartão
| Classe | define | |
|---|---|---|
| W3-card | Recipiente para qualquer conteúdo HTML (com margem) | Tente |
| w3-card-2 | Recipiente para qualquer conteúdo HTML (sombra com borda 2px) | Tente |
| w3-card-4 | Recipiente para qualquer conteúdo HTML (sombra com borda 4px) | Tente |
| w3-card-8 | Recipiente para qualquer conteúdo HTML (sombra com borda 8px) | Tente |
| w3-card-12 | Recipiente para qualquer conteúdo HTML (12px fronteira de sombra) | Tente |
| w3-card-16 | Recipiente para qualquer conteúdo HTML (16px fronteira de sombra) | Tente |
| w3-card-24 | Recipiente para qualquer conteúdo HTML (24px fronteira de sombra) | Tente |
Classes Responsive
| Classe | define | |
|---|---|---|
| w3-row | Recipiente para uma linha de conteúdo sensível fluido | Tente |
| w3-row-estofamento | Row, onde todas as colunas têm um preenchimento padrão | Tente |
| w3-content | Recipiente para o conteúdo tamanho centrais fixos | Tente |
| W3-meia | Metade contêiner de coluna (1/2) ecrã | Tente |
| W3 terço | Terceiro recipiente coluna (1/3) ecrã | Tente |
| w3-twothird | Dois terceiro recipiente coluna (2/3) ecrã | Tente |
| w3 trimestre | Trimestre contêiner de coluna (1/4) ecrã | Tente |
| w3-threequarter | Três quartos contêiner de coluna (3/4) ecrã | Tente |
| w3-col | contêiner de coluna por qualquer conteúdo HTML | Tente |
| L1 - L12 | tamanhos sensível para grandes ecrãs | Tente |
| m1 - m12 | tamanhos Responsive para telas médias | Tente |
| S1 - s12 | tamanhos Responsive para telas pequenas | Tente |
| w3-hide-small | Ocultar conteúdo em telas pequenas (menos de 601px) | Tente |
| w3-hide-médio | Ocultar o conteúdo em telas médias | Tente |
| -W3-hide grande | Ocultar conteúdo em telas grandes (maiores que 992px) | Tente |
Classes de navegação
| Classe | define | |
|---|---|---|
| w3-navbar | Barra de navegação | Tente |
| barra de navegação dobrável | Tente | |
| w3-topnav | barra de navegação superior | Tente |
| w3-sidenav | barra de navegação lateral | Tente |
| barra de navegação lateral sobrepondo o conteúdo principal | Tente | |
| barra de navegação lateral cobrindo todo o conteúdo principal | Tente | |
| barra de navegação lateral mudando o conteúdo principal à direita | Tente | |
| barra de navegação lateral com um fundo de sobreposição | Tente | |
| w3-colapso | navegação lateral responsivo totalmente automático | Tente |
| w3-dropnav | navegação suspensa | Tente |
| w3-suspenso clique com o botão | elemento suspenso clicável | Tente |
| w3-pendente-pairo | elemento suspenso Hoverable | Tente |
| elemento suspenso Hoverable (usado em w3-navbar) | Tente | |
| elemento suspenso Hoverable (usado em w3-sidenav) | Tente | |
| elemento suspenso Hoverable (usado em w3-topnav) | Tente | |
| w3-acordeão | Ocultar e mostrar conteúdo recolhível | Tente |
| acordeão clicáveis e suspenso usado em w3-sidenav | Tente | |
| w3-pagination | links de paginação | Tente |
Classes de botão
| Classe | define | |
|---|---|---|
| w3-btn | botão HTML rectangular | Tente |
| botão HTML retangular com efeito cascata | Tente | |
| btn-w3-flutuante | botão flutuante Circular | Tente |
| botão flutuante circular com efeito cascata | Tente | |
| btn-w3-group | botões agrupados | Tente |
| btn-w3-block | De largura total botões (100%) | Tente |
Classes de entrada
| Classe | define | |
|---|---|---|
| w3-form | Mesmo que w3-estofamento | Tente |
| formulário de entrada como um cartão | Tente | |
| W3-entrada | Os elementos de entrada | Tente |
| Os elementos de entrada (rótulos top) | Tente | |
| Os elementos de entrada (etiquetas inferior) | Tente | |
| W3-grupo | Grupo de elementos HTML | Tente |
| w3-label | rótulo de entrada | Tente |
| w3-validate | Valida a entrada (muda de cor quando a entrada inválido) | Tente |
| w3-check | tipo de entrada caixa de seleção | Tente |
| w3-rádio | tipo de entrada de rádio | Tente |
| w3-select | Input elemento select | Tente |
| w3-animado-input | Anima a largura de uma entrada para 100% | Tente |
Classes modais
| Classe | define | |
|---|---|---|
| w3-modal | recipiente modal | Tente |
| w3-modal-content | elemento pop-up Modal | Tente |
| w3-dica | elemento tooltip | Tente |
| w3-text | texto dica de ferramenta | Tente |
| em linha tooltip | Tente |
Classes de animação
| Classe | define | |
|---|---|---|
| w3-animado-top | Anima um elemento a partir do topo -300px para 0px | Tente |
| -W3-animado esquerda | Anima um elemento de -300px esquerda para 0px | Tente |
| w3-animado-bottom | Anima um elemento da -300px fundo para 0px | Tente |
| w3-animado com o botão direito | Anima um elemento de -300px direita para 0px | Tente |
| w3-animado-opacidade | Anima a opacidade de um elemento de 0 a 1 | Tente |
| w3-animado-zoom | Anima um elemento de 0 a 100% no tamanho | Tente |
| -W3-animado desaparecendo | Anima a opacidade de um elemento de 0 a 1 e 1 a 0 (desaparece dentro e para fora) | Tente |
| w3-spin | Girar um ícone 360 graus | Tente |
| Girar qualquer elemento 360 graus | Tente | |
| w3-animado-input | Anima a largura de um campo de entrada para 100% | Tente |
Classes de utilidade
| Classe | define | |
|---|---|---|
| w3-tiny | Especifica um tamanho de fonte de 10 pixels | Tente |
| w3-small | Especifica um tamanho de fonte de 12 pixels | Tente |
| w3-large | Especifica um tamanho de fonte de 20 pixels | Tente |
| w3-xlarge | Especifica um tamanho de fonte de 24 pixels | Tente |
| w3-XXLarge | Especifica um tamanho de fonte de 32 pixels | Tente |
| w3-XXXLarge | Especifica um tamanho de fonte de 48 pixels | Tente |
| w3-jumbo | Especifica um tamanho de fonte de 64 pixels | Tente |
| w3-slim | Especifica um texto mais magro | Tente |
| ampla-W3 | Especifica um texto mais amplo | Tente |
| w3-vertical | Especifica o texto vertical | Tente |
| w3-top | conteúdo fixo no topo da página | Tente |
| w3-center | conteúdo centrado | Tente |
| w3-circle | conteúdo circulou | Tente |
| w3-esconde | conteúdo oculto (display: none) | Tente |
| w3-show | Mostrar conteúdo (display: block) | Tente |
| w3-show-block | Alias de w3-show (display: block) | Tente |
| w3-show-inline-block | Mostrar como conteúdo inline-block (display: inline-block) | Tente |
| w3-hide-small | Ocultar conteúdo em telas pequenas (menos de 601px) | Tente |
| w3-hide-médio | Ocultar o conteúdo em telas médias | Tente |
| -W3-hide grande | Ocultar conteúdo em telas grandes (maiores que 992px) | Tente |
| W3-esquerda | conteúdo ajustado à esquerda | Tente |
| w3-direita | conteúdo ajustado direita | Tente |
| w3-left-align | texto alinhado à esquerda | Tente |
| w3-right-align | texto alinhado à direita | Tente |
| w3-justify | Direita e texto alinhado à esquerda | Tente |
| w3-display-contêiner | Recipiente para as classes w3-display-(position: relative) | Tente |
| w3-display-topleft | conteúdo posição no canto superior esquerdo | Tente |
| w3-display-topright | conteúdo posição no canto superior direito | Tente |
| w3-display-bottomleft | conteúdo posição no canto inferior esquerdo | Tente |
| w3-display-bottomright | conteúdo posição no canto inferior direito | Tente |
| w3-display-middle | conteúdo Posição no meio (horizontal e verticalmente) | Tente |
| w3-display-topmiddle | conteúdo Posição no meio, na parte superior do elemento | Tente |
| w3-display-bottommiddle | conteúdo Posição no meio, na parte inferior do elemento | Tente |
| w3-serif | Muda a fonte para serif | Tente |
| w3-opacidade | Adiciona opacidade para texto | Tente |
| Adiciona opacidade para qualquer elemento | Tente | |
| w3-sobreposição | Cria um efeito de sobreposição | Tente |
| w3-text-shadow | Adiciona sombras para texto | Tente |
Classes de cor
| Classe | define | |
|---|---|---|
| W3-vermelho | Fundo da cor vermelha | Tente |
| w3-rosa | rosa cor de fundo | Tente |
| w3-roxo | cor de fundo roxo | Tente |
| w3-deep-purple | cor de fundo roxo escuro | Tente |
| w3-indigo | indigo cor de fundo | Tente |
| w3-blue | azul cor de fundo | Tente |
| w3-azul-claro | Fundo azul claro cor | Tente |
| w3-ciano | ciano cor de fundo | Tente |
| w3-Aqua | aqua da cor de fundo | Tente |
| w3-teal | cerceta cor de fundo | Tente |
| w3-verde | verde cor de fundo | Tente |
| w3-luz-verde | Fundo verde claro Cor | Tente |
| w3-lime | cal cor de fundo | Tente |
| w3 de areia | areia cor de fundo | Tente |
| w3-khaki | cáqui cor de fundo | Tente |
| w3-amarelo | cor de fundo amarelo | Tente |
| w3-âmbar | âmbar cor de fundo | Tente |
| W3-laranja | laranja cor de fundo | Tente |
| w3-deep-laranja | cor de fundo laranja escuro | Tente |
| w3-azul-cinzento | cor de fundo cinza azul | Tente |
| w3-brown | Fundo marrom cor | Tente |
| w3-cinza-claro | cinza claro cor de fundo | Tente |
| w3-cinza | cinza cor de fundo | Tente |
| w3-cinza-escuro | cor de fundo cinza escuro | Tente |
| w3-preta | preto cor de fundo | Tente |
| w3-pálido-vermelho | cor de fundo vermelho pálido | Tente |
| w3-amarelo-pálido | cor de fundo amarelo pálido | Tente |
| w3-verde-claro | cor de fundo verde pálido | Tente |
| w3-azul-claro | cor de fundo azul pálido | Tente |
| w3-transparente | Transparent background-color |
Classes Hover
Todas as cores acima também pode ser utilizado como classes paire:
| Classe | define | |
|---|---|---|
| -W3-pairar branco | cor branca Hover | Tente |
| -W3-pairo preto | cor preta Hover | Tente |
| -W3-foco vermelho | Hover cor vermelha | Tente |
| w3-pairar-azul | cor azul Hover | Tente |
| -W3-pairar verde | cor verde Hover | Tente |
| w3-pairar-Aqua | aqua da cor Hover | Tente |
| w3-pairar-laranja | cor laranja Hover | Tente |
| -W3-pairar cinza | cor cinza Hover | Tente |
| w3-pairar-verde-claro | cor verde pálido Hover | Tente |
| w3-pairar-text-vermelho | Passe o texto da cor vermelha | Tente |
| w3-pairar-text-vermelho | Passe azul cor do texto | Tente |
| w3-pairar-text-verde | Passe verde cor do texto | Tente |
| w3-pairar-text-roxo | Hover cor do texto roxo | Tente |
| -w3-pairar border- cor | cor da borda Hover | Tente |
| w3-pairar-opacidade | Adiciona transparência a um elemento em foco (60% de opacidade) | Tente |
| w3-pairar-sombra | Adiciona sombra a um elemento em foco | Tente |
| w3-pairar-nenhuns | Remove efeitos de foco de um elemento | Tente |
Classes redondos
| Classe | define | |
|---|---|---|
| w3-round | Elemento arredondado (border-radius) 4px | Tente |
| w3-small-round | Elemento arredondado (border-radius) 2px | Tente |
| w3-round-médio | Elemento arredondado (border-radius) 4px | Tente |
| w3-large-round | Elemento arredondado (border-radius) 8px | Tente |
| w3-round-xlarge | Elemento arredondado (border-radius) 16px | Tente |
| w3-round-XXLarge | Elemento arredondado (border-radius) 32px | Tente |
| w3-jumbo-round | Elemento arredondado (border-radius) 64px | Tente |
Classes de preenchimento
| Classe | define | |
|---|---|---|
| w3-padding-0 | Remove todas as mordomias de um elemento | Tente |
| w3-estofamento | Estofamento superior 8px e inferior, e 16px esquerda e direita. | Tente |
| -W3-preenchimento minúsculo | Estofamento superior 2px e inferior, e 4px esquerda e direita. | Tente |
| w3-padding-pequena | Estofamento superior 4px e inferior, e 8px esquerda e direita. | Tente |
| w3-padding-médio | Estofamento superior 8px e inferior, e 16px esquerda e direita. | Tente |
| -W3-preenchimento grande | Estofamento superior 12px e inferior, e 24px esquerda e direita. | Tente |
| w3-padding-xlarge | Estofamento superior 16px e inferior, e 32px esquerda e direita. | Tente |
| w3-padding-XXLarge | Estofamento superior 24px e inferior, e 48px esquerda e direita. | Tente |
| -W3-preenchimento jumbo | Estofamento superior 32px e inferior, e 64px esquerda e direita. | Tente |
| w3-padding-top | 8px topo estofamento | Tente |
| w3-padding-right | Preenchimento 16px direita | Tente |
| w3-padding-bottom | 8px fundo estofamento | Tente |
| -W3-padding-left | Preenchimento 16px esquerda | Tente |
| w3-padding-hor-4 | Preenchimento superior e inferior 4px | Tente |
| w3-padding-hor-8 | Preenchimento superior e inferior 8px | Tente |
| w3-padding-hor-12 | Preenchimento superior e inferior 12px | Tente |
| w3-padding-hor-16 | Preenchimento superior e inferior 16px | Tente |
| w3-padding-hor-24 | Preenchimento superior e inferior 24px | Tente |
| w3-padding-hor-32 | Preenchimento superior e inferior 32px | Tente |
| w3-padding-hor-48 | Preenchimento superior e inferior 48px | Tente |
| w3-padding-hor-64 | Preenchimento superior e inferior 64px | Tente |
| w3-padding-hor-128 | Preenchimento 128px superior e inferior | Tente |
| w3-padding-ver-4 | Preenchimento 4px esquerda e direita. | Tente |
| w3-padding-ver-8 | Preenchimento 8px esquerda e direita. | Tente |
| w3-padding-ver-16 | Preenchimento 16px esquerda e direita. | Tente |
| w3-padding-ver-24 | Preenchimento 24px esquerda e direita. | Tente |
| w3-padding-ver-32 | Preenchimento 32px esquerda e direita. | Tente |
| w3-padding-ver-48 | Preenchimento 48px esquerda e direita. | Tente |
| w3-padding-ver-64 | Preenchimento 64px esquerda e direita. | Tente |
Classes de margem
| Classe | define | |
|---|---|---|
| w3-margin-0 | Remove todas as margens de um elemento | Tente |
| w3-margin | 16px margem | Tente |
| w3-margin-top | 16px margem superior | Tente |
| w3-margin-right | Margem de 16px direita | Tente |
| w3-margin-bottom | 16px inferior margem | Tente |
| -W3 margem esquerda | Margem de 16px esquerda | Tente |
Classes de Fronteira
| Classe | define | |
|---|---|---|
| w3-border | Fronteiras (topo, direita e inferior, à esquerda) | Tente |
| w3-border-top | parte superior da beira | Tente |
| w3-border-right | direito border | Tente |
| w3-border-bottom | bottom fronteira | Tente |
| -W3-borda esquerda | borda esquerda | Tente |
| w3-border-0 | Remove todas as fronteiras | Tente |
| cor w3-border- | Exibe quaisquer fronteiras definidas em uma cor específica (como o vermelho, etc) | Tente |
| w3-bottombar | Adiciona uma borda fundo grosso (bar) a um elemento | Tente |
| w3-leftBar | Adiciona uma borda grossa à esquerda (bar) a um elemento | Tente |
| w3-rightBar | Adiciona uma borda direita de espessura (bar) a um elemento | Tente |
| w3-topbar | Adiciona uma borda superior de espessura (bar) a um elemento | Tente |
| -w3-pairar border- cor | cor da borda Hoverable | Tente |