Web, .NET, Apps

Posts Tagged "united"

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