Topo
Loading

CSS Básico

Padrões básicos de estilos da biblioteca waStandards.

Tipografia

Fontes

A biblioteca waStandards com o template Base utiliza a família de fontes Tahoma e Helvética Condensed.

Cabeçalhos

Todos cabeçalhos, <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>

Exemplo de pageHeader

<div class="pageHeader">
    <h4>Exemplo de pageHeader</h4>
</div>

Ê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 é 12px, com um line-height de 18px. 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.

Estão disponíveis nas cores green, yellow e red.

Exemplo

<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 têm sua classe CSS vinculada a um numerador (singleButton1, singleButton2, etc.)

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:

Observação: Os botões que não forem instanciados com a classe CSS definidora de tamanhos se comportarão com o tamanho padrão small.
Classe do Botão Classe CSS 'mini' Classe CSS 'small' Classe CSS 'large'
singleButton1
singleButton2
singleButton2 com classes CSS variantes de alerta (error, success, info, warning)



  
<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>

Dica quente! Conheça também os padrões de botões agrupados, botões com ícones e botões com menu dropdown

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 Base:

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.

Observação: As horizontalList1 que não forem instanciadas com a classe CSS definidora de tamanhos se comportarão com o tamanho padrão small.
horizontalList1 mini:
horizontalList1 small:
horizontalList1 large: 
<ul class="horizontalList1 mini"> 
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>
horizontalList2

Esta é uma horizontalList2. Ela pode ser utilizada para criar menus, ou separar elementos. Possui uma barra lateral como separador.

<ul class="horizontalList2"> 
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>
horizontalList3

Esta é uma horizontalList3. Ela pode ser utilizada para criar menus, ou separar elementos. Possui uma borda lateral pontilhada como separador

<ul class="horizontalList3"> 
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>
horizontalList4

Esta é uma horizontalList4. Ela pode ser utilizada para criar menus, ou separar elementos. Possui uma caixa semitransparente como container

<ul class="horizontalList4"> 
    <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 horizontalList1 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

Esta é uma lista verticalList2. Ela pode ser utilizada para criar menus, ou separar elementos. Possui uma barra horizontal como separador

  • Item de lista 1
  • Item de lista 2
  • Item de lista 3
  • Item de lista 4
<ul class="verticalList2"> 
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>
verticalList3

Esta é uma lista verticalList3. Ela pode ser utilizada para criar menus, ou separar elementos. Possui uma barra horizontal como separador

  • Item de lista 1
  • Item de lista 2
  • Item de lista 3
  • Item de lista 4
<ul class="verticalList3"> 
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>
verticalList4

Esta é uma lista verticalList4. Ela pode ser utilizada para criar botões ou caixas acinzentadas.

<ul class="verticalList4"> 
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>
verticalList5

Esta é uma lista verticalList5. Ela pode ser utilizada para criar boxes de elementos.

  • Item de lista 1
  • Item de lista 2
  • Item de lista 3
  • Item de lista 4
<ul class="verticalList5"> 
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>
verticalList6

Esta é uma lista verticalList6. 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

Tabelas simples

Para estilização básica, adicione a classe base singleTable* para qualquer <table>.

Os padrões de tabelas são numerados, sendo cada estilo definido por um número (singleTable1, singleTable2, etc.)

singleTable1

Esta é uma lista singleTable1. Ela é a primeira opção disponível para tabulação de dados de uma página.

Status Conteúdo Prioridade
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
Alta
Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga
Baixa
Et harum quidem rerum facilis est et expedita distinctio.
Média
 
<table class="singleTable1">
    …
</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 de zebrado

Adicione a classe singleTable1 striped na tag <table> para habilitar o efeito zebrado na tabela. Efeito obtido com seletores nth:child. Não disponível para IE7 e 8

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>
Efeito gradiente em colunas

Adicione a classe singleTable1 gradient nas tags <td> e <th> para habilitar o efeito gradiente nas colunas 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">
    <tr>
        <th>...</th>
        <th class="gradient">...</th>
    </tr>
    <tr>
        <td>...</td>
        <td class="gradient">...</td>
    </tr>
</table>
Grupos de ação

Adicione um container <div> com a classeactionGroup nos ícones representantes de ações das tabelas para habilitar o efeitos de iluminação nos ícones de ação no evento mouseOver.

Conteúdo Ações
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga
Et harum quidem rerum facilis est et expedita distinctio. 
<table class="singleTable1">
<tr>
    <th>Conteúdo</th>
    <th>Ações</th>
</tr>
<tr>
    <td>
        ...
    </td>
    <td class="actionGroup">
        <a class="icon16px pattern black opacity50percent sprite-edition-modify margin3px"></a>
        <a class="icon16px pattern black opacity50percent sprite-actions-delete-big-1 margin3px"></a>
    </td>
