WEBVTT

00:00:00.200 --> 00:00:04.200
[以下的翻译内容由必应(Bing)在线翻译提供。]


00:00:09.100 --> 00:00:13.700
大家好，我的名字是 Pranav Rastogi 和我在 Microsoft ASP.NET 小组的工作。

00:00:14.440 --> 00:00:20.290
今天我将显示新的 ASP.NET在 Visual Studio 2013年模板。

00:00:21.040 --> 00:00:24.710
随着越来越多的人浏览通过电话，他们的网站

00:00:24.760 --> 00:00:28.600
平板电脑和其他设备，它是对于 web 开发人员来说更重要

00:00:28.650 --> 00:00:31.740
若要生成可以指定目标站点不同的板型。

00:00:32.410 --> 00:00:35.530
模板内，我们已开始若要使用一个名为的框架

00:00:35.580 --> 00:00:38.260
这是一个巨大的改进的引导体验到的

00:00:38.310 --> 00:00:41.110
我们在过去的可视装运Studio 释放。

00:00:42.050 --> 00:00:44.860
引导数据库实际上很容易使若要生成可以的网站

00:00:44.910 --> 00:00:49.340
针对不同的板型和我们将本介绍性视频

00:00:49.390 --> 00:00:53.990
只需查看模板是如何使引导数据库的使用和设置

00:00:54.040 --> 00:00:57.190
您可以生成项目您上的应用程序。因此，我将

00:00:57.240 --> 00:01:01.210
显示您的引导数据库的集成在 ASP.NET 模板

00:01:01.260 --> 00:01:03.380
对于 Visual Studio 2013。

00:01:03.900 --> 00:01:08.040
因为您可能会为 web 开发人员知道现在越来越多的人

00:01:08.090 --> 00:01:11.430
通过网站访问他们不同的设备。

00:01:11.480 --> 00:01:14.240
他们通过访问他们电话，通过其平板电脑，

00:01:14.590 --> 00:01:19.250
通过他们的 Pc，通过其phablets，使它变得越来越大

00:01:19.300 --> 00:01:22.760
为 web 开发人员更重要若要能够针对所有这些

00:01:22.810 --> 00:01:25.790
在所有不同的板型这些不同的设备。

00:01:26.520 --> 00:01:31.390
而且，随着我们的排序向前移动移动 web 开发将成为

00:01:31.440 --> 00:01:35.180
关键开发的一部分工作流。所有这些时

00:01:35.730 --> 00:01:38.430
编写这些类型的应用程序有道理。您必须

00:01:38.480 --> 00:01:43.810
若要编写自定义的 CSS。您必须为导入到逻辑很多

00:01:43.860 --> 00:01:46.650
您的应用程序的基于用户界面的逻辑。

00:01:47.270 --> 00:01:51.030
因此我们所做的视觉效果Studio 2013 期限

00:01:51.080 --> 00:01:55.920
ASP.NET web 开发人员是所有我们默认的模板是

00:01:55.970 --> 00:01:58.210
现在，基于引导。

00:01:58.730 --> 00:02:03.940
因此，引导是 CSS 框架这某种程度使得更容易

00:02:03.990 --> 00:02:05.480
若要执行的 web 开发。

00:02:06.210 --> 00:02:08.960
因此，如果您对所有常见的看法有必要的任务

00:02:09.010 --> 00:02:12.540
作为类似样式的 web 开发人员设置样式表的图像

00:02:12.590 --> 00:02:16.420
设置窗体的样式，再单击所有这些样式的外观和

00:02:16.470 --> 00:02:20.560
在不同的浏览器，感觉相同在不同的设备。

00:02:20.610 --> 00:02:23.520
还有大量的代码，您需要编写。因此，现在与

00:02:23.570 --> 00:02:27.880
引导数据库的推出有轻松地构建您的网站

00:02:27.930 --> 00:02:32.810
在采用这种框架在处理所有这些问题之列

00:02:32.860 --> 00:02:37.180
为您。因此，在 Visual Studio 2013所有 ASP.NET 模板

00:02:37.230 --> 00:02:42.630
对于类似 MVC，web 窗体、 Spar 的应用程序，Web API 的应用程序 ；

