Bootstrap Framework: Utilizando o Bootstrap com ASP.NET

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:

Criando uma aplicaç�o
Utilizando Glyphicons
Utilizando Dropdowns
Utilizando grupo de bot�es
Exemplo de grupo de bot�es
Dimensionando grupos de bot�es
Aninhando o dropdown em um grupo de bot�es
Grupo de bot�es na vertical
Grupo de bot�es justificados
Barra de ferramentas
Grupo de inputs (elementos para formul�rios)
Exemplo b�sico de formul�rios
Tamanho dos formul�rios
Bot�es em um formul�rio
Formul�rios com m�ltiplos bot�es
Checkbox e radio no formul�rio
Painel de navegaç�o
Abas
P�lulas
Barra de navegaç�o
Paginaç�o
Rastro de navegaç�o
Alertas
Thumbnails

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

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!

Criando uma aplicaç�o

Utilizando Glyphicons

Artigos relacionados