65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 Twitter Bootstrap 转换 ASP.NET MVC3 默认模板

Aniruddha Guin
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.48/5 (12投票s)

2012年6月18日

CPOL

5分钟阅读

viewsIcon

68000

本文面向初学者，演示如何使用 Twitter Bootstrap 来美化默认的 MVC3 模板。

引言

Visual Studio 2010 提供的 ASP.NET MVC3 默认模板是一个非常有用的工具，它通过提供结构化的项目模板，使开发人员能够快速创建内容。 Twitter Bootstrap 也因其提供了一个简单的 HTML、CSS 和 JavaScript 框架而广受欢迎，使开发人员能够轻松创建出色的视觉效果。本文将讨论如何将这两个工具结合起来，并在此基础上进行构建。

背景 

在很多情况下，需要快速准备好一些内容，以便向客户进行演示。Visual Studio 2010 附带的 ASP.NET MVC3 默认模板为 Web 应用程序提供了一个良好的起始模板，可以开始构建。虽然该模板在外观和感觉上是正确的，因为它专注于 MVC3 架构，并将表示细节留给开发人员，但我认为更漂亮的 UI 会给客户留下更深刻的印象。在原型设计过程中，我们无法在此方面投入太多时间。Twitter 的 Bootstrap 提供了这种快速创建更漂亮 UI 的帮助。

使用代码

1. 创建一个新的 ASP .NET MVC3 项目

这是基本步骤，实际上不需要太多解释。我们将从 Visual Studio 2010 中选择 ASP.NET MVC3 Web Application Template 来创建一个新的 ASP .NET Web 项目。

 

我将我的项目命名为 MVC3Bootstrap。我使用了具有 Razor 视图引擎的 Internet application 模板。

 

2. 从 Twitter 下载 Bootstrap

您可以从以下 github 网站 下载 Bootstrap。

Bootstrap 提供了许多自定义选项以满足您的需求。您可以从组件、插件等中进行选择。此外，您还可以通过在适当的 less 变量中提供值来选择自定义大量样式选项。该网站的文档非常完善，可以解释您需要更改什么才能获得期望的效果。例如，要将导航栏的颜色从默认的黑色更改为我想要的色调，我更改了变量 @navbarBackground、@navbarBackgroundHighlight、@navbarText、@navbarLinkColor、@navbarLinkColorHover、@navbarLinkColorActive 的值。就本文而言，我们不会深入探讨个别自定义选项，而是下载了整个捆绑包。

Bootstrap 下载包含了以下 Javascript 文件：

  • bootstrap.js
  • bootstrap.min.js

CSS 文件：

  • bootstrap.css
  • bootstrap.min.css
  • bootstrap.responsive.css
  • bootstrap-responsive.min.css

图像文件：

  • glyphicons-halflings.png
  • glyphicons-halflings-white.png

3. 将 Twitter UI 框架添加到我们的项目中

我在项目模板的 Scripts 文件夹下创建了一个名为 "bootstrap" 的文件夹，并将上面提到的 JavaScript 文件添加到了该文件夹中。

我在项目模板的 Content 文件夹下创建了一个名为 "bootstrap" 的文件夹，并在其下创建了两个名为 "css" 和 "img" 的子文件夹。我将 .css 文件添加到了 css 文件夹，将 .png 文件添加到了 img 文件夹。

 

注意：框架假定 .png 图像位于 .css 文件所在文件夹的父文件夹下的名为 "img" 的文件夹中。

4. 添加 CSS

打开 _Layout.cshtml 文件，并在 head 标签内现有内容的末尾添加以下两行。

<link href="@Url.Content("~/Content/bootstrap/css/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap/css/bootstrap-responsive.min.css")" rel="stylesheet" type="text/css" />

您无需删除任何现有内容。

注意：我们需要确保响应式 CSS 出现在主 CSS 之后。

5. 添加 JavaScript

将 JavaScript 文件添加到页面内容的末尾是一种好习惯。我在 _Layout.cshtml 文件的 body 标签结束之前添加了以下两行。

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/bootstrap/bootstrap.min.js")" type="text/javascript"></script>

注意：jQuery 文件已添加。但它在 head 标签内。我已将其与 bootstrap JS 一起移至下方。我使用的 jQuery 版本比 Visual Studio 模板默认附带的版本要新。您可以从 jQuery 网站下载最新版本。

6. 运行项目

如果您现在以调试模式运行项目，它看起来会非常奇怪。事实上，您几乎只能看到 Home 和 About 选项卡。但一切都没问题。我们可以解决这个问题。

7. 修改 Site.css

a) 打开 Site.css 文件，查找 "header h1, #header h1" 样式项。我将其替换为以下块。

