ASPDotNet 八、使用 Bootstrap 美化 ASP.NET MVC 应用

八、使用 Bootstrap 美化 ASP.NET MVC 应用

您可能已经创建了一个具有所有必需功能的应用。它甚至可以在所有情况下完美地工作而没有任何问题。但是应用的成功取决于用户访问它的能力。您的应用应该看起来很好(如果不是很好的话)，并且用户友好，这样才能成功。

在本章中，你将学习以下主题:

HTML 和 CSS 在 ASP 中的作用.NET Core 应用
前端框架的特点和不同的框架可用
Bootstrap 和它的网格系统沿其特性
Bootstrap 中用于表单元素(如输入和选择元素)的 CSS 类
CSS 类用于不同类型的 HTML 元素，比如 table
使用 Bootstrap 在您的 ASP.NET Core 应用

在讨论如何使我们的应用看起来更好之前，让我们先回过头来讨论一下 HTML 和 CSS 在应用中所扮演的角色。

了解 HTML 和 CSS

如前所述，所有浏览器只能理解 HTML、CSS 和 JavaScript。因此，您构建的应用应该生成 HTML、CSS 和 JavaScript 的输出。对于使用 Java 或 Ruby on Rails 等其他技术构建的 web 应用来说，这是正确的。话虽如此，我们只讨论 HTML 和 CSS。

HTML(超文本标记语言)是用来构建网页内容的。例如，您可以在title标记中添加内容，这样它就可以在浏览器的选项卡或窗口中使用。让我们看一个例子。

打开任何文本编辑器(甚至可以使用记事本)，键入以下 HTML 内容并将保存文件设为Bootstrap.html。请注意分机.html:

<!DOCTYPE html> 
<html> 
<head> 
    <title> Beautify your ASP.NET MVC applications using Bootstrap </title> 
</head> 
<body> 
    <h1> Bootstrap </h1> 
    <p> 
        Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. 
    </p> 
</body> 
</html>

第一行告诉我们 HTML 内容遵循 HTML 5 标准(HTML 的最新和当前版本)，并且应该这样解释。标签告诉浏览器它是一个 HTML 文档的开始。标签中的信息代表元数据，并告诉浏览器该网页而不是网页本身。示例包括页面标题、页面描述和搜索引擎优化的关键字。 body标签的所有内容都将显示在浏览器的主窗口中。在前面的 HTML 代码中，我们制作了Bootstrap标题，其余内容被制作为一个段落。

在浏览器中打开该文件，你应该会看到如下截图:

Knowing HTML and CSS

您将注意到放置在title标记中的内容显示为浏览器的选项卡标题，标题内容被加粗并增大了大小，段落从新的一行开始。

CSS 是关于样式的。你可以使用 CSS 来定制网页中每个元素的外观。您可以更改按钮的颜色、标题文本的字体、表格的边框大小等等。可以包含内联的 CSS 样式，也可以使用单独的文件。如果你使用的是内联 CSS，它应该在一个style标签中。如果您正在使用外部 CSS，我们可以使用link标记并引用外部 CSS 文件。

CSS 只是一组用于表示的规则。每个规则由两个部分组成:必须为其应用声明的选择器和包含样式信息的声明。样式信息有一个属性和该属性的值。

让我们来看看以下简单的 CSS 规则:

    h1{ 
        color : #0094ff; 
    }

这条 CSS 规则规定所有的标题文本都应该是蓝色的。 h1是选择器，它告诉浏览器必须对所有h1标记应用以下声明。在声明中，我们设置了蓝色(#0094ff在十六进制格式中是蓝色)。

以下是更新后的 HTML 文件，我已经更新了 CSS 样式(突出显示的粗体):

<!DOCTYPE html> 
<html> 
<head> 
    <title> Beautify your ASP.NET MVC applications using Bootstrap </title> 
    <style type="text/css"> 

        body{ 
            font-family:Arial,Verdana,sans-serif; 
        } 

        h1{ 
            color : #0094ff; 
        } 

        p { 
            color: #5f5e5e; 
        } 
    </style> 

</head> 
<body> 
    <h1> Bootstrap </h1> 
    <p> 
        Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. 
    </p> 
</body> 
</html>

当你在浏览器中修改样式后打开该文件，你会得到以下输出:

Knowing HTML and CSS

话虽如此，您需要创建 CSS 规则，以使 web 应用中的元素看起来很好。但是为每个元素创建不同的样式是一项既耗时又乏味的任务。您可以从任何可用的前端框架中进行选择。

任何应用都应具备以下特点:

一致性:用户应该熟悉应用正在使用的元素和控件。例如，如果使用下拉列表，用户应该只能从中选择一个值。
响应式:您构建的应用应该在所有不同大小的设备上看起来都很好。您编写的代码应该适应用户设备的屏幕大小。
移动友好:这与前面提到的一点有关。如今，许多应用是通过移动设备而不是台式电脑或笔记本电脑访问的。我们必须确保我们构建的应用在移动设备上看起来很棒。
可定制:如果你打算使用任何前端应用框架，它应该根据你的需要进行定制。例如，如果您想更新标题文本的颜色，您应该能够更新或重写 CSS 文件以进行必要的更改。
易于上手:学习前端框架的学习曲线应该是最小的，因为你应该把时间花在为客户创造价值和交付解决方案上。我们并不是靠学习新的花哨的前端框架来赚钱的。

目前可用的前端框架很少，如 Bootstrap、Foundation、PureCSS。在本章中，我们将使用 Bootstrap 框架，因为它是应用最广泛的前端框架。

引导

Bootstrap 是最流行的 HTML, CSS 和 JS 框架开发响应性，移动优先项目在 web 上，你可以访问它的http://getbootstrap.com/。

Bootstrap

Bootstrap 有许多特性可以满足 web 应用的各种需求。它为每个 HTML 元素提供了不同的 CSS 类，因此您可以使用它而不需要接触任何 CSS 代码。但是，如果您希望重写它，您可以这样做。

让我们简要地看一下 Bootstrap 的每个特性。

引导网格系统

Bootstrap 中的网格系统可以帮助您为应用创建响应式布局。该特性使您的应用在所有不同形状的设备(包括移动设备)中看起来都很棒。

Bootstrap 提供了一个流体网格系统，当设备或视口尺寸增加时，它可以扩展到 12 列。你可以把网格系统想象成 Excel 表格中的列(就像下面的截图):

Bootstrap Grid system

我们可以组合多个列来创建一个更宽的列。在前面截图的第二行中，我们使用了单一列(using class)。 col-md-1)12 次。在第三行，我们使用一个 CSS 类(.col-md-2)来创建 6 个更宽的列，而不是 12 个更短的列。同样，我们创建的更宽的列的数量更少。

表格

在应用中使用 Bootstrap 时，所有表单控件都接受全局样式。下面是一个这样的例子(截图取自 Bootstrap 网站):

Forms

下面是上述表单的代码。相关的 HTML 元素在表单中分组在一起。例如，Email 和Email 地址输入文本框的标签分组在一起。密码、文件输入也是如此。

Forms

内联表单

内联表单是所有表单元素都在同一行的表单(如下面的截图所示)。我们需要将类form-inline添加到form元素中。

Inline forms

水平形式

在水平形式中，我们将每个元素组放在单独的一行上; 电子邮件标签，电子邮件一行输入，密码标签，密码一行输入(如下截图):

Horizontal forms

要应用水平表单样式，我们只需要添加类form-horizontal，如下面的代码所示。就像其他表单一样，我们需要通过 CSS 类form-group将相关的 HTML 元素分组到一起:

Horizontal forms

表 CSS 类

对于基本的样式，添加基本的 CSS 类table到tableHTML 元素中，如下截图所示:

Table CSS classes

条纹表

在条纹表中，交替行的背景将是相同的颜色。在下面的截图中，第一行和第三行背景颜色是相同的。您可以应用table-striped类将条带表行为应用于表 HTML 元素。

Striped tables

悬浮表

当您将鼠标移动到表中的任意行上时，该行的背景颜色将被更改。这种悬停行为可以通过将 CSS 类table-hover和类table应用于 HTML 表元素来实现。

Hover tables

有边框的桌子

如果我们将 CSS 类table-bordered应用到table元素，我们就可以有一个带边框的表(如下面的截图所示)。

Bordered tables

上下文类

有时需要根据数据值高亮显示行。例如，如果您正在以表格格式显示库存数据，您可能希望用红色背景突出显示计数小于规定计数的项目行。在本例中，可以对表行应用一个danger类以用红色突出显示它们。有不同类型的上下文类可以用不同的颜色突出显示。您可以将这些类应用于单个单元格，而不是整个行。

Contextual classes in table

按钮

有不同的样式选项可使按钮显示在不同的颜色。对于所有的按钮，基本按钮类btn必须应用:

Buttons

btn-primary按钮类用蓝色高亮按钮，而btn-success按钮类用绿色高亮按钮。在前面的屏幕截图中，显示了样式化按钮的不同选项。

纽扣尺寸

您可以根据您的需要改变按钮的大小。 btn-lg类可以应用于大按钮，btn-sm类可以应用于按钮，使其看起来较小。以下是可用于控制按钮大小的不同选项。

Button sizes

上下文色彩

根据上下文，您可能需要更改文本的颜色。例如，如果前一个操作成功，您可能希望将文本显示为绿色。对于不成功的操作，您可能希望用红色显示错误消息。在这种情况下，您可以使用这个帮助器 CSS 类以不同的颜色显示它们。

Contextual colors

我们已经看到了 Bootstrap 的各种特性。现在，让我们使用 Bootstrap 使我们的应用看起来很好。基本上，我们的视图中有两个主要组件:顶部的表单用于从用户获取输入，底部的表用于在表中显示结果。

使用 Bootstrap 在你的 ASP。净 MVC 应用

有不同的方法获得 Bootstrap 为您的应用:

请参考应用中 CDN(内容分发网络)中可用的 Bootstrap 文件
下载源代码
安装与鲍尔
编译与繁重

在这些选项中，最简单的选项是第一个。

在我们之前创建的应用中打开布局文件(_Layout.cshtml)。包括顶部(在head标签内)的 CSS 文件和底部(在body标签末尾)的脚本:

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>@ViewBag.Title</title> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 

</head> 
<body> 
    <div> 
        @RenderBody() 
    </div>     

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.js"></script> 
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script> 
    <script src="https://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js"></script> 
    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
</body> 
</html>

使用 Bower 安装

右键单击项目菜单，从上下文菜单中选择管理 Bower 包选项:

Installing with Bower

一旦您选择管理 Bower 包，您将能够安装或卸载 Bower 包，就像您安装或卸载NuGet包一样。

Installing with Bower

HTML 文档类型

Bootstrap 使用某些需要使用 HTML 5 文档类型的 HTML 元素和 CSS 属性。默认情况下，您在 ASP 中创建的视图.NET Core 将只有 HTML 5 文档类型。所以，我们不需要做任何事情。

<!DOCTYPE html> 

<html lang="en"> 
... 
</html>

让我们对屏幕进行以下更改以使用 Bootstrap:

将 CSS 类form-horizontal应用于表单。
对于标签，输入和验证错误范围分别使用 CSScol-sm-2、col-sm-4和col-sm-3类
对于标签，应用 CSS 类control-label
对于输入的 HTML 元素，应用了form-controlCSS 类
对于每个表单组(包含标签和输入等 HTML 元素)，应用 CSS 类form-group
对于所有验证错误消息，应用text-dangerCSS 类，使其显示为红色
应用table，table-borderedCSS 类来样式化表

下面是完整更新的视图代码; 我们使用了 Bootstrap CSS 类来让我们的应用看起来很棒:

@model Validation.ViewModels.EmployeeAddViewModel 

