Utilizando o Bootstrap com ASP.NET

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.

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