Grid

Grid responsivo, mobile-first, de 12 colunas. Funciona bem com dispositivos de resoluções muito pequenas até grandes monitores.
Confira na tabela a seguir as opções do grid:

	Devices Minúsculos Smartphones (< 768px)	Devices Pequenos Tablets (≥ 768px)	Devices Médios Desktops (≥ 980px)	Devices Grandes Desktops (≥ 1200px)
# de colunas	12
Prefixo das classes	`.col-tiny-`	`.col-small-`	`.col-medium-`	`.col-large-`
Grids aninhados	Sim
Offsets	Sim

Exemplo do Grid

Redimensione seu browser (ou visualize esta página em um dispositivo de resolução menor), e observe que algumas das linhas tem larguras diferentes entre as resoluções.

4 12

4 6 12

7 12

3 7

2 5

<div class="row">
    <div class="col col-tiny-2">2</div>
    <div class="col col-tiny-2">2</div>
    <div class="col col-tiny-2">2</div>
    <div class="col col-tiny-2">2</div>
    <div class="col col-tiny-4">4</div>
</div>
<div class="row">
    <div class="col col-medium-4 col-small-12">
        <span class="visible-medium-above">4</span>
        <span class="visible-small-below">12</span>
    </div>
    <div class="col col-medium-4 col-small-6">
        <span class="visible-medium-above">4</span>
        <span class="visible-small">6</span>
        <span class="visible-tiny">12</span>
    </div>
    <div class="col col-medium-4 col-small-6">
        <span class="visible-medium-above">4</span>
        <span class="visible-small">6</span>
        <span class="visible-tiny">12</span>
    </div>
</div>
<div class="row">
    <div class="col col-medium-7 col-tiny-12">
        <span class="visible-medium-above">7</span>
        <span class="visible-small-below">12</span>
    </div>
    <div class="col col-medium-3 col-tiny-7">
        <span class="visible-medium-above">3</span>
        <span class="visible-small-below">7</span>
    </div>
    <div class="col col-medium-2 col-tiny-5">
        <span class="visible-medium-above">2</span>
        <span class="visible-small-below">5</span>
    </div>
</div>
<div class="row">
    <div class="col col-tiny-12">12</div>
</div>

Offsets

Para dar um distanciamento extra entre 2 elementos, basta usar uma classe .offset-*:

2 offset 2

2 offset 4

<div class="row">
    <div class="col col-tiny-2">2</div>
    <div class="col col-tiny-2 offset-tiny-2">2 offset 2</div>
    ...
</div>

Tipografia

Headings

Todos os headings HTML, do h1 ao h6.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

<h1>...</h1>

Parágrafos

Praesent in tellus ut magna tincidunt volutpat. Praesent eleifend erat eget risus gravida cursus fermentum urna placerat.

Vestibulum interdum orci sed enim egestas quis vehicula mauris accumsan. Donec mattis rhoncus augue, convallis gravida lacus congue vitae. Pellentesque tortor purus, blandit non consequat at, mattis elementum enim.

Morbi urna libero, blandit a rutrum sed, rutrum id arcu. Sed ac dolor quis erat fermentum feugiat a et sapien. Nam sit amet eros ac ipsum varius lacinia. Suspendisse nisi odio, pretium et dictum in, blandit vitae lectus.

<p>...</p>

Para dar um destaque extra a um parágrafo, adicione a ele a classe .lead.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<p class="lead">...</p>

Links

Lorem ipsum dolor sit amet

<a href="#">...</a>

Ênfase

Para dar ênfase a um determinado bloco de texto, pode-se usar qualquer uma das tags abaixo:

em, i: Texto enfatizado em itálico

strong, b: Texto com muita importância, em negrito.

small: Texto sem importância, letras pequenas!

<em>...</em> ou <i>...</i>
<strong>...</strong> ou <b>...</b>
<small>...</small>

Descrições

Uma lista de termos e suas descrições associadas.

Marca: Lamborghini
Carro: Gallardo
Cor: Amarelo

