Web, .NET, Apps

Posts Tagged "navbar"

Bootstrap III – Implementando o Navbar

Bootstrap III – Implementando o Navbar

By on abr 9, 2014 in Bootstrap, CSS3, HTML5 | 9.562 comments

Agora que temos a estrutura do HTML5 pronta juntamente com a biblioteca bootstrap instalada, é hora de implementarmos em nosso projeto. Abra o projeto SuaEmpresa.Bootstrap.UI.WEB, que no meu caso é PedroDesenvolve.Bootstrap.UI.WEB. Abra em seu navegador (de preferência, mas não obrigatoriamente, o Google Chroome) o site do Bootstrap: http://getbootstrap.com/. Ao entrar no site, clique na opção Components:   O download não precisa mais ser feito pelo link do site, já que no artigo anterior, fizemos através do Manager NuGetPackage do Visual Studio. Mas para quem usa o Dreamweaver, o Notepadd++ ou outro editor de códigos HTML, pode fazer pelo botão Download Bootstrap. Será baixado um zip com os scripts, configurações e folhas de estilo da biblioteca e você deverá apenas adaptá-los em seu projeto. No canto inferior direito da tela de componentes, escolha Navbar:   Veja o exemplo do componente e copie todo o código da tag nav:   Cole o código dentro das tags header, substituindo seu atual conteúdo:   Caso o código tenha sido colado em desordem, utilize a combinação de teclas Ctrl + K + D para identá-lo:   Agora, vamos rodar o projeto. Pressione a tecla F5 para ver os resultados:   Não se assuste com o resultado. O projeto está desconfigurado, pois faltam alguns elementos a serem declarados. Mas quais? Lembra-se dos arquivos que foram baixados da biblioteca Bootstrap? Pois os mesmos não foram chamados no documento. Vamos fazer isso agora. Atente-se à Solution Explorer. Arraste para dentro do tag head e abaixo da tag title o arquivo: <link href=”Content/bootstrap.min.css” rel=”stylesheet” />   É boa prática chamarmos sempre a versão min de qualquer tipo de biblioteca, desde que a mesma tenha disponível. Isso faz com que a página renderize com mais velocidade. Pressione a tecla F5 novamente e veja o novo resultado com os estilos aplicados:   Perceba que os estilos estão organizados agora, mas se clicarmos no menu dropdown, nada acontece.   Lembra de quando o Manager NuGet Package baixou a biblioteca e que tinha como dependência o JQuery? Pois é exatamente essa biblioteca que falta ser chamada. Arraste a versão min para uma linha antes de terminar a tag body, não esquecendo também do script do bootstrap:   Usualmente a chave para o funcionamento é...

Read More