00:02:43.120 --> 00:02:45.810
现在，所有我们的模板为基础在引导，以便当

00:02:45.860 --> 00:02:48.990
您创建的应用程序和时间您开始使用它，我们将

00:02:49.040 --> 00:02:52.580
某种程度指导您向优化将的经验

00:02:52.630 --> 00:02:55.820
帮助您生成应用程序，可以针对不同的设备。

00:02:56.890 --> 00:02:59.150
那么是什么引导真的？

00:02:59.890 --> 00:03:05.840
引导基本上是 CSS 框架它可以 web 开发。

00:03:05.890 --> 00:03:09.050
因此负责引导更为重要的部分的网站

00:03:09.100 --> 00:03:11.310
在开发空间。它可以作出响应。

00:03:11.890 --> 00:03:17.370
它具有移动的第一种方法。它具有地铁作为前端设计

00:03:18.220 --> 00:03:21.990
所以这一次的开发人员体验您开始生成 web 应用程序

00:03:22.040 --> 00:03:23.600
您可以获得所有这些好处。

00:03:24.510 --> 00:03:27.330
我觉得我很自豪的说，其中一个酷的东西

00:03:27.380 --> 00:03:29.880
我们已完成与引导与 vs 集成是我们

00:03:29.930 --> 00:03:34.500
具有集成与引导 3Visual Studio 2013 RTM。

00:03:34.550 --> 00:03:38.830
并引导 3 是一个巨大的进步通过引导 2 因为

00:03:38.880 --> 00:03:42.780
它还将移动的发展前和中心。进行了优化

00:03:42.830 --> 00:03:46.460
移动第一。从开始，使用一种小型设备，然后

00:03:46.510 --> 00:03:51.500
某种程度上刻度，而该网站在此平台上很好地进行缩放。

00:03:52.270 --> 00:03:55.280
这样一个伟大之处该版本是正如我们对进行排序

00:03:55.330 --> 00:03:57.910
为您提供最新和最大在 web 中发生的

00:03:57.960 --> 00:04:01.030
开发，以便启动时开发与应用程序

00:04:01.080 --> 00:04:05.320
ASP.NET 在 Visual Studio 中，您入门与有最新版本。

00:04:05.370 --> 00:04:08.220
因此，我将演示几种方法我们有某种程度的集成

00:04:08.610 --> 00:04:11.710
引导到我们的模板，并我将向您概述

00:04:11.760 --> 00:04:15.780
引导数据库集成的以便您可以快速

00:04:15.830 --> 00:04:22.380
我们开始吧。如果您创建的任何项目在 ASP.NET 中...在我的示例

00:04:22.430 --> 00:04:25.160
我已创建一个 ASP.NET MVC 应用程序。

00:04:25.810 --> 00:04:30.420
如果在应用程序启动您将看到，浏览器

00:04:30.470 --> 00:04:35.310
该网站的排序具有地铁设计给它。还有酷的事

00:04:35.360 --> 00:04:39.500
有关此应用程序时，如果启动若要调整大小的应用程序，

00:04:39.550 --> 00:04:46.220
因此，如果我全角将看到该站点所需的整个空间。

00:04:46.270 --> 00:04:50.080
但是，如果我开始滚动后，您如何适当地将看到所有

00:04:50.130 --> 00:04:54.160
元素秋的和如何快速响应站点的。如果滚动

00:04:54.210 --> 00:04:57.010
超出一定宽度，则将我收到的下拉列表，请参阅

00:04:57.060 --> 00:05:00.860
我给出我的应用程序所有的导航链接。

00:05:01.580 --> 00:05:05.770
因此如果所有这些功能所获取的

00:05:05.820 --> 00:05:09.670
如果我看的 CSS，我必须为我的应用程序的写入

00:05:10.270 --> 00:05:15.150
它是相当少。因此，如果我打开您将会看到我网站.cs

00:05:15.200 --> 00:05:20.140
我的应用程序级 CSS 是大约在 30 到 40 行代码

00:05:20.190 --> 00:05:23.990
这是主要是围绕验证并使周围的一些内容

00:05:24.040 --> 00:05:25.320
我的 CSS。