<dl>
    <dt>Marca</dt>
    <dd>Lamborghini</dd>

    <dt>Carro</dt>
    <dd>Gallardo</dd>

    <dt>Cor</dt>
    <dd>Amarelo</dd>
</dl>

Para obter uma descrição inline, adicione a classe .dl-inline. Os termos ocuparão um espaço de 160px, e termos muito longos irão ser cortados com reticências.

Lorem ipsum dolor: sit amet, consectetur adipiscing elit
Mauris lobortis felis nec dui venenatis: commodo. Praesent sed nulla suscipit felis hendrerit rutrum.
Donec mauris: justo, laoreet sit amet varius in

<dl class="dl-inline">
    <dt>...</dt>
    <dd>...</dd>
</dl>

Listas

Elementos ul e ol, como sempre!

Não ordenadas

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<ul>
    <li>...</li>
</ul>

Ordenadas

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<ol>
    <li>...</li>
</ol>

Não estilizadas

Adicione a classe .unstyled para ter listas cujos itens não tem um estilo. Nota: Apenas os itens diretos da lista com a classe não serão estilizados.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<ul class="unstyled">
    <li>...</li>
</ul>

Inline

Adicione a classe .inline para ter uma lista inline.

Item 1
Item 2
Item 3

<ul class="inline">
    <li>...</li>
</ul>

Formulários

Grid

Label:

Texto de ajuda para o campo acima

Outro Label:

Label sem campo:

Texto alinhado com o label

Marque para confirmar:

Label block

Inline

Checkbox

Radio

Padrão

<form method="POST" action="#">
    <fieldset>
        <legend>Grid</legend>
        <div class="row">
            <div class="syo-field col col-medium-8 col-large-6">
                <label for="input1" class="col col-medium-4">Label:</label>
                <div class="col col-medium-8">
                    <input type="text" id="input1" class="input-block-level">
                    <span class="syo-field-help">Texto de ajuda para o campo acima</span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="syo-field col col-medium-8 col-large-6">
                <label for="input2" class="col col-medium-4">Outro Label:</label>
                <div class="col col-medium-8">
                    <input type="text" id="input2" class="input-block-level" placeholder="Digite aqui">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="syo-field col col-medium-8 col-large-6">
                <label class="col col-medium-4">Label sem campo:</label>
                <div class="col col-medium-8">
                    <span class="syo-field-text">Texto alinhado com o label</span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="syo-field col col-medium-8 col-large-6">
                <label class="col col-medium-4">Marque para confirmar:</label>
                <div class="col col-medium-8">
                    <input type="checkbox">
                </div>
            </div>
        </div>
        <div class="syo-field row">
            <div class="syo-field col col-medium-8 col-large-6">
                <label for="selectinput" class="col">Label block</label>
                <div class="col">
                    <select id="selectinput" class="input-block-level">
                        <option value="1">Opção 1</option>
                        <option value="2">Opção 2</option>
                        <option value="3">Opção 3</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <!--
                ATENÇÃO! Para block-level em um spinner precisamos de uma classe especial
                ".special-input-block-level" no elemento pai
            -->
            <div class="syo-field col col-medium-8 col-large-6">
                <div class="col special-input-block-level">
                    <input type="text" data-widget="spinner" placeholder="Spinner jQuery UI">
                </div>
            </div>
        </div>
    </fieldset>
    <fieldset>
        <legend>Inline</legend>
        <div class="syo-field syo-field-inline">
            <label>
                <input type="checkbox">
                Checkbox
            </label>
        </div>
        <div class="syo-field syo-field-inline">
            <input type="radio" id="input8">
            <label for="input8">Radio</label>
        </div>
        <div class="syo-field syo-field-inline">
            <label>
                <input type="radio">
                Radio
            </label>
        </div>
    </fieldset>
    <fieldset>
        <legend>Padrão</legend>
        <div class="syo-field">
            <input type="submit" value="Botão" class="syo-button">
            <input type="reset" value="Botão desabilitado" class="syo-button" disabled="disabled">
        </div>
    </fieldset>
