[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样式的使用说明。
-
在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组件的使用说明。
-
在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组件的显示结果。