プログラムの事とか

お約束ですが「掲載内容は私個人の見解です」

ASP.NET MVCのプロジェクトをbootstrap 4にあげる

タイトルが若干意味不明感ありますが気にしない

f:id:puni-o:20180319131215j:plain

  • そのまま実行します

f:id:puni-o:20180319131319j:plain

見飽きたいつもの画面がブラウザに現れます

  • NuGetパッケージの管理を見てみます

f:id:puni-o:20180319131517j:plain

こんなに溜まってるよぉぉぉ~~~

  • 一括チェックして更新します

f:id:puni-o:20180319131712j:plain

深夜にパンツ一枚で仕事するくらいスッキリしました。常にこうありたいものです

  • もう一回実行

f:id:puni-o:20180319131928j:plain

Oh...

bootstrapを3から4に上げたのが原因ですね

とりあえずnavbar(画面上のやつ)を何とかすればごまかせるでしょう

_Layout.cshtmlを開いて

変更前

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("アプリケーション名", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("ホーム", "Index", "Home")</li>
                <li>@Html.ActionLink("詳細", "About", "Home")</li>
                <li>@Html.ActionLink("問い合わせ", "Contact", "Home")</li>
            </ul>
        </div>
    </div>
</div>

変更後

<div class="navbar navbar-dark fixed-top bg-dark navbar-expand-md">
    @Html.ActionLink("アプリケーション名", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="nav-item">@Html.ActionLink("ホーム", "Index", "Home", new { @class = "nav-link" })</li>
            <li class="nav-item">@Html.ActionLink("詳細", "About", "Home", new { @class = "nav-link" })</li>
            <li class="nav-item">@Html.ActionLink("問い合わせ", "Contact", "Home", new { @class = "nav-link" })</li>
        </ul>
    </div>
</div>

div.containerとdiv.navbar-header消してクラス追加したり変更したりすれば出来上がり

実行したらこんな感じ f:id:puni-o:20180319132448j:plain

jumbotronの中身も微妙だけど気にしない