</form>

Estados de sucesso/erro

É possível setar um estado de sucesso/erro em qualquer elemento do formulário. Basta adicionar a classe devida no elemento que você deseja aplicar tal estado:

Classe	Exemplo visual
`.syo-success`
`.syo-error`

Botões

Vários markups possíveis, apenas um estilo. Estilize qualquer tag com a classe .syo-button - no entanto, é preferível utilizá-la com as tags <a> e <button> para uma melhor renderização.

Botão	Classes	Descrição
	`syo-button`	Botão padrão para ações sem relevância.
	`syo-button syo-success`	Indica uma ação positiva ou de sucesso.
	`syo-button syo-error`	Indica uma ação negativa ou de erro.
	`syo-button syo-info`	Indica uma ação de informação.
	`syo-button syo-warning`	Indica uma ação de alteração ou crítica.
	`syo-button syo-button-link`	Um botão formatado como um link.

Várias Tags

É possível criar botões utilizando várias tags: <input>, <button> e <a>. Todas elas utilizando a classe .syo-button:

link

<button type="button" class="syo-button">button</button>
<a href="#" class="syo-button">link</a>
<input type="submit" class="syo-button" value="submit">
<input type="button" class="syo-button" value="input">
<input type="reset" class="syo-button" value="reset">

Tamanho Grande

Precisando utilizar um botão mais chamativo? Utilize a classe .syo-button-large.

<button type="button" class="syo-button syo-button-large">.syo-button-large</button>

Estado Ativo

Para dar o efeito de botão ativo, adicione a classe .syo-active.

<button class="syo-button syo-active" type="button">Botão ativo</button>
<button class="syo-button syo-active" type="button" disabled>Botão ativo desabilitado</button>

Estado Desabilitado

Para dar o efeito de botão desabilitado, adicione a classe .syo-disabled ou atribua a propriedade disabled (disponível apenas para a tag <button>).

Link Desabilitado

Tabelas

Tabelas devem ser utilizadas apenas para a exibição de dados tabulares. Existe um estilo padrão definido para todas as tabelas quando utilizando a classe .syo-table, bem como alguns estilos que adaptam o uso da tabela para situações específicas.
É possível definir uma linha como "ativa" adicionando na tr a classe .syo-active.

Dica: Também é possível utilizar as classes do grid com as tabelas dentro de um colgroup.

Base

Estilo base de todas as tabelas.

Coluna 1	Coluna 2	Coluna 3
Texto 1	Texto 2	Texto 3
Texto 1	Texto 2	Texto 3
Texto 1	Texto 2	Texto 3
Footer 1	Footer 2	Footer 3

<table class="syo-table">
    <colgroup>
        <col class="col-medium-3">
        <col class="col-medium-3">
        <col class="col-medium-6">
    </colgroup>
    <thead>
        <tr>
            <th>Coluna 1</th>
            <th>Coluna 2</th>
            <th>Coluna 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Texto 1</td>
            <td>Texto 2</td>
            <td>Texto 3</td>
        </tr>
        <tr>
            <td>Texto 1</td>
            <td>Texto 2</td>
        </tr>
        <tr class="syo-active">
            <td>Texto 1</td>
            <td>Texto 2</td>
            <td>Texto 3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Footer 1</td>
            <td>Footer 2</td>
            <td>Footer 3</td>
        </tr>
    </tfoot>
</table>

Striped

Este estilo fornece um destaque adicional para cada linha de modo a criar um contraste e facilitar a visualização dos dados. Basta adicionar a classe .syo-table-striped no elemento principal da tabela.

Coluna 1	Coluna 2	Coluna 3
Texto 1	Texto 2	Texto 3
Texto 1	Texto 2	Texto 3
Texto 1	Texto 2	Texto 3
Texto 1	Texto 2	Texto 3
Footer 1	Footer 2	Footer 3

<table class="syo-table syo-table-striped">
    ...
</table>

Hover

