共用方式為

本文章是由機器翻譯。

網站開發

建築的回應式網站，引導

Keith Pijanowski

它只是時間的前客戶點擊你的網站的 URL 在其行動裝置上。Will使用者看到您的網站不能用在手機上因為的網站的設計為桌面只的呈現嗎？如果是這樣，該使用者將最有可能繼續前進到一個更加適合行動裝置的網站。如果該使用者可以相反遇到專為移動表單的一個因素，使用者體驗並享受輕鬆地與您的網站進行交互嗎？

在過去，一個 Web 網站，支援移動和桌面所需的不同代碼的基礎。今天，然而，有允許網站的 Web 頁來支援手機、 平板電腦、 桌上型電腦和甚至大螢幕桌上型電腦的 UI 框架 — — 所有與單個代碼庫。雖然這些工具並不是靈丹妙藥移動 Web 開發人員，他們可以極大地減輕發展進程。儘管如此，必須考慮來確定一個人是否適合您的網站。

這篇文章概述了這些工具之一的引導，包含了許多Visual Studio2013 Web 應用程式範本。引導是一個框架，使回應式 Web 設計 （RWD） — — 的方法設計的 Web 網站，其目的是提供可以接受的觀看體驗跨所有形式因素與單個代碼庫。在概述之後, 我會考慮一些因素，可以説明您決定像引導這樣的框架是否適合您的網站。

開始

它已採取一定的演化軟體產業帶來點像引導的解決方案出現。後一個斷斷續續的開始，從 1998 年開始，在其中無線標記語言 (WML)、 緊湊的 HTML、 XHTML 移動設定檔浮出水面，然後消失了，HTML5 終於在 2009 年成為下一代 HTML 標準的所有設備。 但單單制定標準並不足夠。雖然移動 Web 標記的標準是不斷變化、 重大進展也發生硬體、 移動瀏覽器和頻寬。處理器速度越來越快，到了他們可以在其中顯示的任何 Web 頁 （即使沒有為行動裝置設計了頁面） 和頻寬增加先進的移動瀏覽器。這創造一種環境，開發人員可以接管。

開發商喜歡讓其他開發人員工具，移動網路也不例外。今天市場上有十幾個不同的使用者介面框架。它會對其中一種框架"最好"的標籤不公平，因為有不同的方法和 Web 網站有不同的要求。我選擇了這篇文章的引導因為它有通過固體水準完整地記錄、 和ASP.NETWeb 應用程式範本中包括。

引導是什麼？

引導是構建 Web 網站的回應 UI 框架。引導程式的框架，像許多其他 UI 框架，用於 Web 開發，是一家集的 CSS 類、 UI 元件和 JQuery 外掛程式。引導被認為是一個羽量級框架。換句話說，它使用 CSS 比 JavaScript 來做它的工作。儘管引導被視為輕量，使用引導工具的網頁仍然需要更多的處理要比專為一個給定的表單因素編寫的網頁呈現。出於此原因，性能應該是一個重要的考慮，當設計、 開發和測試使用引導程式框架的任何部分的頁面。

引導程式在自動的為你做了很多。它還允許您輕鬆地定制預設行為的具體形式的因素，同時保持您的頁面看起來很好對其他形式因素。引導第 3 版配備了專門針對常見的移動瀏覽器、 平板電腦瀏覽器、 桌面瀏覽器和甚至是瀏覽器在大型桌面螢幕上運行的瀏覽器寬度的 CSS 類。您可以使用引導 CSS 類來批註 HTML5 元素。最常用的 CSS 類涉及引導網格系統中，一個組織使用行和列的頁面配置的類的集合。我將描述在本文稍後部分詳細的網格系統。

引導具有大量用於創建網站的使用者介面，包括按鈕下拉按鈕組 UI 元件下拉清單中，巡覽列，麵包屑，媒體物件，分頁和進度列，只是僅舉幾例。許多這些元件都是回應本身，意思它們呈現不同基於瀏覽器的寬度。例如，巡覽列是一個強大的元件，從桌上型電腦到好看的緊湊版本提出了通過啟動當使用者接觸到巡覽列的下拉清單功能表列選項螢幕整個寬度顯示功能表選項功能表列會自動轉換。

