# ASP.NET MVC Bootstrap 3 template to Bootstrap 4 template

###### tags: `.NetFramework` `Bootstrap`

ASP.NET MVC 範本專案建立後的Bootstrap版本預設為3.4.1版，view部分內容也是Bootstrap3的寫法。

首先直接更新Bootstrap(4.5.2)，因為相依性這邊會一併安裝popper.js，並將glyphicon移除(icon使用可參考 https://icones.netlify.app/)

:::warning
如果不需要將預設樣板改成Bootstrap 4，以下可以不用參考，直接更新nuget即可。
:::

這時首頁會從
變成

首先將Content資料夾內的預設建立的Site.css內容清空，或是將Site.css內`body`設定註解。

將原來的navbar區段

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

改為

<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-fixed-top">
    @Html.ActionLink("應用程式名稱", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">@Html.ActionLink("首頁", "Index", "Home", null, new { @class= "nav-link" })</li>
            <li class="nav-item">@Html.ActionLink("關於", "About", "Home", null, new { @class = "nav-link" })</li>
            <li class="nav-item">@Html.ActionLink("連絡人", "Contact", "Home", null, new { @class = "nav-link" })</li>
        </ul>
    </div>
</nav>

Home/Index.cshtml頁面內按鈕class由`btn-default`改為`btn-outline-secondary`，基本上預設樣板就改成Bootstrap 4了。