<div> 
    <br/> 
    <br/> 
    <form asp-controller="Employee" asp-action="Index" method="post" role="form" class="form-horizontal"> 

        <div class="form-group"> 
            <label asp-for="Name" class="col-sm-2 control-label"></label> 
            <div class="col-sm-4"> 
                <input asp-for="Name" class="form-control" /> 
            </div> 
            <div class="col-sm-3 text-danger"> 
                <span id="validationName" asp-validation-for="Name" ></span> 
            </div> 
        </div> 

        <div class="form-group"> 
            <label asp-for="Designation" class="col-sm-2 control-label"></label> 
            <div class="col-sm-4"> 
                <input asp-for="Designation" class="form-control" /> 
            </div> 
            <div class="col-sm-3 text-danger"> 
                <span id="validationDesignation" asp-validation-for="Designation" ></span> 
            </div> 
        </div> 

        <div class="form-group"> 
            <label asp-for="Salary" class="col-sm-2 control-label"></label> 
            <div class="col-sm-4"> 
                <input asp-for="Salary" class="form-control" /> 
            </div> 
            <div class="col-sm-3 text-danger"> 
                <span id="validationSalary" asp-validation-for="Salary" ></span> 
            </div> 
        </div> 

        <div class="form-group"> 
            <div class="col-sm-offset-2 col-sm-10"> 
                <button type="submit" class="btn btn-primary">Submit</button> 
            </div> 
        </div> 

    </form> 

</div> 

<br /><br /> <br /> 

<h4> List of employees:</h4> <br /> 

    <table class="table table-bordered"> 
        <tr> 
            <th> ID </th> 
            <th> Name </th> 
            <th> Designation </th> 
            <th> Salary </th> 
        </tr> 
        @foreach (var employee in Model.EmployeesList) 
        { 
            <tr> 
                <td>@employee.EmployeeId</td> 
                <td>@employee.Name</td> 
                <td>@employee.Designation</td> 
                <td>@employee.Salary</td> 
            </tr> 
        } 
    </table>

在做了上述更改之后，当你运行应用时，你的屏幕应该如下所示:

HTML doctype

总结

在本章中，我们学习了 HTML 和 CSS 在任何 web 应用中的作用，包括 asp.net.NET Core 应用。我们分析了前端框架的需求，并讨论了 bootstrap 的特性，bootstrap 是最流行的 HTML、CSS 和 JS 框架，用于在 web 上开发响应性强、移动优先的项目。我们已经通过示例讨论了 Bootstrap 中用于不同类型 HTML 元素的 CSS 和组件。最后，我们讨论了如何在我们的 ASP 中加入 Bootstrap.NET Core 应用。

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://www.moonapi.com/news/33492.html

ASPDotNet 查看更多书籍

《ASP.NET MVC 编程学习手册》

分类

最近更新

ASPDotNet 八、使用 Bootstrap 美化 ASP.NET MVC 应用

八、使用 Bootstrap 美化 ASP.NET MVC 应用

了解 HTML 和 CSS

引导

引导网格系统

表格

内联表单

水平形式

表 CSS 类

条纹表

悬浮表

有边框的桌子

上下文类

按钮

纽扣尺寸

上下文色彩

使用 Bootstrap 在你的 ASP。净 MVC 应用

使用 Bower 安装

HTML 文档类型

总结

留言

联系客服

数据知识

系统公告

开发文档

ASPDotNet查看更多书籍

《ASP.NET MVC 编程学习手册》

ASPDotNet 八、使用 Bootstrap 美化 ASP.NET MVC 应用

八、使用 Bootstrap 美化 ASP.NET MVC 应用

了解 HTML 和 CSS

引导

引导网格系统

表格

内联表单

水平形式

表 CSS 类

条纹表

悬浮表

有边框的桌子

上下文类

按钮

纽扣尺寸

上下文色彩

使用 Bootstrap 在你的 ASP。 净 MVC 应用

使用 Bower 安装

HTML 文档类型

总结

留言

联系客服

ASPDotNet 查看更多书籍

使用 Bootstrap 在你的 ASP。净 MVC 应用