[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组件的显示结果。
参考数据
时间： 2024-10-21 08:13:43