更高級的使用者介面功能，引導還具有自訂 JQuery 外掛程式，包括傳送帶，可折疊的面板，模態對話方塊提示和氣泡框消息的集合。

使用者入門

引導 CSS 和 JavaScript 檔自動包含在您的專案中，當您使用Visual Studio2013年的ASP.NETWeb 應用程式範本創建專案時物品。新專案對話方塊中為 Web 應用程式範本所示圖 1。引導還需要 JQuery。當你從Visual Studio2013 Web 應用程式範本引導時，你能引導與 JQuery v1.10.2 v3.0.0。如果您使用範本Visual Studio2012，這些檔不會包含您的專案中。此外，引導是不包括自動如果您創建新的 Web 網站使用檔 |新的 Web 網站。

Visual Studio2013年新建專案對話方塊ASP.NETWeb 應用程式範本
圖 1 Visual Studio2013年新建專案對話方塊ASP.NETWeb 應用程式範本

如果你喜歡使用最新和最好的引導和 JQuery 版本，使用 NuGet 更新您的專案。並使用 NuGet 獲得引導，如果你有一個版本的Visual StudioVisual Studio2013年前。 引導網站 (getbootstrap.com) 顯示了如何將連結到一個 CDN 主辦的版本的引導，可以提供顯著的性能優勢。

嘗試引導網格系統

引導提供所謂的 12 列回應佈局。您可以使用任意數量的行，您頁面進行佈局，但您必須使用 12 列。這些 12 列的寬度的瀏覽器同樣大小和你使用引導 CSS 類來指定 HTML 元素應該占多少列。這比 Windows Phone 和 Windows 8 的 XAML 開發人員所習慣的不同類型的網格系統。XAML 的柵格系統可以有任意數量的行和列的頁面配置。開發人員然後在儲存格中放置的每個控制項通過指定的行號和列號。尤其是強大的是，引導網格系統您可以指定不同的列跨度為大型桌上型電腦，正常的桌上型電腦、 平板電腦和手機。例如，一種常見的佈局模式就是創建一系列的 div 和每個 div 指定它應該在較大的桌面 （這意味著 6 div 會適合在每一行上），佔據 2 列 3 列上一個正常的桌面，在平板電腦上的 4 列和 6 列 （這會產生每行 2 div） 的手機上。這種情況下編碼在圖 2 使用彌補引導網格系統的類 col *。Div 的背景顏色只是顏色類 （灰色、 橙色等等） 圖 3 和圖 4 顯示此頁會呈現方式對桌面和一部電話，分別。

圖 2 常見的佈局模式使用引導網格系統

<body>
  <div class="container">
    <hr />
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gray">1</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 orange">2</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gold">3</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightGreen">4</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 green">5</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightBlue">6</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 purple">7</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gray">8</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 orange">9</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gold">10</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightGreen">11</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 green">12</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightBlue">13</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 purple">14</div>
  </div> <!-- /container -->
</body>

從圖 2 呈現在桌面使用 col-md-3 類的示例
圖 3 從圖 2 呈現在桌面使用 col-md-3 類的示例

2 呈現在手機使用 col-xs-6 類圖 示例
從圖 2 呈現在手機使用 col-xs-6 類圖 4 示例

它是重要的是要注意引導沒有實際檢測到的裝置類型。相反，引導使用媒體查詢來確定是否應該應用的 CSS 類。類的四個類別所示圖 5，同時會導致每個類別要應用的寬度範圍。

圖 5 引導網格系統類類別

類別首碼 表單因數 寬度 （以圖元為單位）
col-xs-* 電話 小於 768
col-sm-* 平板電腦 768 對 991
col-md-* 桌面 992 對 1,200
col-lg-* 大的桌面 更多比 1200

 

一個特定的 HTML 元素進行佈局時，可以使用這些類別的任意組合。例如，下面的程式碼使用一個類從每個類別：

<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> {Other HTML elements here.} </div>

這等同于下面的偽代碼：