header h1, #header h1 {
    font-weight: normal;
    padding: 5px 0;
    margin: 0;
    color: #5c87b2;
    border: none;
    line-height: 2em;
    font-size: 20px !important;
    text-shadow: 1px 1px 1px #111;
}

如果我们现在重新加载主页，我们将能够看到顶部写着 "My MVC Application"。

b) 查找 #logindisplay、#logindisplay a:link、#logindisplay a:visited 和 #logindisplay a:hover 样式项，并将 color 属性从白色更改为 #555。

#logindisplay {
    font-size: 1.1em;
    display: block;
    text-align: right;
    margin: 10px;
    color: #555;
}
 
#logindisplay a:link {
    color: #555;
    text-decoration: underline;
}
 
#logindisplay a:visited {
    color: #555;
    text-decoration: underline;
}
 
#logindisplay a:hover {
    color: #555;
    text-decoration: none;
}

如果我们重新加载页面，我们将能够看到登录链接。

8. 修改 Body

  1. 打开 _Layout.cshtml。
  2. 将 body 标签下顶部 div 标签的类名从 *page* 更改为 *container-fluid*。
  3. 将 <div id="menucontainer"> 从 <div id="header"> 中剪切出来，放到 <div id="header"> 标签结束的下方。
  4. 为 #header、#menucontainer、#main 和 #footer div 添加 *class="row-fluid"* 属性。
  5. 删除 #menucontainer 和 #main div 的 id 属性值。

现在我们的 _Layout.cshtml 文件应该看起来像这样：

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/bootstrap/css/bootstrap.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/bootstrap/css/bootstrap-responsive.min.css")" rel="stylesheet"
        type="text/css" />
</head>
<body>
    <div class="container-fluid">
        <div id="header" class="row-fluid">
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
        </div>
        <div id="" class="row-fluid">
            <ul id="menu">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
            </ul>
        </div>
        <div id="" class="row-fluid">
            @RenderBody()
        </div>
        <div id="footer" class="row-fluid">
        </div>
    </div>
        <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/bootstrap/bootstrap.min.js")" type="text/javascript"></script>
</body>
</html>

9. 修改导航菜单

将 <ul id="menu"> 标签及其内部内容替换为以下块：

<div class="navbar">
    <div class="navbar-inner">
        <div class="container-fluid">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            </a><a class="brand" href="http://www.mysite.org">My Demo App</a>
            <div class="nav-collapse">
                <ul class="nav">
                    <li class="@(ViewBag.Active == "Home" ? "active" : "")">
                        @Html.ActionLink("Home", "Index", "Home")
                    </li>
                    <li class="divider-vertical"></li>
                    <li class="@(ViewBag.Active == "About" ? "active" : "")">
                        @Html.ActionLink("About", "About", "Home")
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

如果我们现在重新加载页面，我们将能够看到导航栏已更改为 Twitter Bootstrap 风格。

注意：如果您不喜欢品牌下的那条线，可以打开 Site.css 并通过将 text-decoration 属性的值更改为 none 来修改 a:link 样式项。

10. 在品牌和网站标题之间选择

我们的页面现在有两个可以显示网站标题的地方。一个是在 MVC 模板自带的原始位置，另一个是导航栏中的品牌区域。我们可以根据自己的喜好保留其中一个。

11. 修改主页

打开 Index.cshtml 并将内容替换为以下内容：

@{
    ViewBag.Title = "Home Page";
    ViewBag.Active = "Home";
}
 
<div class="hero-unit">
    <h2>@ViewBag.Message</h2>
    <p>This is a template to demonstrate the way to beautify the default MVC3 
        template using Twitter Bootstrap website. It is pretty simple and easy.</p>
    <p><a href="http://asp.net/mvc" class="btn btn-primary btn-large" 
      style="color: White;">To learn more about ASP.NET MVC visit &raquo;</a></p>
</div>

12. 修改关于页面

在使用 Bootstrap 时，您可以通过多种方式设置页面布局。打开 About.cshtml 文件，并将其内容替换为以下内容，并查看示例。

@{
    ViewBag.Title = "About Us";
    ViewBag.Active = "About";
}
 
<div class="row-fluid">
<div class="span4">
    <h2>About 1</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, 
       tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
       Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
    <p><a class="btn" href="#">View details &raquo;</a></p>
</div>
<div class="span4">
    <h2>About 2</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, 
      tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
      Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
    <p><a class="btn" href="#">View details &raquo;</a></p>
</div>
<div class="span4">
    <h2>About 3</h2>
    <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. 
       Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, 
       tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
    <p><a class="btn" href="#">View details &raquo;</a></p>
</div>
</div>

好了，我们在这 12 个步骤中完成了，耗时不到 30 分钟，但提供了相当不错的 UI 和专业的外观，可以向客户展示用于原型设计。

现在模板应该看起来像这样：

您也可以像上面一样修改 LogOn 和 Register 页面。

© . All rights reserved.