00:05:25.990 --> 00:05:29.370
再次使用很少的 CSS，您必须编写，进行排序

00:05:29.420 --> 00:05:32.830
有了令人惊叹不已的功能开箱。如果您是

00:05:33.400 --> 00:05:37.310
看一看如何将已有站点查看 Windows 存储区

00:05:37.360 --> 00:05:42.810
Windows 曲面，则会看到网站再次看起来很时髦。

00:05:42.860 --> 00:05:47.290
它有漂亮的外观和感觉。我某种程度可以有不同的模式

00:05:47.340 --> 00:05:50.200
该网站。因此，这是纵向模式。您将看到如何

00:05:50.250 --> 00:05:54.140
该网站将位于正常。如果我单击注册链接，我仍

00:05:54.190 --> 00:05:57.610
获取我的验证错误在此处。我可以重新对齐。

00:05:58.460 --> 00:06:01.830
因此，您可以看到，所有不同模式我了，我的网站

00:06:01.880 --> 00:06:07.490
也在某种程度看起来我tablet。这就是 nicest

00:06:07.540 --> 00:06:12.880
有关引导的一点是入门开始体验和方式

00:06:12.930 --> 00:06:16.200
难易不同的目标的排序无板型

00:06:16.250 --> 00:06:22.100
若要编写 CSS 代码数量。另一个最棒的一点引导

00:06:22.150 --> 00:06:26.420
集成是引导的生态系统。因此，如果一个方案

00:06:26.470 --> 00:06:28.470
您必须为主题网站。

00:06:29.100 --> 00:06:32.130
和以往 themeing 必须始终最主要的困难之一

00:06:32.180 --> 00:06:33.680
对于 web 开发人员的点。

00:06:34.220 --> 00:06:37.900
使用引导数据库的集成相当简单，入门

00:06:37.950 --> 00:06:41.820
从模板和主题它。因此我可以转到调用站点

00:06:41.870 --> 00:06:46.040
这是一种聚合 Bootswatch.com不同主题的

00:06:46.090 --> 00:06:49.650
是免费的有些付费，然后您可以很容易地安装它们

00:06:49.700 --> 00:06:54.630
为您的应用程序。因此，在本演示我将选择此主题。

00:06:55.220 --> 00:06:59.450
我要说的只是下载引导数据库的 CSS。因此，现在打开

00:07:00.530 --> 00:07:01.120
该文件中。

00:07:02.050 --> 00:07:03.260
将复制内容。

00:07:03.920 --> 00:07:07.880
和的排序返回到项目中。我打算重写和

00:07:07.930 --> 00:07:12.170
使用引导数据库的框架我刚刚下载的主题。

00:07:12.220 --> 00:07:15.990
如果启动我的网站和您再次将会看到现在是我的网站

00:07:16.040 --> 00:07:21.650
再有新的外观我选择了从 Bootswatch 的主题。

00:07:21.700 --> 00:07:26.720
它具有相同的蓝色主题，我选择在这里以及所有我

00:07:26.770 --> 00:07:30.530
链接更改我所有按钮都更改，如果我在注册却收到

00:07:30.580 --> 00:07:33.370
相同的验证错误已收到之前。

00:07:33.980 --> 00:07:38.560
在几秒钟内，我以前能够更改主题

00:07:38.610 --> 00:07:41.550
我的网站比较容易。

00:07:42.170 --> 00:07:45.140
对于你们中那些谁都想知道如何获取到的引导

00:07:45.190 --> 00:07:51.300
重新项目中，我们的排序发布引导作为 NuGet 文件包。

00:07:51.350 --> 00:07:56.190
因此，项目模板已经有这称为引导安装的包。

00:07:56.790 --> 00:08:00.590
如果不开始一个新ASP.NET 项目时，您可以只

00:08:00.640 --> 00:08:04.010
立即下载此引导程序包到您的项目。

00:08:04.820 --> 00:08:09.020
并将该包 NuGet在以下文件中： 它将

00:08:09.070 --> 00:08:13.500
在窗体文件夹中，它将所有的 CSS，引导

00:08:13.550 --> 00:08:18.450
框架中，而且它将在 JavaScript 中引导数据库的框架。

