Recursos usados:

• .NET Core SDK ou superior
• Visual Studio 2017 Community

Criando o projeto no VS 2017

Vamos iniciar criando um projeto ASP .NET Core MVC para a seguir ajustar o código do arquivo _Layout.cshtml e depois a página principal na view Index.cshtml.

Abra o VS 2017 Community e crie um novo projeto ASP .NET Core usando o template Web Application(Model-View-Controller).

• Create New Project;
• Visual C# -> Web -> ASP .NET Core Web Application;
• Informe o nome AspCoreMvc_Layout
• Selecione o template Web Application(Model-View-Controller) , marque ASP .NET Core 2.0;

Executando a aplicação teremos o leiaute padrão clássico exibindo o carrousel e a página Index.cshtml do controlador HomeController.

Alterando a página de leiaue da aplicação: _Layout.cshtml

Vamos iniciar alterando a página de leiaute usada pela aplicação:  o arquivo _Layout.cshtml que esta na pasta Views/Shared.

Basicamente vou apenas alterar o título do menu para Casa dos Vinhos e o rodapé para exibir : Macoratti .net

Alterando a página principal : Index.cshtml

A página principal da aplicação é apresentanda pela view Index.cshtml que esta na pasta /Views/Home. Será esta view que iremos praticamente refazer para criar a nossa página.

Para criar páginas responsivas o bootstrap nos oferece um design que é constituido por um sistema de grade que é construído com flexbox e permite até 12 colunas na página. Se você não quiser usar as 12 colunas individualmente, você pode agrupar as colunas para criar colunas mais largas:
 

Assim, o sistema de grade é responsivo e as colunas serão reorganizadas automaticamente dependendo do tamanho da tela. Ao definir as colunas a sua soma não deve ser superior a 12 e você não é obrigado a usar todas as 12 colunas disponíveis.  Abaixo temos um exemplo de um leiaute :

Veja a documentação em : https://getbootstrap.com/docs/3.3/examples/grid/

O sistema de grade Bootstrap 4 possui cinco classes:
 

.col-xs (dispositivos extra pequenos - largura da tela inferior a 576px) .col-sm- (pequenos dispositivos - largura da tela igual ou superior a 576px) .col-md- (dispositivos médios - largura da tela igual ou superior a 768px) .col-lg- (dispositivos grandes - largura da tela igual ou superior a 992px) .col-xl- (xlarge devices - largura da tela igual ou superior a 1200px)

As classes acima podem ser combinadas para criar layouts mais dinâmicos e flexíveis.

Além disso o Bootstarp utiliza um tamanho de fonte padrão de 16px e sua altura de linha é 1.5.  A fonte-família padrão é "Helvetica Neue", Helvetica, Arial, sans-serif, e todos os elementos <p> têm margin-top: 0 e margin-bottom: 1rem (16px por padrão).

Veja mais sobre a tipografia usada no Bootstrap neste link: https://getbootstrap.com/docs/4.0/content/typography/

Vamos usar esses recursos para definir o novo leiaute da nossa página na view Index.cshtml.

Vamos iniciar definindo o título da página e o botão para acessar o catálog que esta em na primeira linha da grade
 

@{     ViewData["Title"] = "Home"; } <div class="row text-center">     <h1 style="font-size:4em;">Vinhos Clássicos</h1><hr />     <p class="text-muted">Verifique o nosso catálogo de vinhos finos.</p>     <a asp-action="Comprar" asp-controller="Vinhos" class="btn btn-primary btn-lg">Catálogo de Vinhos</a> </div>

O Bootstrap inclui 260 glifos do conjunto Glyphicon Halflings. Glyphicons Halflings normalmente não estão disponíveis gratuitamente, mas seu criador os disponibilizou para o Bootstrap gratuitamente.

Como agradecimento, você deve incluir um link de volta para Glyphicons sempre que possível.  Podemos usar glifos no texto, botões, barras de ferramentas, navegação ou formulários.

Veja a relação disponível aqui : https://glyphicons.bootstrapcheatsheets.com/

A seguir temos na segunda linha da grade a exibição de 4 ícones com textos descritivos.

Vamos iniciar definindo um contâiner <container-fluid> e a seguir uma seção <section id="sobre"> e depois 4 divs onde iremos usar os ícones e o texto:

Os contâineres são o elemento de layout mais básico no Bootstrap e são necessários ao usar nosso sistema de grade padrão. Podemos usar um recipiente responsivo de largura fixa (ou seja, as mudanças de largura máxima em cada ponto de interrupção) ou a largura fluida (o que significa que é 100% de largura o tempo todo).
 

