ASP .NET
MVC
- Usando os recursos do BootStrap - II
![]() |
Neste artigo vamos continuar o artigo anterior e vamos usar os recursos do BootStrap para alterar o leiaute e criar uma interface mais bonita e amigável. |
Na primeira parte do artigo criamos a aplicação MVC definindo o Model, o Controller e a View e obtivemos o seguinte resultado final:
Pois bem, vamos aplicar os recursos do BootStrap em nosso projeto de forma a tornar o leiaute mais bonito e amigável.
Recursos usados:
Aplicando o pacote BootStrap via Nuget
Abra o VS 2013 Express for web e clique em Open Project;
Selecione o projeto Mvc_BootStratp criado na primeira parte do artigo;
Vamos usar o Package Manager Console para instalar o pacote do BootStrap versão 3.
Clique no menu TOOLS -> Nuget Package Manager e a seguir em Package Manager Console;
A seguir digite a seguinte linha de comando na janela do console: Install-Package -version 3.0.3 bootstratp
Ao término do processo teremos os arquivos do bootstrap nas pasta Scripts(arquivos .js) e Content (arquivos .css), conforme mostra a figura abaixo:
![]() |
Estamos pronto para usar os recursos do bootstrap e vamos fazer isso no arquivo Index.cshtml que é a nossa view que é exibida ao usuário.
Vamos abrir o arquivo Index.cshtml na pasta /Views/Home e incluir entre as tags <head> as linhas de código que referenciam as folhas de estilo do bootstratp:
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />A seguir vamos incluir algumas tags e alterar algumas já existentes usando os recursos do bootstratp. Veja como deve ficar o código do arquivo Index.cshtml:
@using Mvc_BootStrap.Models;
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Votação</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
</head>
<body class="container">
<div class="panel panel-primary">
@if (ViewBag.timeSelecionado == null)
{
<h4 class="panel-heading">Qual time vai ser Campeão ?</h4>
}
else
{
<h4 class="panel-heading">Altere o seu voto : @ViewBag.timeSelecionado</h4>
}
<div class="panel-body">
@using (Html.BeginForm())
{
@Html.DropDownList("_time", new SelectList(Enum.GetValues(typeof(Time))), "Escolha um time", new { @class = "form-control" })
<div>
<button class ="btn-primary center-block" type="submit">Votar</button>
</div>
}
</div>
</div>
<div class="panel panel-primary">
<h5 class="table-heading">Resultados</h5>
<table class="table table-condensed table-striped">
<tr><th>Time</th><th>Votos</th></tr>
@foreach (Time t in Enum.GetValues(typeof(Time)))
{
<tr>
<td>@t</td>
<td>@Votos.GetVotos(t)</td>
</tr>
}
</table>
</div>
</body>
</html>
|
O código que foi incluído esta em azul. Eu não vou entrar em detalhes em todas as classes do BootStratp vou explicar apenas os recursos que usamos no exemplo:
Nome | Descrição |
btn | Estilo btn. Essa classe é aplicada em conjunto com um botão da classe theme, como btn-primary; |
btn-primary | Usando em conjunto com a classe btn para aplicar uma cor de tema a um botão; |
center-block | Centraliza elementos. Centralizamos o botão Votar. |
container | Centraliza o conteúdo do elemento. Usamos essa classe para o elemento body de forma a centralizar todo o seu conteúdo HTML. |
form-control | Aplica estilos em um elemento Form. Existe apenas um elemento form no nosso arquivo. |
panel | Agrupa um conteúdo relacionado. Usando com as classes panel-body e panel-heading para denotar as seções do panel; |
panel-body | Denota o conteúdo da seção do painel; |
panel-heading | Denota o cabeçalho do painel; |
panel-primary | Usado em conjunto com a classe panel para aplicar a cor de tema ao painel. |
table | Define uma tabela |
table-condensed | Usado em conjunto com a classe table para criar um leiaute compacte de tabela; |
tabe-striped | Usado em conjunto com a classe table para alternar a cor das linhas da tabela; |
As classes BootStrap são simples de usar e podem rapidamente criar um leiaute consistente para o HTMl renderizada por uma view.
No restante do código eu apliquei as classes para os elementos HTML estáticos e usei classes BootStrap com o método HTML Helper que gera o elemento Select a partir da enumeração dos valores das cores:
... @Html.DropDownList("_time", new SelectList(Enum.GetValues(typeof(Time))), "Escolha um time", new { @class = "form-control" }) ... |
Os HTML Helpers são métodos usados nas views Razors para gerar elementos HTML a partir dos dados do modelo.
Nota: HTML Helpers suportam a renderização dos controles HTML em uma exibição.
Executando o projeto novamente iremos obter o seguinte resultado:
Pegue o projeto completo aqui:
Mvc_BootStrap_2.zip
E
Deus limpará de seus olhos toda a lágrima; e não haverá mais morte, nem pranto,
nem clamor, nem dor; porque já as primeiras coisas são passadas.
Apocalipse 21:4
Veja os
Destaques e novidades do SUPER DVD Visual Basic
(sempre atualizado) : clique e confira !
Quer migrar para o VB .NET ?
Quer aprender C# ??
Quer aprender os conceitos da Programação Orientada a objetos ? Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ? |
Gostou ?
Compartilhe no Facebook
Compartilhe no Twitter
Referências: