在ASP.NET WEB FORM项目中加入BOOTSTRAP 套件

转载

wx62d1485ecb778 2022-11-16 16:28:15 博主文章分类：asp.net web

文章标签 asp.net BOOTSTRAP WEB FORM bootstrap css 文章分类 Java 后端开发

Bootstrap 是由 Twitter 所开发的一个免费的网页框架, 它提供了许多从基本到进阶的 CSS 和 JavaScript 功能, 让网页开发者可以很快速地把网页架起来, 同时还兼顾了还算不错的美感。通常, 网页设计师不会、也不懂得美工设计, 所以我们如果只是很单地把网页建立起来, 很不幸的, 这个网页通常不会跟「美观」这两个字有交集。但是有了 Bootstrap, 你的网页很容易就能让人为之惊艳 (尤其是跟之前的做法对比的话)。

当然, 我不是说 Bootstrap 从此会让美工人员丢掉工作。我相信美工人员也会感谢 Bootstrap 的存在, 这样至少可以让网页在进行layout

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

套上 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