</tr>
singleTable2

Esta é uma lista singleTable2. Ela é a segunda opção, mais limpa e simples para a tabulação de dados. Pode ser complementada com as classes de espaçamento mini, small e large

Observação: As tabelas singleTable2 que não forem instanciados com a classe CSS definidora de tamanhos se comportarão com o espaçamento padrão mini.
Status singleTable2 mini
Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga
Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga
Status singleTable2 small
Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga
Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga
Status singleTable2 large
Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga
Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga 
<table class="singleTable2 mini">
    …
</table>
Grupos de elementos

As singleTable2 podem receber tags <th> associadas à classe CSS titleGroup para obter uma visão de agrupamento

Grupo de elementos 1
Similique sunt in Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga
Similique sunt in Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga
Grupo de elementos 2
Similique sunt in Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga
Similique sunt in Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga 
<table>
    <tr>
        <th class="titleGroup" >Grupo de elementos</th>
    </tr>
    <tr>
        <td>
            ...
        </td>
    </tr>
</table>

Alinhamento de colunas em tabelas

Utilize os atributos align e valign para definir os alinhamentos verticais e horizontais de uma coluna de tabela

<table>
    <tr>
        <td align="center">
            ...
        </td>
    </tr>
    <tr>
        <td align="left" valign="middle">
            ...
        </td>
    </tr>
</table>

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>

singleBox1 com título

Título do box

O singleBox1 pode ser associado a um box de títulos pageHeader

<div class="singleBox1">
    <div class="pageHeader">
        <h6>Título do box</h6>
    <div>
</div>

singleBox2

singleBox2 
<div class="singleBox2">
    …
</div>

singleBox3

singleBox3 
<div class="singleBox3">
    …
</div>

singleBox4

singleBox4 
<div class="singleBox4">
    …
</div>

singleBox5

singleBox5 
<div class="singleBox5">
    …
</div>

singleBox5 com título

Título do box

O singleBox5 pode ser associado a um box de títulos pageHeader

<div class="singleBox5">
    <div class="pageHeader">
        <h4>Título do box</h4>
    <div>
</div>

singleBox5 com setas indicadoras

Os boxes que recebem a classe CSS singleBox5 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. O box pai precisa ter position: relative;

topLeft
topCenter
topRight
leftTop
leftCenter
leftBottom
bottomLeft
bottomCenter
bottomRight
rightTop
rightCenter
rightBottom 
<div class="singleBox5 positionRelative">
    <div class="arrow topLeft"></div>
</div>

singleBox5 com efeito mouseOver

Os elementos singleBox5 podem estar associados a uma classe enableHover para atingirem um efeito de mouseOver.

Caso seja instanciada também a classe active, o singleBox se comporta como ativo.

Exemplo
Exemplo ativo 
<div class="singleBox5 enableHover">
    ...
</div>
<div class="singleBox5 enableHover active">
    ...
</div>

singleBox5 com barra de botões inferior

Os elementos singleBox5 podem estar associados a outro elemento de classe singleButtonBox5 que adiciona uma barra inferior de ações ao box.

Exemplo de barra de botões inferior 
<div class="singleBox5">
    ...
    <div class="singleButtonBox5">
        <button class="singleButton1 small">Option 1</button>
        <button class="singleButton1 small">Option 2</button>
    </div>
</div>

singleBox6

singleBox6 
<div class="singleBox6">
    …
</div>

singleBox7

singleBox7 
<div class="singleBox7">
    …
</div>

singleBox8

singleBox8 
<div class="singleBox8">
    …
</div>

singleBox9

singleBox9 
<div class="singleBox9">
    …
</div>

singleBox10

singleBox10 
<div class="singleBox10">
    …
</div>

singleBox10 com título

Título do box

O singleBox10 pode ser associado a um box de títulos pageHeader

<div class="singleBox10">
    <div class="pageHeader">
        <h4>Título do box</h4>
    <div>
</div>

Ícones

A biblioteca waStandards possui uma base de mais de 700 ícones disponíveis para uso. Eles estão disponíveis nos tamanhos icon16px, icon24px e icon32px. Podem ser utilizados nas cores black e white. São instanciados por CSS sprite e requerem uma classe sprite-* que vai definir qual é o ícone que deverá aparecer na tela.

Observação: Os ícones devem ser instanciados com as tags <i></i>.

Nomenclatura

A classe icon16px define o tamanho do ícone; As classes black ou white definem a cor do ícone; A classe pattern define a biblioteca de imagens a se usar; a classe sprite-... define a imagem do ícone

Bibliotecas de ícones

A waStandards possui uma biblioteca de ícones principal chamada pattern com mais de 700 ícones. Outras bibliotecas mais simples também estão disponíveis. Conhecer outras bibliotecas.