Estilo que destaca a linha que está sob o mouse. Utilize a classe .syo-table-hover para obter este estilo.
Nota: tabelas que também utilizam o estilo "Striped" exibido acima não receberão um destaque acentuado.

Coluna 1	Coluna 2	Coluna 3
Texto 1	Texto 2	Texto 3
Texto 1	Texto 2	Texto 3
Texto 1	Texto 2	Texto 3
Footer 1	Footer 2	Footer 3

<table class="syo-table syo-table-hover">
    <colgroup>
        <col class="col-medium-3">
        <col class="col-medium-3">
        <col class="col-medium-6">
    </colgroup>
    <thead>
        <tr>
            <th>Coluna 1</th>
            <th>Coluna 2</th>
            <th>Coluna 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Texto 1</td>
            <td>Texto 2</td>
            <td>Texto 3</td>
        </tr>
        <tr>
            <td>Texto 1</td>
            <td>Texto 2</td>
            <td>Texto 3</td>
        </tr>
        <tr>
            <td>Texto 1</td>
            <td>Texto 2</td>
            <td>Texto 3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Footer 1</td>
            <td>Footer 2</td>
            <td>Footer 3</td>
        </tr>
    </tfoot>
</table>

Estados

É possível utilizar todos os estados padrão do Syonet Bootstrap em cada célula ou linha de uma tabela. Eles são os seguintes:

.syo-success
.syo-error
.syo-active

Coluna 1	Coluna 2	Coluna 3
1	Erro nesta célula!	3
1	2	3
1	2	3
1	2	3
1	2	3

<table class="syo-table">
    <thead>
        <tr>
            <th>Coluna 1</th>
            <th>Coluna 2</th>
            <th>Coluna 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td class="syo-error">Erro nesta célula!</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td class="syo-success">1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr class="syo-success">
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr class="syo-active">
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

Tabelas Responsivas

Uma das melhores funcionalidades das tabelas do Syonet Bootstrap é a possibilidade de se utilizar tabelas responsivas.
Para fazer uma tabela responsiva, siga as seguintes etapas:

Adicione a classe .syo-table-responsive na tabela
Em cada td do conteúdo da tabela, adicione um atributo data-title que conterá o valor daquela célula.
Redimensione o navegador ou então acesse a página em um dispositivo menor.

Veja no exemplo a seguir como fica:

Coluna 1	Coluna 2	Coluna 3
Texto 1	Texto 2	Texto 3
Texto 1	Texto 2	Texto 3
Texto 1	Texto 2	Texto 3

<table class="syo-table syo-table-responsive">
    <thead>
        <tr>
            <th>Coluna 1</th>
            <th>Coluna 2</th>
            <th>Coluna 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-title="Coluna 1">Texto 1</td>
            <td data-title="Coluna 2">Texto 2</td>
            <td data-title="Coluna 3">Texto 3</td>
        </tr>
        <tr>
            <td data-title="Coluna 1">Texto 1</td>
              <td data-title="Coluna 2">Texto 2</td>
            <td data-title="Coluna 3">Texto 3</td>
        </tr>
        <tr>
            <td data-title="Coluna 1">Texto 1</td>
            <td data-title="Coluna 2">Texto 2</td>
            <td data-title="Coluna 3">Texto 3</td>
        </tr>
    </tbody>
</table>

Ícones

O Syonet Bootstrap vem com as centenas de ícones abaixo, disponibilizados por uma combinação de fonte icônicas open source.
Abaixo uma lista de todos eles e suas respectivas classes CSS.

Pesquisar ícone:

Para utilizar qualquer um deles, basta colocar a classe desejada em seu elemento. Por exemplo:

<i class="icon-home"></i>

Icone Giratório

É possivel também obter icones giratórios. Basta adicionar a classe .icon-spin.
Note que o melhor resultado pode ser obtido com o icone .icon-spinner.

<i class="icon-spinner icon-spin"></i>

Estilos de Icones

É possível aplicar alguns estilos aos icones para torná-los diferentes em vários casos.

Icone Circular

