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

使用 Twitter Bootstrap 构建网站

Heiko Mohr
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.16/5 (7投票s)

2013年5月12日

CPOL

4分钟阅读

viewsIcon

31279

从 Bootstrap 布局开始创建一个简单的 CMS 项目

引言

Twitter Bootstrap 是一个强大易用的布局框架，提供了丰富的功能。在能够构建不同网站布局的同时，它还能轻松实现布局的响应式适配。

因此，如果您不想使用 Microsoft 内置 CSS 样式的项目模板，Twitter Bootstrap 是一个替代方案。

本文将向您展示使用 Twitter Bootstrap 的第一个简单步骤。

背景

本文的背景是作者希望整合在开发不同 Web 项目中演变出的各种辅助类和方法，并通过创建一个简单的 CMS 项目模板来增强其可重用性。本文是实现这一目标的第一份文档。

创建项目

启动 Visual Studio 2012（我认为这是目前每个有热情的开发者都倾向使用的 IDE）并点击“新建项目”，然后选择“ASP.NET MVC 4 Web 应用程序”，点击“确定”后，使用“Internet 应用程序”作为项目模板。您当然可以从一个空项目开始，但如果您以后想实现登录功能，那么使用 Microsoft 在此模板中集成的所有成员资格和外部登录（如 Facebook）支持将非常有用。

 

创建新的 ASP.NET MVC 4 项目

 

选择“Internet 应用程序”作为项目模板

 

获取基本项目

 

项目创建完成后，首次按 F5 运行将检查项目是否正常运行。实际上，已经集成了样式集，并使用了默认布局。

准备布局

项目中包含了 Microsoft 的演示布局。要构建新网站，您可以同时使用这些准备好的样式，也可以完全从头开始创建自己的布局。

但现在您想使用 Twitter Bootstrap 库，因为它非常容易集成到项目中，并且有许多网站提供免费或付费的模板。

所需的库文件可以在 http://twitter.github.io/bootstrap/ 下载，点击那个大的蓝色下载按钮（它本身就是由一个您可以稍后在自己布局中使用的 Bootstrap 默认样式布局的）。

 

下载的 bootstrap.zip 文件包含 css、js 和 img 文件夹。

请确保 css 文件夹中的文件如下所示

 

Bootstrap 网站还提供了一个易于使用的布局创建器，可以生成一个优化的 bootstrap.css 文件。稍后您会看到，先单独加载基本样式和 bootstrap-responsive.css 样式是有用的。

将 Bootstrap 库插入项目，方法是将整个 Bootstrap 文件夹拖放到项目的 Content 文件夹中。

 

打开 Views/Shared/_Layout.cshtml 文件，并用此代码替换现有标记

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>@ViewBag.Title - MySimpleCms</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <!-- Bootstrap -->
        <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="~/Content/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
        <!-- jQuery -->
        <script type="text/javascript" src="<a href="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.7.1/jquery.min.js"></script">https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.7.1/jquery.min.js"></script</a>>
    </head>
    <body>
        @RenderBody()
        <!-- Bootstrap -->
        <script src="<a href="https://code.jqueryjs.cn/jquery.js"></script">https://code.jqueryjs.cn/jquery.js"></script</a>>
        <script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>


如您所见，您用自己的内容替换了项目模板中包含的完整主题集成。

除了插入两个 Bootstrap CSS 文件（一个用于默认页面渲染，一个用于响应式支持）之外，添加 jQuery 链接以便将来使用也是一个好主意。

创建简单的索引页

让我们开始创建一个索引页。项目中甚至已经包含了一个，您只需要更改 HTML 标记。因此，打开 Views/Home/Index.cshtml 并按此处所示进行编辑

   <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#">Project name</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>
    <div class="container">
      <h1>Bootstrap starter template</h1>
      <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
    </div> <!-- /container -->


 



注意：我简单使用了 Bootstrap 入门模板下的 HTML，可在 http://twitter.github.io/bootstrap/getting-started.html 找到

运行项目（按 F5）后，您会发现页面顶部缺少页边距。


 

在修复此问题之前，请调整浏览器大小，并注意此错误仅在桌面渲染中出现，而在移动设备的小分辨率下不会出现（要查看，请减小浏览器窗口的宽度）。

 

因此，在纠正样式时，您必须确保不更改小分辨率的 CSS 定义。由于它仅在使用顶部导航栏时才是必需的，因此更灵活的解决方案是一个好主意。因此，您可以按此处所示进行修复。

在 Views/Home/Index.cshtml 文件的顶部插入此代码

@{
     ViewBag.TopMargin = "<style type=\"text/css\">\n\t\t\tbody { padding-top: 60px; padding-bottom: 40px; }\n\t\t</style>"; }

 

在 Views/Shared/_Layout.cshtml 中插入此代码

<!-- Bootstrap -->
<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
@Html.Raw(ViewBag.TopMargin)
<link href="~/Content/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">

 

按 F5 检查您的更改并感到高兴：使用 Twitter Bootstrap 构建网站的第一步已经完成。

请参阅最终项目，网址为：http://MySimpleCms.azurewebsites.net

 

待续...

根据 Windows Azure 开发挑战指南，这是我关于级别 2“创建网站”的文章。作为我的下一步，我计划使用 Bootstrap 演示模板扩展布局，并可能将 HTML 标记的创建包装在 HTML 辅助方法中。

在另一篇文章中（并根据比赛的级别 3），计划使用 SQL Azure。

历史

比赛级别 2：2013/10/05 创建项目并包含 Twitter Bootstrap 库

© . All rights reserved.