Web, .NET, Apps

Posts Tagged "cerulean"

Bootswatch III – Alterando o tema

Bootswatch III – Alterando o tema

By on abr 21, 2014 in Bootstrap, Bootswatch, CSS3, HTML5 | 16.118 comments

Nos artigos anteriores, aprendemos sobre como implementar um menu navbar de forma rápida e eficiente, aplicando um estilo pronto da biblioteca Bootswatch. No exemplo anterior, utilizamos em nosso projeto o tema chamado “united”. Este tema tem como foco a cor alaranjada e uma série de disposições para outros controles HTML. Abra o projeto PedroDesenvolve.Bootstrap.UI.WEB e rode: Por enquanto, está aparecendo desta forma. Neste artigo, vamos alterar o tema de “united” para “cerulean”. Escolhi o “cerulean” por ser um dos temas que mais difere do “united”. Entre no site do Bootswatch e acesse o tema “Cerulean”, através da barra de menu: Perceba como o layout é diferente do que estamos utilizando em nossa navbar: Como no artigo anterior, você vai criar em seu projeto uma nova pasta com o tema que iremos implementar. Isso para melhor controle e organização: Importe o arquivo de estilos do tema para o seu projeto: Agora, na chamada do CSS, troque apenas o nome do tema, no caso de “united” para “cerulean”:   Pronto! Agora é só rodar e ver os resultados: Para qualquer outro tema é só realizar os mesmos passos. A única diferença nesse exemplo foi termos precisado baixar o bootstrap.min.css do tema que desejamos. Cada tema tem o seu, e por isso foi interessante separá-los em pastas para quando for feita a alteração, apenas mudarmos o nome do tema na chamada do código-fonte. Divirta-se e faça os seus...

Read More
Bootswatch I – Conhecendo os temas para Bootstrap

Bootswatch I – Conhecendo os temas para Bootstrap

By on abr 20, 2014 in Bootstrap, Bootswatch, CSS3, HTML5 | 8.317 comments

Vimos e implementamos nos artigos anteriores a biblioteca ágil para desenvolvimento de front-end chamada Bootstrap. Com ela, podemos fazer layouts rápidos, ricos e bonitos, além de usufruir de uma boa performance. O bootswatch é uma biblioteca auxiliar ao bootstrap. Ambos estão perfeitamente ligados um ao outro. Foram desenvolvidas vários temas que podemos aplicar aos bootstraps do layout web. É isso que veremos aqui. Primeiramente, acesse o site do Bootswatch: http://bootswatch.com/. Use a barra de rolagem de seu navegador e desça um pouco. Você verá os temas disponíveis para o bootstrap, com as opções de visualização e download. Dê uma olhada nos temas disponíveis para utilizarmos posteriormente:   No exemplo que fizemos com o Bootstrap, iremos implementar o Bootswatch United, que é um tema alaranjado. Você pode escolher o que mais lhe agradar também. Na sessão do United, clique no botão azul “Preview” para analisar o que o bootswatch pode fazer em questão de layout. Veja as implementações para o tema United: United Navbar: United Buttons: United Tipografia:   United Tables:   United Forms: United Estruturas de Navegação: United Indicators: United Progress Bars: United Containers: United Dialogs: Agora que vimos as implementações disponíveis para este tema, incluiremos em nosso projeto no próximo...

Read More