Utilizando o Bootstrap com ASP.NET

Conheça neste artigo alguns dos componentes do Bootstrap framework para a construção de páginas web com ASP.NET. Confira!

Fique por dentro
Este artigo é útil porque aborda a utilização de alguns componentes do framework Bootstrap que ajudam o desenvolvedor na criação de páginas responsivas de forma rápida, mantendo um design agradável ao usuário final. Veremos como incluir o framework em um projeto ASP.NET podendo utilizar os seus mais variados componentes.

O Bootstrap é um framework para desenvolvimento Front-End de páginas para web com principal foco em mobile (mobile first). Desenvolvido e utilizado internamente pelo Twitter, acabou caindo no gosto dos desenvolvedores e virou um projeto open source que traz vários elementos e funções personalizáveis baseados em HTML, CSS e JS.

Guia do artigo:

Ao fazer o uso desse framework ganharemos mais flexibilidade e tempo no desenvolvimento das aplicações, sendo bastante útil ao iniciarmos um projeto do zero e facilitando sua prototipação seguindo padrões de um design minimalista. Ele apresenta uma série de componentes que estão disponíveis para as nossas aplicações web, tais como:

  • Glyphicons;
  • Dropdowns;
  • Button groups;
  • Button dropdowns;
  • Navs;
  • Navbars;
  • Alerts;
  • Outros.

Dependendo da aplicação que você irá desenvolver, somente o uso do Bootstrap não será suficiente, pois o mesmo é baseado apenas no front-end (interface do usuário, responsável pela coleta de entradas da aplicação) da aplicação web, sendo assim se faz necessário também o uso de uma linguagem de programação que lida com as funcionalidades das regras de negócio.

Com esse cenário, neste artigo, iremos mostrar como utilizá-lo juntamente com o ASP.NET, utilizando a linguagem C# na IDE Visual Studio.

Criando uma aplicação

Para iniciar uma aplicação com Bootstrap, primeiramente é necessário fazer o download dos arquivos através da URL disponível na seção Links (neste artigo utilizaremos a versão 3.3.6). Após o seu download, teremos a estrutura de pastas e arquivos apresentada na Figura 1.

Figura 1. Estrutura das pastas e arquivos do Bootstrap

Algumas funções do Bootstrap utilizam a biblioteca jQuery, por isso também a utilizaremos no nosso artigo — o download da biblioteca pode ser feito na página disponível na seção Links. Para a versão do Bootstrap que estamos utilizando é necessário que o jQuery esteja entre a versão 1.9.1 e a versão 3 para que não haja incompatibilidade — para este artigo escolhemos a versão 1.12.4. Como iremos utilizar o jQuery apenas para o funcionamento do Bootstrap, optaremos neste artigo por sua versão comprimida, pois ela tem apenas uma linha de código, o que facilita a sua leitura pelo browser.

Agora, no Visual Studio, será preciso criar um novo projeto ASP.NET Web Application. Daremos o nome Bootstrap para a nossa aplicação conforme a Figura 2 e na próxima tela iremos selecionar a opção Empty como na Figura 3.

Figura 2. Criando um projeto ASP.NET
Figura 3. Escolhendo projeto em branco

Vamos adicionar ao projeto uma nova pasta, chamada Content, e dentro dessa pasta criaremos outra, chamada CSS, na qual devemos incluir o arquivo bootstrap.css, que está na pasta CSS do Bootstrap que fizemos download. Ainda na pasta Content, criaremos uma pasta chamada Fonts e incluiremos os arquivos de fontes que integram ao Bootstrap. Na raiz do projeto que criamos há uma pasta chamada scripts; nela iremos criar uma pasta JS e incluir o arquivo JavaScript e do jQuery. A estrutura do projeto deve ficar semelhante à Figura 4.

Figura 4. Incluindo o Bootstrap no projeto

Criaremos um novo Web Form com o nome Home.aspx para que possamos incluir os exemplos do Bootstrap. Na Listagem 1, criaremos as referências dos arquivos CSS, JS e jQuery para o funcionamento do framework.

1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="Bootstrap.Home" %> 2. <!DOCTYPE html> 3. <html xmlns="http://www.w3.org/1999/xhtml"> 4. <head runat="server"> 5. <title></title> 6. <!--CSS Bootstrap--> 7. <link href="Content/CSS/Bootstrap.css" rel="stylesheet" /> 8. </head> 9. <body> 10. <form id="form1" runat="server"> 11. <div> 12. </div> 13. </form> 14. <!--Jquery--> 15. <script src="scripts/JS/jquery-1.12.4.min.js"></script> 16. <!--JavaScript Bootstrap--> 17. <script src="scripts/JS/Bootstrap.js"></script> 18. </body> 19. </html>
Listagem 1. Web Form com Bootstrap referenciado

Utilizando Glyphicons

Os Glyphicons são uma biblioteca extensa de ícones vetoriais (verificar a URL na seção Links). Normalmente essa biblioteca não está disponível livremente, é uma biblioteca paga, porém o criador da mesma disponibilizou mais de 250 ícones para utilização no Bootstrap, os quais se encontram na pasta Fonts.

Para a utilização dos ícones do Glyphicons é necessário entender alguns pontos a fim de se obter um bom funcionamento, a saber:

  • Todos os ícones exigem duas classes, uma para base e outra individual para o ícone;" [...] continue lendo...

Artigos relacionados