Aplique a classe .syo-circle para fazer o icone aparecer dentro de um círculo.
Os estilos de estado também estão disponíveis.

<i class="icon-home syo-circle"></i>
<i class="icon-home syo-circle syo-success"></i>
<i class="icon-home syo-circle syo-error"></i>
<i class="icon-home syo-circle syo-warning"></i>
<i class="icon-home syo-circle syo-info"></i>
<i class="icon-home syo-circle syo-active"></i>

Design Responsivo

Para facilitar o desenvolvimento responsivo, utilize estas classes, que exibem/ocultam conteúdo por tamanho de tela.
Abaixo está uma tabela com as classes disponíveis e o seu efeito em uma tela diferente.

Classe	Minúsculo < 768px	Pequeno ≥ 768px	Médio ≥ 980px	Grandes ≥ 1200px
`.visible-tiny`	Visível	Oculto	Oculto	Oculto
`.hidden-tiny`	Oculto	Visível	Visível	Visível
`.visible-small`	Oculto	Visível	Oculto	Oculto
`.hidden-small`	Visível	Oculto	Visível	Visível
`.visible-medium`	Oculto	Oculto	Visível	Oculto
`.hidden-medium`	Visível	Visível	Oculto	Visível
`.visible-large`	Oculto	Oculto	Oculto	Visível
`.hidden-large`	Visível	Visível	Visível	Oculto

Teste das classes responsivas

Redimensione o seu browser ou então carregue esta página noutros dispositivos para testar as classes abaixo.
O retângulo com um check verde quer dizer que o efeito está ativo na sua resolução de tela atual.

Visível em...

Smartphones Smartphones
Tablet Tablet
Desktop Desktop

Classes Utilitárias

Algumas classes que podem lhe ajudar em um desenvolvimento mais rápido.

.syo-hidden

Oculta um elemento da página.

Eu estou visível

Eu não estou visível

<p>Eu estou visível</p>
<p class="syo-hidden">Eu não estou visível</p>

.clearfix

Limpa o float em qualquer elemento.

Estou com float e sem clearfix

Estou com float e clearfix

Não estou com float

<div class="syo-pull-left">Estou com float e sem clearfix</div>
<div class="clearfix">
    <div class="syo-pull-left">Estou com float e clearfix</div>
</div>

<div class="syo-pull-left">Não estou com float</div>

.text-overflow

Adiciona reticências automaticamente a um elemento cujo texto extrapola o seu container.
Importante Elementos que não são display: block precisarão ter uma largura definida.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue tristique vehicula. In condimentum, libero volutpat pellentesque suscipit, orci enim consectetur massa, sit amet egestas tellus metus eget eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue tristique vehicula. In condimentum, libero volutpat pellentesque suscipit, orci enim consectetur massa, sit amet egestas tellus metus eget eros.

<p class="text-overflow">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue tristique vehicula.
    In condimentum, libero volutpat pellentesque suscipit, orci enim consectetur massa, sit amet egestas
    tellus metus eget eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue
    tristique vehicula. In condimentum, libero volutpat pellentesque suscipit, orci enim consectetur
    massa, sit amet egestas tellus metus eget eros.
</p>

.syo-pull-left e .syo-pull-right

Aplica ao elemento um float: left ou float: right, respectivamente.

Estou com float à esquerda

Estou com float à direita

<div class="clearfix" style="max-width: 50%">
    <div class="syo-pull-left">Estou com float à esquerda</div>
    <div class="syo-pull-right">Estou com float à direita</div>
</div>

Cor de texto

Também é possível usar classes que aplicam uma cor de contexto ao texto de um elemento, usando quaisquer dos contextos difundidos no Syonet Bootstrap.

Classe	Estilo
`.syo-text-success`	Lorem ipsum dolor sit amet
`.syo-text-warning`	Lorem ipsum dolor sit amet
`.syo-text-error`	Lorem ipsum dolor sit amet
`.syo-text-info`	Lorem ipsum dolor sit amet
`.syo-text-default`	Lorem ipsum dolor sit amet