[ASP.NET MVC] 使用Bootstrap套件

前言

在开发Web项目的时候，除了一些天赋异禀的开发人员之外，大多数的开发人员应该都跟我一样，对于如何建构出「美观」的用户接口而感到困扰。这时除了，加入美术人员这个选项之外，开发人员也可以自立自强，为Web项目内加入Bootstrap套件。透过使用Bootstrap套件中各种设计精美的样式、组件，来让Web项目的用户接口更加的美观大气，增加客户对于项目产出的好感度。本篇文章介绍如何在Web项目里使用Bootstrap套件，为自己留个纪录也希望能帮助到有需要的开发人员。

安装Bootstrap套件

在Web项目内使用Bootstrap套件，有一些前置作业要先完成。接下来的范例，从一个空的ASP.NET MVC项目开始建立，说明如何在这个项目内，完成使用Bootstrap套件的前置作业。

建立空白MVC项目。
使用NuGet安装Bootstrap套件。
加入Home控制器以及其对应的Index检视。

Index检视中加入Bootstrap套件的CSS参考、JavaScript参考，并且在html标签加入「lang="en"」属性。

<html lang="en">

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

    <!-- Styles -->

    <link href="/Content/bootstrap.css" rel="stylesheet">

</head>

<body>

    <!-- Contents -->

    <!-- Scripts -->

    <script src="/Scripts/jquery-1.9.0.js"></script>

    <script src="/Scripts/bootstrap.js"></script>

</body>

</html>

完成上述步骤也就完成使用Bootstrap套件的前置作业，后续就可以在body标签的「Contents」批注之后，加入各种页面内容。

套用Bootstrap样式

在网站页面上HTML卷标默认的显示样式，已经不能满足使用者的审美眼光。将页面上的HTML卷标套用Bootstrap样式来呈现，能提供更美观的用户接口。

在Bootstrap官网上，找寻Bootstrap样式的使用说明。
- http://getbootstrap.com/
在Bootstrap样式的使用说明中,找寻合适使用的样式及说明。

依照样式的说明，在body标签的「Contents」批注之后加入对应的页面内容。

<!-- Contents -->

<table class="table table-striped">

    <thead>

        <tr>

            <th>AAAAA</th>

            <th>BBBBB</th>

            <th>CCCCC</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>A0001</td>

            <td>B0001</td>

            <td>C0001</td>

        </tr>

        <tr>

            <td>A0002</td>

            <td>B0002</td>

            <td>C0002</td>

        </tr>

        <tr>

            <td>A0003</td>

            <td>B0003</td>

            <td>C0003</td>

        </tr>

    </tbody>

</table>

接着执行Web项目，就可以在浏览器上看到套用Bootstrap样式的显示结果。

此时对比HTML卷标默认的显示样式，两者只差异了「class="table table-striped"」属性，但呈现效果却有非常大的差异。

<!-- Contents -->

<table>

    <thead>

        <tr>

            <th>AAAAA</th>

            <th>BBBBB</th>

            <th>CCCCC</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>A0001</td>

            <td>B0001</td>

            <td>C0001</td>

        </tr>

        <tr>

            <td>A0002</td>

            <td>B0002</td>

            <td>C0002</td>

        </tr>

        <tr>

            <td>A0003</td>

            <td>B0003</td>

            <td>C0003</td>

        </tr>

    </tbody>

</table>

套用Bootstrap组件

在Bootstrap套件中还加入了许多Bootstrap组件，这些组件组合既有的HTML卷标，提供各种更符合使用者输入输出习惯的画面呈现。

在Bootstrap官网上，找寻Bootstrap组件的使用说明。
- http://getbootstrap.com/
在Bootstrap组件的使用说明中,找寻合适使用的组件及说明。

依照组件的说明，在body标签的「Contents」批注之后加入对应的页面内容。

<!-- Contents -->

<div class="progress">

    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">

        <span class="sr-only">40% Complete (success)</span>

    </div>

</div>

<div class="progress">

    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">

        <span class="sr-only">20% Complete</span>

    </div>

</div>

<div class="progress">

    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">

        <span class="sr-only">60% Complete (warning)</span>

    </div>

</div>

<div class="progress">

    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">

        <span class="sr-only">80% Complete (danger)</span>

    </div>

</div>

接着执行Web项目，就可以在浏览器上看到Bootstrap组件的显示结果。

参考数据