>本文由Microsoft贊助。感謝您支持使SitePoint成為可能的贊助商。 >在這一系列文章中，我們將使用Microsoft的現(xiàn)代IDE：Visual Studio Community 2015，以及各種有用的工具，這些工具可能會(huì)熟悉，包括Bootstrap，MailChimp和Adobe Kuler。 Visual Studio最常用作開發(fā)工具。它當(dāng)然可以履行這個(gè)角色。但是許多人可能不知道它也是一種設(shè)計(jì)工具。它對(duì)前端語言（例如CSS，Angularjs，jQuery等）具有完整的自動(dòng)完整支持。
>>在代碼中進(jìn)行了長(zhǎng)時(shí)間的鍵入后，您可能會(huì)回頭看，并查看代碼格式已關(guān)閉或可以使用一些清理。 Visual Studio可以使用干凈，可讀的對(duì)齊方式介入并格式化您的代碼，無論是后端還是前端代碼。
>組合Bootstrap，它已在您的（入門網(wǎng)絡(luò)）項(xiàng)目中已下載并提供，Visual Studio的IDE設(shè)置了一個(gè)很好的環(huán)境，用于設(shè)計(jì)一個(gè)漂亮，專業(yè)的外觀網(wǎng)站。鑰匙要點(diǎn)
Visual Studio社區(qū)2015是一種現(xiàn)代IDE，既是開發(fā)和設(shè)計(jì)工具，又可以自動(dòng)完成對(duì)前端語言的支持，并且能夠格式化代碼以進(jìn)行清潔，可讀性的對(duì)準(zhǔn)。
Visual Studio 2015介紹了新功能，例如項(xiàng)目參考中的DLL的更好組織，一個(gè)名為WWWRoot的靜態(tài)文件的新文件夾，以及更改代碼并刷新瀏覽器的能力而無需重新編譯項(xiàng)目。
- >本文以完整的網(wǎng)頁摘要結(jié)束，強(qiáng)調(diào)了如何使用Visual Studio 2015和Bootstrap來創(chuàng)建一個(gè)看上去很專業(yè)的網(wǎng)站，并以最少的精力創(chuàng)建了一個(gè)專業(yè)的網(wǎng)站。接下來的步驟包括集成MailChimp和添加新頁面。
- > Visual Studio 2015功能 Visual Studio 2015為我們的開發(fā)中的助手介紹了一些很棒的新功能。其中之一是組織。我們的項(xiàng)目參考文獻(xiàn)中不再有大量的DLL串行列表。所有這些DLL現(xiàn)在已分組。擴(kuò)展一個(gè)組揭示了相關(guān)的DLL和其他相關(guān)的參考，例如Nuget軟件包。這使參考部分非常簡(jiǎn)潔，并使您避免在不同的位置搜索各種參考類型。
>項(xiàng)目中還包含一個(gè)新文件夾。這就是wwwroot。該文件夾包含靜態(tài)文件，將它們與動(dòng)態(tài)文件分開。您可能想知道：“這兩種類型有什么區(qū)別？”靜態(tài)文件是圖像，CSS和JavaScript，以及Bootstrap和jQuery等框架。動(dòng)態(tài)文件主要是CS和CSHTML - 能夠處理C ##代碼的文件。 2015年Visual Studio Community Community 2015還增加了一些開發(fā)人員工作流程的效率。例如，一種是在控制器中更改代碼的能力，并可以刷新瀏覽器而無需再次編譯項(xiàng)目。刷新頁面后，您的更改將在瀏覽器中呈現(xiàn)。與重新編譯和運(yùn)行應(yīng)用程序相比，這節(jié)省了幾秒鐘的時(shí)間。 通過引入Bower，可以簡(jiǎn)化下載軟件包和框架。在Root Project文件夾中是一個(gè)名為Bower.json的文件。在此文件中，您可以配置項(xiàng)目中包含的框架和版本。以下是來自Bower的代碼段。
>您可以看到包括jQuery，還可以使用版本。這是管理框架的一個(gè)非常簡(jiǎn)單且快速的慣例。
>我們將在本文的稍后詳細(xì)討論上述功能。首先，讓我們見面Andy。
><span>{
</span><span>"name": "WebApplication",
</span><span>"private": true,
</span><span>"dependencies": {
</span> <span>"bootstrap": "3.0.0",
</span> <span>"jquery": "1.10.2",
</span> <span>"jquery-validation": "1.11.1",
</span> <span>"jquery-validation-unobtrusive": "3.2.2",
</span> <span>"hammer.js": "2.0.4",
</span> <span>"bootstrap-touch-carousel": "0.8.0"
</span><span>},</span>開發(fā)人員/設(shè)計(jì)師
中間部分將包含三列，用于具有不同的內(nèi)容。例如，最新博客文章，產(chǎn)品預(yù)覽或簡(jiǎn)短的新聞?wù)?/p>>
>網(wǎng)站的底部將包含快樂客戶的引號(hào)。客戶希望允許從網(wǎng)站購(gòu)買他的課程。他還希望在右上角部分中提供電子郵件注冊(cè)表格。
>我們將與安迪（Andy）建立客戶網(wǎng)站一起跟隨他。有很多東西要涵蓋，所以讓我們開始。
>bootstrap
> Visual Studio將使用MVC提供出色的應(yīng)用結(jié)構(gòu)，但Bootstrap非常適合加快設(shè)計(jì)過程。它也完全響應(yīng)。
這個(gè)第一個(gè)里程碑網(wǎng)站將看起來像這樣：
>讓我們看一下網(wǎng)站中使用的一些模板。轉(zhuǎn)到主要的引導(dǎo)網(wǎng)站，然后在頂部單擊入門。向下滾動(dòng)經(jīng)過基本模板，直到您達(dá)到示例為止。
> Jumbotron看起來將滿足我們對(duì)網(wǎng)站頂部的要求。
>它的頂部有一個(gè)較大的灰色區(qū)域，我們可以用圖像替換?；疑珔^(qū)域頂部也有文本。這三列也在那里。好！
>現(xiàn)在我們需要為客戶報(bào)價(jià)找到一些東西。查看模板示例，看起來旋轉(zhuǎn)木馬會(huì)做我們想要的。
>您可以在縮略圖中看到它，但是如果單擊它，它將顯示完整的模板。向該模板的底部滾動(dòng)。有幾行和較大的文本可以很好地適用于報(bào)價(jià)。
配色方案對(duì)于配色方案，我們將在Adobe Kuler上查看一些流行的方案。前往https://color.adobe.com，然后單擊“探索”，然后是最受歡迎的。我們正在尋找具有良好基于土方色調(diào)的方案的東西 - 蜜罐看起來很符合賬單。
如果您將鼠標(biāo)移到此方案上，則會(huì)出現(xiàn)一個(gè)提示。單擊編輯。這使您可以查看配色方案的詳細(xì)信息。單擊更明亮的黃色。這是我們將在Jumbotron中用于標(biāo)題字體的顏色。
>
啟動(dòng)一個(gè)新項(xiàng)目
開始，在Visual Studio中啟動(dòng)一個(gè)新項(xiàng)目，然后選擇ASP.NET Web應(yīng)用程序，如下所示。
接下來，選擇ASP.NET預(yù)覽啟動(dòng)Web：
如果您運(yùn)行該項(xiàng)目，則應(yīng)顯示一個(gè)看起來與以下幾個(gè)相似之處的網(wǎng)頁：
>
>我們將使用上述引導(dǎo)模板中的零件來修改此基礎(chǔ)站點(diǎn)的布局。
>在我們這樣做之前，我想指出Visual Studio 2015中的一些新功能。以下是應(yīng)用程序文件夾結(jié)構(gòu)的屏幕截圖。注意wwwroot文件夾。該文件夾包含我們的所有靜態(tài)文件。這些包括CSS，圖像和JS文件。
wwwroot文件夾背后的推理是將動(dòng)態(tài)代碼與靜態(tài)代碼分開。 c ##（動(dòng)態(tài)）代碼文件仍在控制器，模型和視圖文件夾中，正如您所期望的那樣。
在下面，我擴(kuò)展了wwwroot文件夾，以更好地查看其內(nèi)部結(jié)構(gòu)及其內(nèi)部的內(nèi)容。
>另一件事發(fā)生了變化的事情是現(xiàn)在如何將DLL和其他參考分組。我們有一個(gè)可以擴(kuò)展的組，而不是大量參考。
>在DNX 4.5.1和DNX Core 5.0下方注意是列出的唯一參考。如果我擴(kuò)展了DNX Core 5.0參考，我會(huì)看到Nuget軟件包和DLL的列表。
這只是一種不想堵塞開發(fā)環(huán)境的好方法，您可能不想知道。
站點(diǎn)開發(fā)
>我們的ASP.NET 5入門站點(diǎn)包括引導(dǎo)程序。無需再下載引導(dǎo)程序了。在以前版本的Visual Studio中，我們需要一個(gè)Nuget軟件包來進(jìn)行引導(dǎo)或從Bootstrap網(wǎng)站下載并將其添加到我們的項(xiàng)目中。
為了幫助管理客戶端框架，Visual Studio現(xiàn)在包括Bower。如果您以項(xiàng)目的根源查看，您會(huì)看到Bower.json。在這里，您會(huì)看到帶有特定版本的引導(dǎo)程序的引用。添加新的客戶端框架將檢索該版本并將其帶入項(xiàng)目。
開始，我們想做的就是從Bootstrap網(wǎng)站下載代碼示例。轉(zhuǎn)到GetBootstrap.com，然后單擊下載Bootstrap。在源代碼下，單擊下載源。解開此文件，然后轉(zhuǎn)到文檔>示例> jumbotron。將Jumbotron.css文件拖到wwwroot> CSS文件夾中。您也可以將索引.html拖到項(xiàng)目的根部。由于這是一個(gè)MVC站點(diǎn)，因此不會(huì)顯示該站點(diǎn)的啟動(dòng)。但是我們將其用作參考。我們將首先修改主站點(diǎn)布局。在解決方案資源管理器中，打開視圖>共享> _Layout.cshtml。您將在此文件的頂部看到以下CSS文件引用：
>
>刪除bootstrap-touch-carousel.css Line。在bootstrap.css行下創(chuàng)建一個(gè)新線路。拖動(dòng)Jumbotron.css文件，然后將其放在這條新線上。現(xiàn)在應(yīng)該看起來如下：
>打開視圖文件夾中的主文件夾，然后打開index.cshtml文件。刪除此文件中的所有內(nèi)容，除了頂部：
<span>{
</span><span>"name": "WebApplication",
</span><span>"private": true,
</span><span>"dependencies": {
</span> <span>"bootstrap": "3.0.0",
</span> <span>"jquery": "1.10.2",
</span> <span>"jquery-validation": "1.11.1",
</span> <span>"jquery-validation-unobtrusive": "3.2.2",
</span> <span>"hammer.js": "2.0.4",
</span> <span>"bootstrap-touch-carousel": "0.8.0"
</span><span>},</span>
>打開我們之前拖動(dòng)的index.html bootstrap文件。折疊NAV，DIV類= Jumbotron和Div Class =容器節(jié)點(diǎn)，因此它們更容易看到，如下所示：
<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="~/lib/bootstrap/css/bootstrap.css"</span> /></span> </span><span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="~/css/site.css"</span> /></span> </span><span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="~/lib/bootstrap-touch-carousel/css/bootstrap-touch-carousel.css"</span> /></span></span>
>復(fù)制兩個(gè)divs，然后將它們粘貼到index.cshtml文件中?，F(xiàn)在運(yùn)行該應(yīng)用程序。您應(yīng)該看到以下內(nèi)容：
<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="~/lib/bootstrap/css/bootstrap.css"</span> /></span> </span><span><span><span><link</span> href<span>="~/wwwroot/css/jumbotron.css"</span> rel<span>="stylesheet"</span> /></span> </span><span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="~/css/site.css"</span> /></span></span>
>您會(huì)注意到我們有兩個(gè)頁腳?？梢酝ㄟ^在index.cshtml的底部刪除以下代碼來解決這一點(diǎn)。
<span>{
</span><span>"name": "WebApplication",
</span><span>"private": true,
</span><span>"dependencies": {
</span> <span>"bootstrap": "3.0.0",
</span> <span>"jquery": "1.10.2",
</span> <span>"jquery-validation": "1.11.1",
</span> <span>"jquery-validation-unobtrusive": "3.2.2",
</span> <span>"hammer.js": "2.0.4",
</span> <span>"bootstrap-touch-carousel": "0.8.0"
</span><span>},</span>
在同一文件中，我們可以在這三列中添加一些更有意義的標(biāo)題。在三個(gè)>線下方的H2標(biāo)簽中添加以下標(biāo)題：
<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="~/lib/bootstrap/css/bootstrap.css"</span> /></span> </span><span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="~/css/site.css"</span> /></span> </span><span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="~/lib/bootstrap-touch-carousel/css/bootstrap-touch-carousel.css"</span> /></span></span>>
如果您運(yùn)行了應(yīng)用程序，則應(yīng)看到以下內(nèi)容：
更新Jumbotron
>現(xiàn)在，我們可以使用圖像更新我們的Jumbotron。 Jumbotron是網(wǎng)頁頂部的大灰色盒子。
>
我們將使用此圖像作為Jumbotron的圖像。下載大版本，然后將其放入wwwroot>“圖像”中。打開wwwroot> css> site.css。在此文件的底部輸入以下內(nèi)容：<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="~/lib/bootstrap/css/bootstrap.css"</span> /></span> </span><span><span><span><link</span> href<span>="~/wwwroot/css/jumbotron.css"</span> rel<span>="stylesheet"</span> /></span> </span><span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="~/css/site.css"</span> /></span></span>>
您實(shí)際上可以拖動(dòng)圖像，Visual Studio將創(chuàng)建必要的背景圖像代碼。
顏色fffad5來自我們的Adobe Kuler配色。
>我們現(xiàn)在可以更新Jumbotron文本。返回index.cshtml。打開Jumbotron節(jié)點(diǎn)并替換：
<span>@{
</span> ViewBag.Title = <span>"Home Page";
</span><span>}</span>>以下內(nèi)容：
<span><span><span><hr</span>></span> </span><span><span><span><footer</span>></span> </span> <span><span><span><p</span>></span>© Company 2014<span><span></p</span>></span> </span><span><span><span></footer</span>></span></span>>讓我們運(yùn)行該應(yīng)用程序，看看到目前為止我們擁有的內(nèi)容。您的頁面應(yīng)該如下：
如您所見，我們已經(jīng)接近了。 Jumbotron應(yīng)該一直延伸到邊緣。這使我們的整體設(shè)計(jì)更深入。為此，在index.cshtml中，刪除周圍@renderbody（）的容器符號(hào)div。
現(xiàn)在，您的代碼應(yīng)該看起來如下：
>
更新字體
>在蒙托馬內(nèi)，我們想要一個(gè)不同的前線。更非正式的東西。為此，我們將使用名為Dancing腳本的字體。 Google Web字體將幫助我們獲取字體。在這里導(dǎo)航，在左上方，鍵入舞蹈，這應(yīng)該帶來跳舞腳本。單擊添加到收集，然后單擊使用。取消選中正常并檢查粗體。復(fù)制底部的腳本鏈接。
在_Layout.cshtml中，
在標(biāo)題標(biāo)簽下粘貼腳本鏈接。它應(yīng)該看起來如下：
>現(xiàn)在我們將向site.css添加新類。這將使我們能夠?qū)⒆煮w定位為特定文本。將以下內(nèi)容添加到site.css：
Latest Blog Post New York, New York Workshop Beginner 1 Lessons
在Jumbotron中，添加到H1標(biāo)簽中，因此看起來如下：
<span><span>.jumbotron</span> {
</span> <span>background-image: <span>url('../images/musician-349790_1920.jpg')</span>;
</span> <span>background-size:cover;
</span> <span>color:#fffad5;
</span><span>}</span>運(yùn)行該應(yīng)用程序并查看Jumbotron標(biāo)題字體?，F(xiàn)在應(yīng)該在腳本中。修飾觸摸
<span><span><span><div</span> class<span>="container"</span>></span> </span><span><span><span><h1</span>></span>Hello, world!<span><span></h1</span>></span> </span><span><span><span><p</span>></span>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.<span><span></p</span>></span></span>
為了為我們的設(shè)計(jì)的第一階段提供一些拋光，我們將添加背景并對(duì)頁腳進(jìn)行一些調(diào)整，后者目前剩下的。
>我們將使用圖像作為背景，與我們的泥土色調(diào)匹配的東西。將其下載為“無縫紙質(zhì)紋理”。下載此紋理并將其添加到wwwroot> Image。> open site.css。在第一個(gè)車身標(biāo)簽中添加新線路。然后將紙質(zhì)紋理拖入其中。它應(yīng)該看起來如下：
<span>{
</span><span>"name": "WebApplication",
</span><span>"private": true,
</span><span>"dependencies": {
</span> <span>"bootstrap": "3.0.0",
</span> <span>"jquery": "1.10.2",
</span> <span>"jquery-validation": "1.11.1",
</span> <span>"jquery-validation-unobtrusive": "3.2.2",
</span> <span>"hammer.js": "2.0.4",
</span> <span>"bootstrap-touch-carousel": "0.8.0"
</span><span>},</span>
在我們?cè)谶@里時(shí)，在此文件的底部添加以下內(nèi)容：
<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="~/lib/bootstrap/css/bootstrap.css"</span> /></span> </span><span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="~/css/site.css"</span> /></span> </span><span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="~/lib/bootstrap-touch-carousel/css/bootstrap-touch-carousel.css"</span> /></span></span>現(xiàn)在，如果您現(xiàn)在運(yùn)行該應(yīng)用程序，則應(yīng)該可以看到背景，并且頁腳遠(yuǎn)離邊緣。
>客戶報(bào)價(jià)
>我們現(xiàn)在可以格式化我們的報(bào)價(jià)部分。引號(hào)的代碼可以在同一bootstrap示例文件夾中找到。打開輪播文件夾，然后打開index.html文件。
>>從此注釋開始復(fù)制featurette代碼
并以此評(píng)論結(jié)尾
<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="~/lib/bootstrap/css/bootstrap.css"</span> /></span> </span><span><span><span><link</span> href<span>="~/wwwroot/css/jumbotron.css"</span> rel<span>="stylesheet"</span> /></span> </span><span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="~/css/site.css"</span> /></span></span>
現(xiàn)在，將此代碼粘貼到我們之前添加的三列下方的index.cshtml文件中。您應(yīng)該看起來如下：
<span>@{
</span> ViewBag.Title = <span>"Home Page";
</span><span>}</span>
>您可以通過打開每個(gè)featurette div并修改以下每個(gè)H2標(biāo)簽之間的文本：
>
您完成的網(wǎng)頁看起來應(yīng)與以下內(nèi)容相似：
<span><span><span><hr</span>></span> </span><span><span><span><footer</span>></span> </span> <span><span><span><p</span>></span>© Company 2014<span><span></p</span>></span> </span><span><span><span></footer</span>></span></span>>
摘要
>使用Visual Studio 2015和Bootstrap，Andy能夠在很少努力的情況下創(chuàng)建一個(gè)很棒的網(wǎng)站。
下次，我們將研究如何集成MailChimp，以使Andy的客戶能夠向客戶發(fā)送電子郵件更新。我們將添加幾個(gè)新頁面，例如感謝頁面注冊(cè)電子郵件列表和聯(lián)系頁面的人。。
以上是Visual Studio社區(qū)2015：建立網(wǎng)站的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)
您的設(shè)備喂養(yǎng)AI助手并收集個(gè)人數(shù)據(jù)，即使他們睡著了。這是如何知道您分享的內(nèi)容。
Jul 05, 2025 am 01:12 AM
不管喜歡與否，人工智能已成為日常生活的一部分。許多設(shè)備（包括電動(dòng)剃須刀和牙刷）已成為AI驅(qū)動(dòng)的“使用機(jī)器學(xué)習(xí)算法來跟蹤一個(gè)人的使用方式，Devi的方式
由于新的Microsoft AI型號(hào)
Jul 05, 2025 am 12:44 AM
一種新的人工智能（AI）模型已經(jīng)證明了比幾個(gè)使用最廣泛使用的全球預(yù)測(cè)系統(tǒng)更快，更精確地預(yù)測(cè)重大天氣事件的能力。該名為Aurora的模型已接受過培訓(xùn)。
高級(jí)AI型號(hào)的CO＆＃8322;回答相同問題時(shí)的排放量比更常見的LLM
Jul 06, 2025 am 12:37 AM
根據(jù)最近的一項(xiàng)研究，我們?cè)噲D使AI模型的功能越精確，其碳排放量就越大 - 某些提示產(chǎn)生的二氧化碳比其他提示高達(dá)50倍。
威脅AI聊天機(jī)器人，它將撒謊，作弊和'讓您死”以阻止您，并警告
Jul 04, 2025 am 12:40 AM
根據(jù)一項(xiàng)新的研究，人工智能（AI）模型在模型的目標(biāo)和用戶決定之間發(fā)生沖突時(shí)可能會(huì)威脅和勒索人類。
ai不斷地'幻覺”，但是有一個(gè)解決方案
Jul 07, 2025 am 01:26 AM
大型技術(shù)實(shí)驗(yàn)人工智能（AI）的主要關(guān)注點(diǎn)并不是它可能主導(dǎo)人類。真正的問題在于大語言模型（LLMS）的持續(xù)不準(zhǔn)確性，例如Open AI的Chatgpt，Google的Gemini和
為什么AI會(huì)更頻繁地進(jìn)行Hallucin，我們?nèi)绾瓮Ｖ顾?/a>
研究表明，當(dāng)問題變得太困難時(shí)
Jul 07, 2025 am 01:02 AM
人工智能（AI）推理模型并不像看起來那樣能力。實(shí)際上，根據(jù)Apple的研究人員的說法，當(dāng)任務(wù)變得過于復(fù)雜時(shí)，它們的表現(xiàn)會(huì)完全崩潰。
在網(wǎng)絡(luò)攻擊M＆S和合作社的網(wǎng)絡(luò)攻擊背后捕獲了狩獵者的逮捕
Jul 11, 2025 pm 01:36 PM
英國(guó)國(guó)家犯罪局（NCA）逮捕了四名涉嫌參與針對(duì)Marks和Spencer（M＆S），合作社和Harrods的網(wǎng)絡(luò)攻擊的人