00:08:19.200 --> 00:08:23.120
并优化模板类他们将捆绑体验

00:08:23.170 --> 00:08:28.010
所有 CSS 和 JavaScript到一个单独的包，以便

00:08:28.060 --> 00:08:32.590
您的排序进行最小的请求向网络，然后

00:08:32.640 --> 00:08:35.930
优化您的站点的网络同样的性能。所以只需

00:08:35.980 --> 00:08:39.070
tidbit 信息的方式项目模板设置

00:08:39.120 --> 00:08:42.480
为引导数据库进行优化和然后为净上载而优化

00:08:42.530 --> 00:08:42.940
也。

00:08:42.990 --> 00:08:50.810
因此引导作为主题，它调用的网格系统。因此

00:08:50.860 --> 00:08:54.760
方式引导整个框架设计方面的

00:08:54.810 --> 00:09:00.020
网格。并将引导系统整个网格的经验快速响应。

00:09:00.490 --> 00:09:03.200
因此，在本模板中，您会看到我有三个列，

00:09:03.450 --> 00:09:06.500
如果我看我可以排序方式使用网格的去往何处

00:09:06.550 --> 00:09:08.330
为此类事情。

00:09:09.090 --> 00:09:13.080
因此，整个页面划分为一套 12 列和我可以

00:09:13.130 --> 00:09:19.750
指定每列的宽度是的。在我的示例每个

00:09:19.800 --> 00:09:23.580
列宽度是 4，因此我有3 列，然后将它们累加

00:09:23.630 --> 00:09:28.500
到 12 时。因此，让我们说我愿意稍有调整的最后一列的大小

00:09:28.550 --> 00:09:31.660
以不同的方式从中间那一列。我所要做的是基本上

00:09:31.710 --> 00:09:36.520
更改网格大小调整，以便所有网格大小调整进行求和

00:09:36.570 --> 00:09:37.490
到 12 时。

00:09:38.100 --> 00:09:41.000
因此，我有 6 到 8 到 10，

00:09:42.960 --> 00:09:47.170
我可以安排 4 中，将其我的应用程序，请转回。

00:09:47.220 --> 00:09:50.980
说控制 f5 键。因此，您将看到如何列排序的拆分了。

00:09:51.030 --> 00:09:54.420
这一成为 2 列。这其中一个变得和这 6 列

00:09:54.470 --> 00:09:55.490
一成 4。

00:09:56.050 --> 00:10:00.200
如果我要调整这，甚至模板中，您将看到如何

00:10:00.250 --> 00:10:05.790
正常网站某种程度降到因此我可以针对不同的分辨率。

00:10:06.680 --> 00:10:09.900
并再次仍获得好处响应能力的框架。

00:10:11.220 --> 00:10:15.500
这种体验的另一个关键功能是排序图像处理。

00:10:16.130 --> 00:10:22.850
我们都有不同的图像大小和它的非常困难

00:10:22.900 --> 00:10:26.270
若要使体验到的图像会有反应。因此，让我们说

00:10:26.320 --> 00:10:30.960
我将该图像添加到我的应用程序我的排序返回到

00:10:31.010 --> 00:10:35.590
我的网站。所以，我可以启动我的应用程序再次。

00:10:35.640 --> 00:10:42.110
这样，您将看到图像的排序方式占尽整个屏幕的

00:10:42.480 --> 00:10:47.950
和它排序了我网站布局的 messes。它看起来很丑陋。

00:10:48.970 --> 00:10:52.480
使用引导数据库现在可以排序的我与此图像的特性

00:10:52.530 --> 00:10:58.590
这类等图像快速响应将添加响应行为

00:10:58.640 --> 00:11:02.960
对此图像，并确保图像将很好地呈现。

00:11:03.010 --> 00:11:08.280
因此，在此体验中，您将看到现在正在获取图像

00:11:08.330 --> 00:11:10.450
正确呈现。事实上

00:11:12.830 --> 00:11:15.730
如果我要将该图像放在这，

00:11:17.150 --> 00:11:22.070
div，您会看到我将获取响应的性质