如果瀏覽器的寬度小於 768 圖元為單位），然後這個 div 將跨越 6 12 個可用列，占一半 (6/12） 的螢幕。

否則如果瀏覽器的寬度為 768 圖元和 991 圖元之間，然後此 div 將跨越 4 12 可用的列，佔用了三分之一 （4/12） 的螢幕。

否則如果瀏覽器的寬度為 992 圖元和 1,200 圖元之間，然後此 div 將跨越 3 12 個可用列，佔用螢幕第一個第四 (3/12）。

否則如果瀏覽器的寬度大於 1,200 的圖元為單位），然後此 div 將跨越 2 12 可用的列，佔用六分之一 （2/12） 的螢幕。

你不需要顯式指定為每個類別的列數。如果你不指定一個特定的類別，將使用下一個類別下的大小。例如，如果你想要為手機的獨特佈局，但它是平板電腦、 桌上型電腦和大型桌上型電腦可以具有相同的佈局，你只需要指定一個類用於手機和平板電腦。 就像這樣：

<div class="col-xs-6 col-sm-4"> {HTML elements here.} </div>

引導將使用平板電腦設置這兩個桌面和大型桌面形式因素。此外，手機的預設類是 col-xs-12，哪些地方每個 div 在其自己的行上。如果這是一部手機可以接受佈局，可以進一步降低前面的程式碼：

<div class="col-sm-4"> {HTML elements here.} </div>

注意，在圖 2 不指定行。如果當前行已經用盡，或者如果沒有足夠的空間為 div 引導的網格系統會自動到下一行移動 div 您可以通過使用像這樣的行類強制一個新行：

<div class="row">
  {Place columns here.}
</div>

為什麼 12 列嗎？12 可能聽起來像這個網格系統，一個隨機播放的數位，但它不是。12 號提供大量的可分性和大量的可組合性的餘地。例如，數位 1、 2、 3、 4、 6 和 12 都均勻地分成 12。 使用這些值列的跨度可以分別產生 12 列、 6 列、 4 列、 2 列和 1 列的內容的佈局。此外，組合 （如 3 + 9、 9 + 3、 4 + 8 和 8 + 4 是視覺上吸引人的內容進行佈局的組合。

引導程式元件

引導包含超過 20 的元件，可以使用在它們當前的狀態或輕鬆地擴展。簽出該引導網站的每個元件和用法示例的說明。本文檔為媒體物件，甚至會使使用的履歷音樂視頻演示其用法。即使你不是 80 年代長大，考慮給它聽。

仔細看看該巡覽列元件，用於在網頁的頂部創建一個功能表列會吧圖 6 演示如何使用巡覽列元件創建一個簡單的功能表，其中包含網站的品牌和幾個功能表選項。當瀏覽器的寬度比 768 圖元寬，巡覽列呈現如示圖 7。如中所示的瀏覽器寬度小於 768 圖元為單位），如果呈現巡覽列圖 8。在這種情況下，當使用者點擊包含水平線條的按鈕，就會顯示功能表選項。

圖 6 使用引導巡覽列元件

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
        data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link 1
          <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Navbar 呈現為瀏覽器的寬度等於或大於 768 圖元為單位）
圖 7 Navbar 呈現為瀏覽器的寬度等於或大於 768 圖元為單位）

Navbar 呈現為瀏覽器的寬度小於 768 圖元為單位）
圖 8 Navbar 呈現為瀏覽器的寬度小於 768 圖元為單位）

很明顯，這是一個非常簡單的例子。巡覽列還可以包含下拉清單功能表按鈕，你甚至可以把巡覽列中的搜索功能。另外，巡覽列，而不僅僅是文字在示例中的品牌部分可以形象。

JQuery 外掛程式

引導有大約十幾個 JQuery 外掛程式，記錄下引導網站的 JavaScript 選項卡。乍看之下，他們看起來功能相似，他們不用來增加 HTML5 元素的 CSS 類上, 一節中描述的元件。然而，這些 CSS 類觸發 JQuery 活動，在呈現的 HTML 元素時，或當各種事件觸發的 HTML 元素。大量使用這些外掛程式的頁面應該對於性能問題，尤其是較慢的 Cpu 和記憶體有限的設備上進行測試。

運行這些外掛程式位於 bootstrap.js 所需的 javascript 代碼。 每個外掛程式也是作為一個獨立的檔，使您可以包含僅您的應用程式需要，導致在第一頁呈現更快的有外掛程式可用。

圖 9 演示如何使用木馬外掛程式，提供幻燈片功能。如果您的頁面已連結到 bootstrap.js 或 bootstrap.min.js，你所有的設置。或者你可以將連結到 carousel.js，如果旋轉木馬外掛程式是唯一外掛程式頁面的需要。

圖 9 使用外掛程式的旋轉木馬

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0"
      class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <!-- Wrapper for slide content -->
  <div class="carousel-inner" role="listbox">
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ... Only one slide for brevity.
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button"
    data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button"
    data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

圖 10 顯示為 Windows Phone 呈現的旋轉木馬上外掛程式。旋轉木馬外掛程式綿延本身適當平板電腦、 桌上型電腦和大型桌面形式因素。

的旋轉木馬示例呈現在 Windows Phone 模擬器中
圖 10 的旋轉木馬示例呈現在 Windows Phone 模擬器中

注意事項

正如前面提到的引導不會適合每一種情況。為了確定引導是否適合您的網站，有幾件事你會想要考慮：

  1. 如果你有一個現有的網站，多年來一直性能調優和已被優化為您的使用者，你會想要謹慎行事。成型複雜，高度使用頁也是一個好主意。如果啟用引導的網頁不充分執行，考慮設立 m 網站並編碼一切你自己。Dino埃斯波西托的文章，"調動現有的 Web 網站"（bit.ly/1CaVEWR），顯示了如何設置 m 網站。
  2. 如果您正在構建一個新的網站，您最複雜的頁和你相信的頁會被最頻繁採用的原型。請確保他們的工作好在低端設備上並在低頻寬的地區。如果頁面被證明是有問題，然後嘗試重新設計它，這樣它將充分執行。M 網站也是一個選擇的新的網站，但這應該只有一個重新設計將不起作用。
  3. 請確保引導網格系統和用於導航的元件並不太限制在網站設計。檢查與您的使用者體驗設計師過程研究的早期­澆注引導。在我看來，像引導這樣的工具迫使你去設計移動，迫使你保持你的頁面，乾淨整潔。但是，您的使用者體驗設計師可以確認是否可以作出引導正確代表你的品牌，並提供適用于您的使用者體驗。

更多的資訊和工具

如果你要開發網站使用引導，你會想要審查所有的元件和 JQuery 外掛程式記錄在引導網站上，你也將在這裡找到很多有用的例子。你也應該看看：

  • Bootswatch (bootswatch.com) 為引導包含免費的主題。
  • 包裝引導 (wrapbootstrap.com) 包含廉價引導主題和範本。
  • 令人敬畏的字體 （fontawesome.io) 是一個免費的可伸縮向量圖示，可以方便地定制提供 CSS 的網站。
  • "部署ASP.NETMVC 5 移動 Web 應用程式在 Azure 網站"(bit.ly/1CMOGwq） 演示如何將引導應用到現有的 Web 網站，使它移動方便。本文還演示了如何將網站部署到微軟 Azure。

總結

這裡提出的材料是簡要綜述引導 UI 框架。它絕非完全描述了所有的 CSS 類，元件和外掛程式附帶引導。你會想要去引導的網站以獲得一個完整的理解，所有可用的工具，並尋求展示不同的使用者體驗設計的示例頁面。這些樣品是一個很好的地方開始如果你需要去感受什麼是可能與引導。

在使用引導程式或任何其他框架的嚴重的發展努力向前邁進之前, 考慮的性能和可用性。樣機關鍵頁面是最好的方法，以確認引導可以納入您的網站，並且給你你想要的結果。

Keith Pijanowski 是工程師、 企業家和商業傢伙他在軟體行業有 20 多年的經驗，先後為創業公司和大公司中的角色，範圍從代碼寫入業務發展。聯繫到他在 keithpij@msn.com 或 twitter.com/keithpij。

感謝以下的微軟技術專家對本文的審閱：裡克 · 安德森和磯林