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
今天我要展示的是 Visual Studio 2013 的新的 ASP.NET 範本

00:00:21.040 --> 00:00:24.710
隨著愈來愈多人在網路上進行瀏覽

00:00:24.760 --> 00:00:28.600
透過電話、平板和各種不同的裝置，網站開發人員

00:00:28.650 --> 00:00:31.740
開始發現, 為不同解析度的裝置建置網站是個很重要的課題

00:00:32.410 --> 00:00:35.530
在範本中, 我們已經開始使用 Bootstrap 框架

00:00:35.580 --> 00:00:38.260
這對 Visual Studio 而言, 如果和過去的版本比較的話

00:00:38.310 --> 00:00:41.110
這是一個很大的進步

00:00:42.050 --> 00:00:44.860
Bootstrap 可以讓網站的建置變得很容易

00:00:44.910 --> 00:00:49.340
它適用於各種不同的解析度，而在本介紹影片中 ，

00:00:49.390 --> 00:00:53.990
我們會看到這些範本如何套用 Bootstrap，以及

00:00:54.040 --> 00:00:57.190
您可以怎樣建置此類專案。以下，

00:00:57.240 --> 00:01:01.210
我將示範如何在 Visual Studio 2013 的

00:01:01.260 --> 00:01:03.380
ASP.NET 範本中整合 Bootstrap。

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、透過手機式平板等等。這也使得網站開發者

00:01:19.300 --> 00:01:22.760
愈來愈需要讓自己的網站支援

00:01:22.810 --> 00:01:25.790
解析度各有不同的各種裝置

00:01:26.520 --> 00:01:31.390
同時, 我們也算是往行動網站開發的方向走; 這種趨勢

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; 你必須在程式裡放入許多與 UI 設計

00:01:43.860 --> 00:01:46.650
息息相關的程式邏輯。

00:01:47.270 --> 00:01:51.030
這就是為什麼我們要為 ASP.NET 開發者

00:01:51.080 --> 00:01:55.920
設計 Visual Studio 2013 時, 在所有預設的範本中

00:01:55.970 --> 00:01:58.210
使用 Bootstrap 框架。

00:01:58.730 --> 00:02:03.940
Bootstrap 是一種 CSS 架構, 它可以

00:02:03.990 --> 00:02:05.480
讓網頁的開發變得更容易

00:02:06.210 --> 00:02:08.960
所以，身為一位網站開發者, 如果您想像一下

00:02:09.010 --> 00:02:12.540
所有例行性的工作，包括調整影像，設定表單和表格欄位等等,

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
引進 Bootstrap 之後, 它可以

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、WebForms、Spar 應用程式和 Web API 應用程式等等,

00:02:43.120 --> 00:02:45.810
所有我們的範本都套上了 Bootstrap。

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
那麼, 到底 Bootstrap 是什麼？

00:02:59.890 --> 00:03:05.840
Bootstrap 基本上是個 CSS 框架, 它可以讓你做網站開發。

00:03:05.890 --> 00:03:09.050
Bootstrap 專門處理網頁開發工作中

00:03:09.100 --> 00:03:11.310
更關鍵的那部份，也就是「自適應式」的 (responsive) 能力。

00:03:11.890 --> 00:03:17.370
它採用了以行動裝置為優先的做法。它使用平面設計手法做為

00:03:18.220 --> 00:03:21.990
前端的開發者體驗。因此, 當你開始開發網站程式時,

00:03:22.040 --> 00:03:23.600
你自動得到上述的各種優點。

00:03:24.510 --> 00:03:27.330
我覺得, 我很榮幸地說：我們在整合 Bootstrap 和 VS 的過程中

00:03:27.380 --> 00:03:29.880
所做的最棒的事就是

00:03:29.930 --> 00:03:34.500
我們己經把 Bootstrap 3 整合到 Visual Studio 2013 RTM。

00:03:34.550 --> 00:03:38.830
而比起 Bootstrap 2, Bootstrap 3 做了很大的改善

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
就是我們把最新、最好的網頁開發技術提供給你,

00:03:57.960 --> 00:04:01.030
當你開始使用 Visual Studio 的 ASP.NET

00:04:01.080 --> 00:04:05.320
進行開發時, 你用的是已經是最新的技術。

00:04:05.370 --> 00:04:08.220
接著, 我將為你示範幾個

00:04:08.610 --> 00:04:11.710
整合了 Bootstrap 的樣片, 我也會快速講解一下

00:04:11.760 --> 00:04:15.780
Bootstrap 是如何被整合進去的。這樣你就可以很快地

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
其數量是相當少的。如果我把我的 Site.css 打開, 你可以看看

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
內容調整而已。

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 Surface 上的 Windows Store 打開這個網站，

00:05:37.360 --> 00:05:42.810
你會發現它看起來真是時髦。

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
在我的平板上看起來還算不錯。這就是 Bootstrap

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 碼。另一個 Bootstrap 的優勢在於

00:06:22.150 --> 00:06:26.420
Bootstrap 之下的生態系統。想像一下，

00:06:26.470 --> 00:06:28.470
假設你必須為網站提供佈景主題。

00:06:29.100 --> 00:06:32.130
在以往，對網站開發而言，佈景主題一向是

00:06:32.180 --> 00:06:33.680
最令人頭痛的。

00:06:34.220 --> 00:06:37.900
整合 Bootstrap 之後，一旦選定網站的範本，

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
我說你只需要下載這個 Bootstrap 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
把原來的 Bootstrap 用剛下載回來的東西進行覆寫。

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
如果你想知道如何把 Bootstrap 放到

00:07:45.190 --> 00:07:51.300
你的專案裡，我們已經把 Bootstrap 包成 NuGet 套件。

