Artigos .NET Utilizando o Bootstrap com ASP.NET
Por que eu devo ler este artigo: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.

Estrutura das pastas e arquivos do Bootstrap
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.

Criando um projeto ASP.NET
Figura 2. Criando um projeto ASP.NET
Escolhendo projeto em branco
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.

Incluindo o Bootstrap no projeto
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;
  • A classe de ícone não deverá ser inclusa com outros componentes, ou seja, não deve ser utilizada com classes de outros elementos. Para uma boa prática adicionaremos a tag <span> aninhada para aplicar a classe do ícone;
  • Devemos utilizar os ícones apenas em elementos vazios que não contenham nenhum tipo de texto ou elementos filhos.

Escondemos o ícone com o atributo hidden="true" como mostra a Listagem 2, pois quando for utilizada tecnologia assistiva (ver BOX 1) pode haver confusão na interpretação do CSS pelo leitor de tela.


1.  <button type="button" class="btn btn-default" aria-label="Alinhar na esquerda">
2.    <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
3.  </button>
Listagem 2. Utilizando Glyphicons como decoração
BOX 1: Tecnologia assistiva

Essa ...

Quer ler esse conteúdo completo? Tenha acesso completo