00:11:22.120 --> 00:11:24.970
同时引导。因此，这是什么图像的外观

00:11:25.020 --> 00:11:29.450
完整的视图。如果我要在某种程度上调整其大小时，您将看到如何

00:11:29.500 --> 00:11:34.950
图像对齐，看起来相当即使是在一个小的因素冷却

00:11:35.000 --> 00:11:38.570
像这样。因此，这是如何您站点外观上一部电话。

00:11:38.620 --> 00:11:42.990
同样我无需编写在我的应用程序 ； 任何 CSS所有

00:11:43.040 --> 00:11:48.020
我必须亲自做了使用引导数据库的框架并得到快速响应

00:11:48.070 --> 00:11:50.470
我到图像的性质同时我图像。

00:11:51.460 --> 00:11:55.590
另一个常见方案是表。

00:11:57.380 --> 00:12:01.970
因此，让我们看看如何引导帮助我们的样式表。

00:12:02.500 --> 00:12:06.350
以下是表的我在我的应用程序中。

00:12:07.470 --> 00:12:12.660
我可以移动它，转回访问我的网站，控制 f5 键。

00:12:13.760 --> 00:12:18.030
因此，这是我的表格外观基本上是： 名字、 姓氏。

00:12:18.080 --> 00:12:21.360
它看起来非常普通。因此，让我们请参阅如何我们可以快速样式

00:12:21.410 --> 00:12:26.370
表看起来有所改善。因此，我可以特性的表

00:12:26.420 --> 00:12:32.730
与此类等于其排序的表提供非常 minimalistic

00:12:32.780 --> 00:12:36.920
概述为我整个表格。我可以是非常流行。我可以说我

00:12:36.970 --> 00:12:42.580
带边框的表格或我想想要带条纹的表。

00:12:43.500 --> 00:12:49.130
我想悬停功能因此，表悬停。

00:12:54.460 --> 00:12:57.140
我们还添加了用于 IntelliSense引导数据库，因此您会注意到

00:12:57.190 --> 00:13:00.590
正如键入得到 IntelliSense引导数据库的所有类。

00:13:00.640 --> 00:13:03.200
因此，所有这些类都定义在引导的框架中，

00:13:03.500 --> 00:13:07.270
在 Visual Studio 中的 web 开发人员和我们照明的体验

00:13:07.320 --> 00:13:13.470
最适合您，IntelliSense。因此如果您将会看到控件 F5 方式

00:13:13.520 --> 00:13:18.480
我有条纹。我有一个边框。我有一个边距。因此，我可以

00:13:18.530 --> 00:13:23.730
我的表非常快速排序的样式。这些再次是非常

00:13:23.780 --> 00:13:28.560
通常使用 CSS 的操作，我在我的应用程序中执行的操作。

00:13:28.610 --> 00:13:32.060
只因此引导是使其变得更容易使用所有这些功能。

00:13:32.110 --> 00:13:36.590
引导具有名为的另一个功能Glyphicons。因此，让我们说

00:13:36.640 --> 00:13:41.670
我想要把邮件图标在这里，我可以指定一个类

00:13:44.480 --> 00:13:46.520
调用的 glyphicon 的信封。

00:13:48.920 --> 00:13:53.780
如果我我再次运行应用程序，转回要联系，请将

00:13:53.830 --> 00:13:55.920
请参阅如何获取

00:13:57.460 --> 00:14:00.370
信封或邮件图标在我的应用程序中的转移。

00:14:01.010 --> 00:14:04.360
同样，一种方式，引导某种程度实际上使

00:14:04.410 --> 00:14:09.480
可以方便地添加此功能为您的应用程序。好

00:14:09.530 --> 00:14:14.970
有关引导学习的方式如果，要对他们的网站

00:14:15.020 --> 00:14:19.520
您开始追随教程CSS。它们具有实用

00:14:19.570 --> 00:14:23.210
方法来编写教程因此您只需单击表。

00:14:23.480 --> 00:14:26.960
他们有非常简单的示例表，然后选择排序 o 生成

00:14:27.010 --> 00:14:30.100
它为您提供详细的信息为基础在如何可以自定义

00:14:30.150 --> 00:14:34.000
表的具有带区具有边框，如何使

