Segui os passos, coloquei os arquivos css em Content/Css. E alterei o arquivo index:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="~/Content/Css/booltstrap.css"/>
<link rel="stylesheet" href="~/Content/Css/Site.css" />
</head>
<body>
<div class="container">
<div class="header">
<ul class="nav nav-pills pull-right">
<li>@Html.ActionLink("Produtos", "Index", "Produto")</li>
<li>@Html.ActionLink("Categorias", "Index", "Categorias")</li>
</ul>
<h3 class="text-muted">Caelum Estoque</h3>
</div>
<div id="conteudo">
<h1>Página Inicial da aplicação</h1>
</div>
</div>
</body>
</html>
No entanto quando executo não há qualquer formatação do bootstrap na página do navegador. No texto (e nos videos) é falado muito em Razor, mas até esse ponto não se disse que se trata o Razor. Imagino que seja um interpretador. E no video é dito que o Razor interpreta aquele ~ com sendo a página inicial do projeto.
Mas tudo que é para o tal Razor interpretar não tem que estar após @ ?
Na linha:
<link rel="stylesheet" href="~/Content/Css/booltstrap.css"/>
O Razor interpreta esse ~ dentro de uma string de uma tag html por que?