Biblioteca pattern

Todos os ícones abaixo estão disponíveis nos tamanhos icon16px, icon24px e icon32px. Também podem ser chamadas nas cores black e white. Passe o mouse sobre os ícones para ver a classe sprite-* geradora das imagens:

<i class="icon16px pattern black sprite-vcard"></i> <!--/ícone preto de 16px -->
<i class="icon24px pattern white sprite-vcard"></i> <!--/ícone branco de 24px -->
<i class="icon32px pattern black sprite-vcard"></i> <!--/ícone preto de 32px -->

Ícones com opacidade

Dica quente! Utilize as classes de Atalho opacity*percent para criar ícones com opacidade.

<i class="icon16px pattern black opacity50percent sprite-vcard"></i> <!--/ícone com 50% de opacidade -->

Imagens

A biblioteca waStandards possui uma classe picture para a padronização de imagens. Ela pode ser atribuida em elementos <img/> ou em containers que comportem imagens. As imagens instanciadas com a class picture recebem um fio lateral decorativo.

Exemplo

Imagem Modelo 1 Imagem Modelo 2 

<img src="..." class="picture" />

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>

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 span* do sistema de grids. Insira span12 para que ele assuma 100% do espaço disponível em seu container. Insira span5 para que ele assuma 50% do espaço disponível.

Exemplo

<form>
    <div class="formGrid">
        <div class="row-fluid">
            <div class="span3">
                <label for="txtDemo1" class="cor1_color fontBold alignRight">
                    Campo 1 obrigatório
                </label>
            </div>
            <div class="span9">
                <input type="text" name="txtDemo1" class="singleField1 span12 required" />
            </div>
        </div>
        <div class="row-fluid">
            <div class="span3">
                <label for="txtDemo2" class="cor1_color fontBold alignRight">
                    Campo 2
                </label>
            </div>
            <div class="span3">
                <input type="text" name="txtDemo2" class="singleField1 width200px" />
            </div>
                                    
            <div class="span3">
                <label for="txtDemo3" class="cor1_color fontBold alignRight">
                    Campo 3
                </label>
            </div>
            <div class="span3">
                <input type="text" name="txtDemo3" class="singleField1 span12" />
            </div>
        </div>
        <div class="row-fluid">
            <div class="span9 offset3">
                <input type="submit" name="btnEnviar" class="singleButton1 large" 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).

  • Opção 1
  • Opção 2
  • Opção 3
  • Opção 4
  • 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.
  • 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.
  • 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. 
<form>
    <div class="formGrid">    
        <div class="row">
            <div class="span3">
                <label for="chkGroup1">
                        Checkboxes - Grupo Horizontal
                </label>
            </div>
            <div class="span9">
                <ul class="horizontalFormList1">
                    <li>
                        <input type="checkbox" name="chkGroup1" />
                        Opção 1
                    </li>
                    ...
                </ul>
            </div>
        </div>

        <div class="row">
            <div class="span3">
                <label for="radioGroup1">
                        Radio Buttons - Grupo Vertical
                </label>
            </div>
            <div class="span9">
                <ul class="verticalFormList1">
                    <li>
                        <input type="radio" name="radioGroup1" value="1" />
                        Opção 1 – Lorem ipsum dolor 
                    </li>
                    ...
                </ul>
            </div>
        </div>
    </div>
</form>

Estrutura de formulário horizontal antigo Descontinuado

Atenção! Esse modelo de estrutura não está mais em uso. Recomenda-se que seja utilizada a nova estrutura de formulários documentada logo acima.

esta estrutura é composta por uma linha formRow, seguida de tags <label> com irmãs <div> com classe <formItem>. Veja no modelo abaixo, que é possível inserir mais de um campo por linha formRow.

Diagrama da estrutura de um formulário

ExemploDescontinuado

<form>
    <div class="formRow">
        <label for="txtTextDemo"">
            Campo 1 obrigatório
        </label>
        <div class="formItem">
            <input type="text" name="txtTextDemo" class="singleField1 required" />
        </div>
    </div>
    <div class="formRow">
        <!-- LINHA COM 2 ELEMENTOS -->
        <label for="txtEmailDemo">
            Campo 2
        </label>
        <div class="formItem">
            <input type="text" name="txtEmailDemo" class="singleField1" />
        </div>
        <label for="txtDemo2" >
            Campo 3
        </label>
        <div class="formItem">
            <input type="text" name="txtDemo2" class="singleField1" />
        </div>
    </div>
    <div class="formRow">
        <label for="btnEnviar">
        </label>
        <div class="formItem">
            <input type="submit" name="btnEnviar" class="singleButton1" value="Enviar" />
        </div>
    </div>
</form>