00:14:34.050 --> 00:14:38.360
它及时响应，如何执行操作窗体等等等等。

00:14:38.410 --> 00:14:43.140
引导数据库中具有另一种功能JavaScript 区域在其中他们

00:14:43.190 --> 00:14:48.070
使您能够公平执行模式下拉列表很容易。因此，这是一个示例

00:14:48.120 --> 00:14:51.410
如何在模式对话框的将如下所示

00:14:53.140 --> 00:14:57.050
在引导。这实际上使得可以方便地添加此功能

00:14:57.100 --> 00:14:58.860
为您的应用程序也。

00:14:58.910 --> 00:15:04.360
因此另一种常见的情况，用图像的人做的是如何

00:15:04.410 --> 00:15:07.930
生成缩略图为您的应用程序。

00:15:08.470 --> 00:15:14.330
因此，此应用程序中我将到通过我的 Facebook 帐户登录

00:15:14.380 --> 00:15:17.870
但我会检索信息关于我的朋友，他们的图片。

00:15:18.170 --> 00:15:20.270
但我会以显示您在用户界面中。

00:15:21.060 --> 00:15:24.040
这同样是一个功能在 ASP.NET 中我们有

00:15:24.090 --> 00:15:27.190
您可以记录中的模板通过诸如社会提供程序

00:15:27.240 --> 00:15:32.630
Facebook，Google，Microsoft 帐户这样，开发人员可以提供

00:15:32.680 --> 00:15:34.020
增强的体验。

00:15:37.610 --> 00:15:39.120
请允许我通过 Facebook 记录中。

00:15:40.150 --> 00:15:43.440
因此，这将转到 Facebook。它能验证我。说回

00:15:43.490 --> 00:15:48.690
给应用程序。我通过身份验证后它检索我的个人资料图片。

00:15:49.070 --> 00:15:50.650
如果我单击我的姓名

00:15:52.530 --> 00:15:55.590
您将看到的列表朋友就会出现。我

00:15:55.640 --> 00:15:58.450
显示所有照片。和您将看到如何将图片

00:15:58.500 --> 00:16:01.850
在某种程度可以巧妙地设置格式缩略图，并因此想象

00:16:01.900 --> 00:16:04.500
我必须编写的代码的数量若要生成此类型的

00:16:04.550 --> 00:16:09.640
提价。因此，如果我切换回我的应用程序，如果我转到

00:16:09.690 --> 00:16:11.770
我 Facebook 的信息页面，

00:16:13.970 --> 00:16:16.530
这是代码的我的数量编写要生成缩略图。

00:16:16.580 --> 00:16:20.150
同样，还有极少量 CSS。以下是 CSS 类，

00:16:20.200 --> 00:16:23.880
来自于引导的框架。我无需编写

00:16:23.930 --> 00:16:29.350
任何自定义的 CSS 来生成缩略图查看所有图像。

00:16:29.400 --> 00:16:34.510
同样只是在关闭它： 引导 ASP.NET 中的集成

00:16:34.560 --> 00:16:39.640
模板可简化若要开始使用模板

00:16:39.690 --> 00:16:43.720
这是响应速度快，这是移动友好的是地铁

00:16:43.770 --> 00:16:47.370
应用了主题，这样就可以真正轻松您可以生成应用程序

00:16:47.420 --> 00:16:51.220
这样，您可以将不同的窗体因素和不同的浏览器。

00:16:51.690 --> 00:16:54.390
也可以花费大部分时间构建您的应用程序特定

00:16:54.510 --> 00:16:57.220
逻辑并且不用担心UI 框架。

00:16:57.730 --> 00:17:00.560
因此，我希望您会喜欢它。感谢您为观看这段视频。

00:17:00.610 --> 00:17:03.870
我希望您喜欢引导在 Visual Studio 中的集成

00:17:03.920 --> 00:17:07.640
ASP.NET，而我希望您将使用这些模板来生成

00:17:07.690 --> 00:17:11.440
启动应用程序。若要了解详细信息您可以转到 ASP.NET 网站

00:17:11.490 --> 00:17:17.300
并了解您可以如何集成更好的引导。