旅程開始

概觀整個專案與內容,和如何使用一個簡單的範本。

ASP.NET Web API 2實戰訓練營 ASP.NET Web API是微軟打造的REST開發框架,可輕易建置HTTP服務,實戰課程拳拳到肉教您如何上場殺敵,K.O.各種用戶端。 SkillTree 報名

下載之前,確認你是否有一個程式碼編輯器(我們推薦 Sublime Text 2), 且你是否已經有了足夠的 HTML 與 CSS 知識以開始作業。這裡我們不詳細說明原始碼文件,但他們可以隨時被下載。我們專注在完整的 Bootstrap 文件以開始作業。

譯者註:這裡的”我們“是指原文件作者。我另外推薦 Microsoft WebMatrixVisual Studio Express 2012 for Web它們都是完全免費的網頁開發工具,好處是,撰寫程式碼時能有自動提示(IntelliSense)功能。

下載完整文件

快速開始:取得完整與最小化版本,里面含有 CSS、JS、和圖片。但是,不包含文件和原始碼。

下載 Bootstrap

下載原始碼

直接從 GitHub 下載最新版原始碼,包含 CSS、JavaScript 及說明文件。

下載 Bootstrap 原始碼

下載後可以找到下面檔案結構和內容,檔案都照著邏輯分類且提供完整與最小化兩個版本。

將下載的檔案解壓縮後,可以看到 bootstrap 目錄下的結構,看起來像:

  bootstrap/
  ├── css/
  │   ├── bootstrap.css
  │   ├── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.js
  │   ├── bootstrap.min.js
  └── img/
      ├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png

這就是 Bootstrap 基本結構:完整的檔案可以快速應用於任何網頁專案。我們提供完整的 CSS 和 JS 檔案(bootstrap.*),也同時提供完整與最小化 CSS 與 JS 檔案(bootstrap.min.*)。圖片檔是使用 ImageOptim 來壓縮,它是一支 Mac 用來壓縮 PNG 檔案的應用程式。

注意,所有 JavaScript 外掛都需依賴 jQuery。

Bootstrap 中的 HTML、CSS 和 JS 適合各種設備,不過,它們可以被簡單分類成幾個類別,可以參考本文件頂部的巡覽列。

文件章節

架構

body元素的全域樣式,用於重設背景、連結樣式、網格系統和兩個簡單佈局結構。

基礎CSS

常見HTML元素,像是佈局、程式碼、表格、表單和按鈕。還包含 Glyphicons。一個非常優秀的icon圖集。

元件

常見介面元件,像是標簽、pill、巡覽、警告、頁面標頭等。

JavaScript

和元件類似,這些JavaScript外掛用以實現如提示(tooltip)、彈出視窗(popover)、對話視窗(modal)等具互動性的元件。

元件清單

元件庫JavaScript外掛庫提供以下介面元素。

  • 按鈕群組
  • 按鈕下拉選單
  • 巡覽標籤、pill、清單
  • 巡覽列
  • 標籤
  • 徽章
  • 頁面標題和 hero unit
  • 縮圖
  • 警告視窗
  • 進度列
  • 對話視窗
  • 下接式選單
  • 工具提示
  • 彈出視窗
  • 手風琴樣式
  • 輪播
  • 排版

接下來的介紹中,我們會每一個的詳細介紹。在此之前,先看看如何使用且客製它們。

為了把關注點完全放到使用Bootstrap這件事情上,我們先做一些準備工作,我們將利用一個基本的 HTML 範本,其中包含了 檔案結構 一章中提到的所有內容。

現在,這裡呈現一個典型的 HTML 內容

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery.js"></script>
  </body>
</html>

加入必要的 CSS(bootstrap.min.css) 與 JS(bootstrap.min.js) 檔案,使其成為一個Bootstrap範本

譯者註:範例引用最小化版本,可修改為完整版本。另外,路徑請依讀者環境自行修改。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

設置成功!加入這兩個檔案,你就可以開始用 Bootstrap 開發任何網站應用程式。

以下幾個以基本範本為範例的排例,希望能導引大家進行舉一反三的腦力激盪,而不是把它們當成最後結果。

譯者註:讀者要學習原始程式碼裡的設置。看不懂的細節部分,可以學習完後面文件後再回頭當成複習用教材。

  • 簡易範本

    一個包含 Bootstrap 所需的 CSS 與 JavaScript 的最簡易 HTML 範本。

  • 基本行銷網站

    一個主訊息區塊和三個支援性元性區塊。

  • 流動佈局

    使用新的嚮應式設計,流動網格系統建立一個流動式佈局網頁。

  • 精簡行銷網站

    適用於小專案或團隊簡單、輕量的行銷網站範本。

  • 合適巡覽

    一個等寬巡覽連結列的行銷網頁。

  • 登入

    基本的登入表單,使用客製化、大表單控制項和彈性佈局。

  • 固定頁腳

    把固定高度的頁腳釘在使用者可見區域的底部。

  • 大螢幕輪播

    一個更有互動性與高可看性輪播的行銷網站。

根據文件頂端的分類資訊查詢更多範例、程式碼片段或客製化 Bootstrap,為你將展開的專案進行引導。

瀏覽 Bootstrap 文件 客製化 Bootstrap
comments powered by Disqus