Web, .NET, Apps

Bootswatch

Bootswatch III – Alterando o tema

Bootswatch III – Alterando o tema

By on abr 21, 2014 in Bootstrap, Bootswatch, CSS3, HTML5 | 16.182 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 II – Implementando o estilo

Bootswatch II – Implementando o estilo

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

Abra o projeto do Bootstrap feito nos artigos anteriores. O nome do Projeto do Visual Studio 2013 é PedroDesenvolve.Bootstrap.UI.WEB. Vamos relembrar como está o mesmo até o momento. Compile a Solution: O nosso Bootstrap implementado é o padrão, ou seja, ainda não há nenhum estilo aplicado:   Vamos implementar o tema United do Bootswatch. Vá até o site http://bootswatch.com/, desça a barra de rolagem e encontre o tema “United”. Clique no menu “Download” e no menu dropdown que aparece, identifique a opção bootstrap.min.css. Clique com o botão direito do mouse nessa opção e clique em “Salvar Link Como…”:   Identifique sua pasta do projeto. Em “Content”, crie uma pasta chamada “united” e salve dentro da mesma: Se você perceber na sua Solution Explorer no Visual Studio, pode não estar visível a pasta united dentro da pasta Content. Vamos adicionar essa pasta ao nosso projeto. Clique com o botão direito do mouse sobre a pasta Content e escolha a opção “Open Folder in File Explorer”. Arraste a pasta united para Content:   Veja como deve estar: Agora que temos a biblioteca do tema importada, vamos implementá-la no código. Arraste o arquivo united/bootstrap.min.css para baixo da linha do último arquivo css do arquivo, para que fique dessa forma:   Se rodarmos a aplicação agora, perceberemos que nada muda, ou seja, a aparência está como no início. Mas o que está faltando? Falta a folha de estilos do Bootswatch! Vamos pegar esse arquivo rapidamente e chamá-lo antes do bootstrap que acabamos de inserir no código. Volte ao site do Bootswatch na opção do tema “united” e clique em “Preview”. Exiba o código-fonte da página e clique no link do Bootswatch: Como da vez anterior, salve o Bootswatch no seu projeto, repetindo os procedimentos anteriores: Arraste o arquivo salvo para dentro da pasta Content:   Importe o bootswatch para o código-fonte para que fique desta forma: Mesmo se testarmos agora, não acontecerá nada como resultado. E por quê? Porque não importamos o javascript responsavel pelo controle do bootswatch. Vá até o código-fonte onde você pegou o arquivo css e desça a barra de rolagem até embaixo. Você deverá copiar o arquivo bootswatch.js para dentro do seu projeto, mais precisamente na pasta Scripts: Adicione o...

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