<div class="container-fluid">     <section id="sobre">         <div class="row">             <div class="col-xs-12 col-sm-6 col-md-3 text-center">                 <span class="glyphicon glyphicon-ok text-primary"></span>                 <h3>Vinhos Exclusivos</h3>                 <p class="text-muted">Oferecemos somente vinhos exclusivos.</p>             </div>             <div class="col-xs-12 col-sm-6 col-md-3 text-center">                 <span class="glyphicon glyphicon-plane text-primary"></span>                 <h3>Prontos para entrega</h3>                 <p class="text-muted">Despachamos para todo o Brasil!</p>             </div>             <div class="col-xs-12 col-sm-6 col-md-3 text-center">                 <span class="glyphicon glyphicon-phone text-primary"></span>                 <h3>Layout Responsivo</h3>                 <p class="text-muted">Layout responsivo para aplicações no celular.</p>             </div>             <div class="col-xs-12 col-sm-6 col-md-3 text-center">                 <span class="glyphicon glyphicon-heart text-primary"></span>                 <h3>Preparados com amor</h3>                 <p class="text-muted">...e uvas, muitas uvas...</p>             </div>         </div>     </section> </div>

Para poder aumentar o tamanho das imagens usadas defina um estilo no ínicio da página usando o código a seguir:
 

@{ ViewData["Title"] = "Home"; } <style> .glyphicon { font-size: 4em; }     </style> ...

Para exibir as imagens na página podemos obter as imagens de diversas fontes. No exemplo vamos copiar as imagens usadas na pasta wwwroot/images :

E para exibir as imagens vamos usar uma partial view que eu vou chamar de _IndexPartial.cshtml e será criada na pasta Views/Home.

Clique com o botão direito do mouse sobre a pasta Home e a seguir clique em Add -> View;

Informe o nome _IndexPartial e marque : Create as a partial view e clique no botão Add;

Inclua o código abaixo nesta view:
 

<div class="row no-gutter"> @{ string[] imgs = { "~/images/portfolio/1.jpg", "~/images/portfolio/2.jpg", "~/images/portfolio/3.jpg", "~/images/portfolio/4.jpg", "~/images/portfolio/5.jpg" }; } @foreach (var img in imgs) { <div class="col-xs-2 col-md-2"> <a href="#" class="portfolio-box"> <img src="@Url.Content(img)" alt="Vinhos" width="380" height="200"/> </a> </div> } </div>

Uma alternativa ao código acima seria usar o código abaixo:
 

<div class="row no-gutter"> @for(int i = 1; i <= 6; i++) { <div class="col-xs-2 col-md-2"> <a href="#" class="portfolio-box"> <img src=@string.Format("~/images/portfolio/{0}.jpg",i) class="img-responsive" /> </a> </div> } </div>

Agora vamos usar a partial view criada na view Index.chstml :

Criamos uma nova seção <section id="portfolio"> e usando o Html Helper Html.PartialAsycn() usamos a nossa partial view para renderizar as imagens :

Para concluir temos a última linha da grade onde exibimos texto e 2 ícones. Vamos criar uma nova seção <section id="contato"> e definir a linha <div class="row">, e criar 3 divs para exibir os textos e os ícons glyphicon usados:

 <section id="contato">
        <div class="row">
            <div class="col-md-8 col-md-offset-2 text-center">
                <h2 class="section-heading">Fique em contato</h2>
                <hr />
                <p>O que esta esperando, faça o seu pedido de um vinho fino</p>
            </div>

            <div class="col-md-4 col-md-offset-2 text-center">
                <span class="glyphicon glyphicon-phone"></span>
                <p> 123 - 456 - 789</p>
            </div>

            <div class="col-md-4 text-center">
                <span class="glyphicon glyphicon-envelope"></span>
                <p><a href="mailto:macoratti@yahoo.com">macoratti@yahoo.com</a></p>
            </div>
        </div>
    </section>

E pronto temos o nosso leiaute definido para a página principal usando elementos básicos do Bootstrap.

Naturalmente poderíamos incrementar ainda mais a nossa página aplicando estilos e outros recursos.

Para ver templates bootstraps prontos para uso acesse o link : https://startbootstrap.com/

Pegue o código do projeto completo aqui :  AspCoreMvc_Layout.zip

"Naquele tempo, respondendo Jesus, disse: Graças te dou, ó Pai, Senhor do céu e da terra, que ocultaste estas coisas aos sábios e entendidos, e as revelaste aos pequeninos."
Mateus 11:25