Por: Yassin Nurmahomed

Componentes

O bootstrap disponibiliza um vasto conjunto de componentes visualmente apelativos, desde botões simples e abas de navegação a um 'carrossel' para transitar por elementos.

• Tabbable Tabs

As abas são geralmente utilizadas para separar conteúdo de acordo com a sua categoria. O bootstrap disponibiliza quatro tipos de abas: no topo, no base, a esquerda e a direita. A lógica das abas é implementada por um plugin para jQuery.

O componente é constituído por uma lista não ordenado cujos items são os títulos das abas e uma div para os conteúdos de cada aba, estes dois componentes são embrulhados em uma div parente com a classe 'tabbable' aplicada.

Para ativar o plugin JavaScript das abas é necessário ativar o componente executando o método $(#tabId).tab('show') ao carregar a página. O jQuery possui o método .ready() que garante que as funções passadas por parâmetro sejam executadas o mais cedo possível.

• Carrossel

O carrossel é um plugin genérico para circular entre elementos, pode ser muito útil para exibição dos posts mais interessantes em um blog ou para um simples slideshow.

O carrossel é ativado usando: $('.carousel').carousel(). Para parar a circulação pelos elementos usa-se: .carousel('pause').

Referências

webdesign.tutsplus.com
dev.twitter.com
twitter.github.com
lesscss.org