Como trabalhar com guias em css3

Video: Position en CSS - Guia completa (2, relative)

Muitos desenvolvedores usar interfaces com guias para reduzir a complexidade da aplicação. Se você pode chamar a atenção do usuário em um item de cada vez, você reduzir o potencial de entrada errante. Neste exemplo CSS3, você começa com uma chamada de função simples. (Você pode encontrar o código completo para este exemplo na pasta Capítulo 06Widgets do código para download como Tabs.HTML.)

Video: Curso CSS

$ (Function () {$ ("#Configuração") .tabs () -}) -

O truque para este exemplo está nas tags HTML, assim como foi para o exemplo Widget de acordeão. Existem algumas diferenças importantes na forma como você cria as duas páginas para obter a aparência desejada, como mostrado no seguinte código:

Video: Aula - Trabalhando com DIVs HTML e CSS

Observe que o

elementos são ido neste caso. Em vez de usar títulos para definir a distância entre elementos, você fornece uma lista não ordenada (

) em vez de. A lista deve conter a href a cada um dos
elementos na página. Não há qualquer diferença no conteúdo da página. Você também precisa fornecer algum CSS para formatar o controle conforme mostrado.

Neste caso, o estilo #configuration define o tamanho total da interface com abas e o fato de que as guias têm-se centrado texto. O div #configuration muda o alinhamento do conteúdo para a esquerda.

Video: Personalizando com Bootswatch - Aula 10 - Curso Template com Bootstrap

Para fazer uma mudança, você clicar na guia que contém as informações que você quer ver. Você faz mudanças como normal. Clicando no botão Configuration Change envia as alterações para o servidor. Se você testar este exemplo, utilizando o mesmo processo que você fez para o exemplo acordeão, você começa precisamente os mesmos resultados - apenas a aparência da interface mudou.