Bootstrap 是由 Twitter 所开发的一个免费的网页框架, 它提供了许多从基本到进阶的 CSS 和 JavaScript 功能, 让网页开发者可以很快速地把网页架起来, 同时还兼顾了还算不错的美感。通常, 网页设计师不会、也不懂得美工设计, 所以我们如果只是很单地把网页建立起来, 很不幸的, 这个网页通常不会跟「美观」这两个字有交集。但是有了 Bootstrap, 你的网页很容易就能让人为之惊艳 (尤其是跟之前的做法对比的话)。
当然, 我不是说 Bootstrap 从此会让美工人员丢掉工作。我相信美工人员也会感谢 Bootstrap 的存在, 这样至少可以让网页在进行layout 时省去一些功夫, 能够早一点下班。其实 Bootstrap 的应用方式并不难, 但是对于完全没有概念的人, 仍然存在着一点门坎。在这里, 让我花点篇幅解释一下。
Bootstrap 基础
说穿了, 对初学者而言, 你只需要搞懂两点, 就可以掌扫 Bootstrap 的基础原理。第一点, 就是它的所谓 Grid 系统; 第二点, 就是藉由加入组件的 CSS 类别以更改它的长相。以下, 我会做个简单地说明。
所谓的 Grid 系统, 你不要顾名思义, 以为它跟 ASP.NET 的 GridView 控件有任何关系。事实上, 这两者一点关系也没有。
但是如果你把它想象为就是像 Excel 的那种网格线布置, 或者 HTML 的 <table> 组件, 你应该就能立刻进入情况。
当你打开 Excel 时, 一张空的工作表应该长得像如下的样子:
[]
这是一张十二栏的表。
如果你要使用这个表来画你的网页的 Layout 的话, 或许你会这样画:
[]
这么一来, Header 就是一个横跨十二栏宽的区块, 然后左边的 Navigation 占两个栏宽、Content 占去右边十个栏宽, 而最下方的 Footer 又是横跨十二个栏宽。
Bootstrap 框架的 Grid 系统就是基于类似的原理而设计的。所以, 你只需要在程序中这样写就行了:
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Basic Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap-responsive.css" rel="stylesheet" />
<style type="text/css"> div { border: 1px solid; } </style>
</head>
<body>
<div class="container">
<div class="row-fluid">
<div class="span12">
Header</div></div>
<div class="row-fluid">
<div class="span2">
Navigator</div>
<div class="span10">
Content</div></div>
<div class="row-fluid">
<div class="span12">
Footer</div></div></div>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/bootstrap.js"></script>
</body>
</html>
程序 1. 套用 Bootstrap 的 HTML 网页
实际执行结果如下图所示:
[]
你可以发现, 你可以藉由控制 span* 而决定每个方块有多宽, 其方式则是在 div 元素中加入相对的 CSS 类别。
在上面程序中, 最重要的部份有如下几点:
请使用 HTML5 语法标示 (即第一行的 <!DOCTYPE html>)。 加上 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 这一行。 把 bootstrap.css 和 bootstrap-responsive.css 两个档案加上去。在这里, 它的路径是 NuGet 套件指定的; 我待会会再提到。 请注意各个 div 元素的写法。其原则很像 table 元素, 在最外面包一个 div, 其 CSS 类别为 container (模拟为 table), 每一列都是 row (模拟为 tr), 中间则是 span* (模拟为 td – colspan), 每一列不要超过 12 个 span 的宽度就行。 在程序中加上 jquery 和 bootstrap.js 这两个 JavaScript 档案。
上述这五个注意事项就是一个 bootstrap 网页的基本写法。其中除了 div 群组的写法之外, 其它部份几乎都不需要变动。所以, 你也许可以看出来, 这个框架非常适合以 ASP.NET 的 Master Page 来实作。不过, 为了让这个范例程序容易被了解, 所以我把每个 Div 元素都加上边框。实际上不需要这样做。
在 ASP.NET 项目中取得 Bootstrap
你可以从 Bootstrap 官网中下载 Bootstrap, 也可以从 VS2012 中直接下载并安装 (VS2013 建立的 Web Form 项目已经预设会加载 Bootstrap, 无需另外安装)。假设我现在从 VS2012 中新增了一个 ASP.NET 的 Web Form 空白项目, 我可以使用 NuGet 直接搜寻 bootstrap 并且进行安装:
[]
安装完毕之后, NuGet 会把相关档案拷贝到项目的子目录里面:
[]
上图中以黄色底色标示的部份, 就是 Bootstrap 会用到的所有档案 (VS2013 预设加载 Bootstrap, 其路径又略有不同, 请读者留意)。你可以发现, NuGet 可能会一并下载 jQuery 1.9.1 的版本, 你可以自行选择是否另外下载 1.10.2 或者 2.0.2 以上的版本。
在 Bootstrap 官网中, 你可以客制化 Bootstrap 的档案内容以节省空间。如果你下载了这个客制化的版本, 那么你可以把原来的版本覆盖上去, 或者另外找地方放置, 或者改名; 你应该自己想清楚应该如何进行版本的管理。
值得注意的是, 在 bootstrap.css 中, 如果你搜寻一下 "../img/glyphicons-halflings.png" 和 "../img/glyphicons-halflings-white.png" 这两个档案的路径是错误的; 你最好自己把它们的路径改成 "/Content/images/"。其实在 bootstrap.min.css 中这两个路径也不太正确, 但是当我打算把它改掉时, VS2012 不幸当掉了! 第二次才成功。如果你不修正这两个路径的话, 那么 Bootstrap 提供的 Icons 就无法显示。
套上 Master Page
仔细看看程序 1. 的写法, 我们将发现 Bootstrap 的 Grid Layout 很容易套用到 Master Page。
以下, 我建立一个 Master Page, 内容就是从程序 1 修改而来的:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Default.master.cs" Inherits="IssueTracking.Content.themes.bootstrap.Default" %>
<%@ Register Src="~/Content/themes/bootstrap/ucHeader.ascx" TagPrefix="uc1" TagName="ucHeader" %>
<%@ Register Src="~/Content/themes/bootstrap/ucNavigator.ascx" TagPrefix="uc1" TagName="ucNavigator" %>
<%@ Register Src="~/Content/themes/bootstrap/ucFooter.ascx" TagPrefix="uc1" TagName="ucFooter" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-TW">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/Content/bootstrap.css" rel="stylesheet" />
<link href="/Content/bootstrap-responsive.css" rel="stylesheet" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="container">
<div class="row-fluid text-center">
<div class="span12 well">
<uc1:ucHeader runat="server" id="ucHeader" />
</div>
</div>
<div class="row-fluid success">
<div class="span2 well text-center">
<uc1:ucNavigator runat="server" id="ucNavigator" />
</div>
<div class="span10 well">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" />
</div>
</div>
<div class="row-fluid">
<div class="span12 well text-center">
<uc1:ucFooter runat="server" id="ucFooter" />
</div>
</div>
</div>
</div>
</form>
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
</body>
</html>
程序 2. 套用 Bootstrap 的 Master Page
在这个程序中, 其架构几乎是原封不动地从程序 1 搬过来。但是我把 Header、Navigator 和 Footer 分别使用三个 User Control 予以取代, 如此我们只需个别修改这三个 User Control, 在所有网页里就会同时生效。只有 Head 区段以及 Content 部份才套用 ContentPlaceHolder, 以方便个别网页可以加入比较特殊的组件, 例如样式表单或者 JavaScript 等等。
接着, 我要设计一个套用这个 Master Page 的网页:
<%@ Page Title="Test Master Page" Language="C#" MasterPageFile="~/Content/themes/bootstrap/Default.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="IssueTracking.TestMasterPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<h2>Content</h2>
<p><span class="badge badge-important">3</span> This is Content</p>
</asp:Content>
程序 3. 套用 Master Page 的网页
基本上, 这个网页和另外三个 User Control 的写法是相当类似的。你应该依情况设计自己想要的内容。
这个网页的长相如下:
[]
套进 ASP.NET 控件
当我们把网站套上 Bootstrap 之后, 我们只需对某个 HTML 标签赋予 CSS 类别, 就可以改变该控件的长相或行为。同样的道理对 ASP.NET 的控件也是有效的; 只要我们能够将它套上 CSS 类别就行。例如, 你可以很简单地把一个 Label 控件加上 CSS 类别, 让它变成一个按钮:
<asp:Label CssClass="btn btn-danger" ID="Literal1" runat="server" > 变成按钮</asp:Label>
以下, 我将使用 GridView 作为例子:
<asp:GridView ID="GridView1" CssClass="table table-bordered table-hover">
<Columns>
<asp:TemplateField ShowHeader="False">
<EditItemTemplate>
<asp:LinkButton CommandName="Update" CssClass="btn btn-info"
Text="<i class="icon-play"></i> 更新" Width="50px">
</asp:LinkButton>
<asp:LinkButton CommandName="Cancel" CssClass="btn btn-warning"
Text="<i class="icon-stop"></i> 取消" Width="50px"></asp:LinkButton>
</EditItemTemplate>
<ItemTemplate>
<asp:LinkButton CommandName="Edit" CssClass="btn btn-info"
Text="<i class="icon-edit"></i> 编辑" Width="50px"></asp:LinkButton>
<asp:LinkButton CommandName="Delete" CssClass="btn btn-warning"
Text="<i class="icon-remove"></i> 删除" Width="50px"></asp:LinkButton>
</ItemTemplate>
<ItemStyle CssClass="text-center" />
</asp:TemplateField>
<asp:BoundField>
<HeaderStyle CssClass="text-center" />
<ItemStyle CssClass="text-center" />
</asp:BoundField>
</asp:TemplateField>
<asp:TemplateField >
<HeaderStyle CssClass="text-center" />
</asp:TemplateField>
<AlternatingRowStyle BackColor="#f9f9f9" />
<HeaderStyle BackColor="#dff0d8" Font-Bold="True" />
</asp:GridView>
程序 4. 套用 Bootstrap 格式的 GridView 控件
在上述 GridView 程序代码中, 为求精简, 我把不需要的卷标和属性都拿掉了, 请读者留意。原则上, 只要控件里面有 CssClass 属性, 你就可以把 Bootstrap 的 CSS 类别加上去。不过有时候你必须把某个 BoundField 转换成 TemplateField, 才有办法加上 CSS 类别。但是在某些状况下, ASP.NET 所提供的功能优于使用 Bootstrap; 例如表格的交叉底色, 使用 AlternatingRowSyle 来指定, 会比使用 Bootstrap 的 table-striped 来得好。所以你可以看到我并没有采用 table-striped。
Bootstrap 学习资源
到这里为止, 我已经把 Bootstrap 的最重要原理讲述并示范了一遍, 也教你如何套用到 ASP.NET 了。接着, 应该足够你自己试着着手了。
要学习 Bootstrap, 我找到如下的一系列相当棒的教学影片。虽然这些影片讲得非常的简单, 而且使用英语, 但是, 请相信我, 讲师的英语并没有任何艰涩的单字, 又辅以画面协助, 应该不难听懂才对。由于这些影片已经把最重要基础知识都说了, 所以我在本文中就不多赘述了。
Twitter Boostrap Tutorial 1 – Navbars
Twitter Boostrap Tutorial 2 – Fixed Navbars
Twitter Boostrap Tutorial 3 – Grid Layouts
Twitter Boostrap Tutorial 4 – Modal Dialogs
Twitter Boostrap Tutorial 5 – Dynamic Modal Dialogs
Twitter Boostrap Tutorial 6 – Tooltips
Twitter Boostrap Tutorial 7 – Table Styles
Twitter Boostrap Tutorial 8 – Forms
Twitter Boostrap Tutorial 9 – Tabs
此外, KKBruce 很佛心地把 Bootstrap 官网义务翻译成了中文。想看中文说明的朋友可以前往参考。
注意事项
Bootstrap 框架把太多东西写死在档案里面, 除了上面提过的图文件路径之外, 它甚至连字型都写死为 "Helvetica Neue",Helvetica,Arial,sans-serif。因此, 如果你不想另外写在其它的 CSS 档案里, 那么或许你会想要把 bootstrap.css 和 bootstrap.min.css 改写。不过, 如果你这么做的话, 有两点请特别注意:
请在标头的批注处注明这个档案已经遭到修改, 并注明为何更改、改了什么等等。 最好把档案的编辑方式从 ANSI 改为 UTF-8, 如此, 假设你把字体改成例如微软正黑体, 它才会生效。 参考数据: davethesoftwaredev 的教学影片 KKBruce.tw Bootstrap 官网