00:07:51.350 --> 00:07:56.190
至於已裝安裝此套件的專案範本，它們稱為已安裝 Bootstrap 的範本。

00:07:56.790 --> 00:08:00.590
如果你一開始選擇的不是 ASP.NET 專案，你只需要

00:08:00.640 --> 00:08:04.010
下載並安裝這個 Bootstrap 套件即可。

00:08:04.820 --> 00:08:09.020
這個 NuGet 套件夾帶了以下檔案： 它帶

00:08:09.070 --> 00:08:13.500
它會建立一個 fonts 資料夾，還有所有 Bootstrap 所需的 CSS 檔案，

00:08:13.550 --> 00:08:18.450
還有 Bootstrap 必需的 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
稍為補充一下，由於這些專案範本已針對

00:08:39.120 --> 00:08:42.480
Bootstrap 做最佳化動件，它同樣可以達成網路上傳作業的

00:08:42.530 --> 00:08:42.940
最佳化。

00:08:42.990 --> 00:08:50.810
所以 Bootstrap 提供了佈景主題，也就是所謂的 Grid 系統。

00:08:50.860 --> 00:08:54.760
整個 Bootstrap 框架就是以 Grid (格線) 的思維而設計的。

00:08:54.810 --> 00:09:00.020
所以說，Bootstrap 系統採用 Grid 做為可自動調適大小的基礎。

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
調整各別的欄寬，確定所有的格線大小加總起來仍然為 12 就行了。

00:09:36.570 --> 00:09:37.490
(*譯註: 畫面中文字有三欄，而Grid 有12 欄, 這兩種「欄」的英文均為 "column")

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
並把網站的格局破壞了。而且看來很醜

00:10:48.970 --> 00:10:52.480
有了 Bootstrap，我現在可以幫這張圖加上屬性，

00:10:52.530 --> 00:10:58.590
亦即 class="image-responsive"，這會讓它具有自我調適的效果

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
如果我把這張圖片放在這個 div 元素裡面，

00:11:17.150 --> 00:11:22.070
我也可以讓它呈現 Bootstrap 所提供的

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
我只需要套上 Bootstrap 框架，然後我的網站就自動

00:11:48.070 --> 00:11:50.470
具備自我調適的能力 -- 圖片也一樣。

00:11:51.460 --> 00:11:55.590
另一個常見的案例是表格。

00:11:57.380 --> 00:12:01.970
現在我們來看看 Bootstrap 如何幫我們調整表格的樣式。

00:12:02.500 --> 00:12:06.350
這裡是我的應用程式裡的一個表格。

00:12:07.470 --> 00:12:12.660
我把它移到這裡，然後回到我的網站，按 Ctrl-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
像是 class="table"；這樣會讓這個表格套上

00:12:32.780 --> 00:12:36.920
最基本的格線。我也可以加上許多花樣。我可以

00:12:36.970 --> 00:12:42.580
把表格加上框線，或者加上間隔條紋。

00:12:43.500 --> 00:12:49.130
現在我想把表格加上停駐 (hover) 的效果。

00:12:54.460 --> 00:12:57.140
我們也把 Bootstrap 的 IntelliSense 做進去了，你會注意到

00:12:57.190 --> 00:13:00.590
當我在打字時，當我在輸入 Bootstra 的 CSS 類別時，提示框就會出現。

00:13:00.640 --> 00:13:03.200
這些類別都是在 Bootstrap 框架裡定義的。

00:13:03.500 --> 00:13:07.270
在 Visual Studio 中的網站開發者體驗中，我們加入了

00:13:07.320 --> 00:13:13.470
這類 IntelliSense 支援。現在，如果你按下 Ctrl - 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
所以 Bootstrap 只不過是讓你很容易地把這些功能做出來而已。

00:13:32.110 --> 00:13:36.590
Bootstrap 還提供了一個叫做 Glyphicons 的功能。現在假設

00:13:36.640 --> 00:13:41.670
我想在這裡放個郵件圖示，那麼我可以指定一個

00:13:44.480 --> 00:13:46.520
叫做 glyphicon-envelope 的類別。

00:13:48.920 --> 00:13:53.780
當我重新執行我的應用程式，移至 Contact，你就能看見

00:13:53.830 --> 00:13:55.920
我已經有了一個

00:13:57.460 --> 00:14:00.370
信封或者郵件的圖示。

00:14:01.010 --> 00:14:04.360
因此，再一次，這就是 Bootstrap 如何讓你

00:14:04.410 --> 00:14:09.480
可以很輕鬆地把這項功能加入你的應用程式。

00:14:09.530 --> 00:14:14.970
要學習 Bootstrap，有個很好的途徑，就是前往他們的網站

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
你可以找到一些很基本的表格樣式的範例，

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
Bootstrap 還有另一項功能，在於 JavaScript 這部份

00:14:43.190 --> 00:14:48.070
它讓你可以很輕鬆地做出強制回應式的下拉清單 (modal dropdowns)。這個示範一下

00:14:48.120 --> 00:14:51.410
強制回應對話框在 Bootstrap 之下看起來應該

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
FacebookInfo 這個網頁程式，

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
都是 Bootstrap 框架原來就提供的。我不必撰寫

00:16:23.930 --> 00:16:29.350
任何客製化的 CSS，就可以做出所有圖片的縮圖。

00:16:29.400 --> 00:16:34.510
所以，總結一下：在 ASP.NET 範本中整合 Bootstrap，

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 和 ASP.NET 中的 Bootstrap 

00:17:03.920 --> 00:17:07.640
整合功能，我也希望你多多使用這些範本來建立

00:17:07.690 --> 00:17:11.440
你的應用程式。若想瞭解更多，歡迎前往 ASP.NET 網站

00:17:11.490 --> 00:17:17.300
看看如何更進一步地整合 Bootstrap 的其它功能。