入門

項目概述、其內容以及如何開始使用簡單模板。

在下載之前,請確保有一個代碼編輯器(我們推薦Sublime Text 2)和一些 HTML 和 CSS 的工作知識。我們不會在這裡介紹源文件,但它們可供下載。我們將重點介紹編譯後的 Bootstrap 文件。

下載編譯

最快的開始方式:獲取我們的 CSS、JS 和圖像的編譯和縮小版本。沒有文檔或原始源文件。

下載引導程序

下載源

通過直接從 GitHub 下載最新版本,獲取所有 CSS 和 JavaScript 的原始文件以及文檔的本地副本。

下載引導源

在下載中,您將找到以下文件結構和內容,按邏輯對常見資產進行分組,並提供已編譯和縮小的變體。

下載後,解壓縮壓縮文件夾以查看(已編譯)Bootstrap 的結構。你會看到這樣的東西:

  bootstrap / ├── css / ├── bootstrap . css
   ├── bootstrap . 分鐘css
   ├── js / ├──引導程序js│├──
  引導_ _ 分鐘js
   └── img / ├── glyphicons -半身人png
       └──字形-半身人-白色PNG
  
        
        
      

這是 Bootstrap 最基本的形式:編譯文件,以便在幾乎任何 Web 項目中快速插入使用。我們提供編譯後的 CSS 和 JS ( bootstrap.*),以及編譯和縮小的 CSS 和 JS ( bootstrap.min.*)。圖像文件使用ImageOptim壓縮,這是一個用於壓縮 PNG 的 Mac 應用程序。

請注意,所有 JavaScript 插件都需要包含 jQuery。

Bootstrap 為各種事情配備了 HTML、CSS 和 JS,但它們可以用Bootstrap 文檔頂部可見的幾個類別來概括。

文檔部分

腳手架

用於主體重置類型和背景的全局樣式、鏈接樣式、網格系統和兩個簡單的佈局。

基礎 CSS

常見 HTML 元素的樣式,如排版、代碼、表格、表單和按鈕。還包括Glyphicons,一個很棒的小圖標集。

成分

常見界面組件的基本樣式,如選項卡和藥丸、導航欄、警報、頁眉等。

JavaScript 插件

與組件類似,這些 JavaScript 插件是用於工具提示、彈出框、模式等的交互式組件。

組件列表

組件JavaScript 插件部分一起提供了以下界面元素:

  • 按鈕組
  • 按鈕下拉菜單
  • 導航選項卡、藥丸和列表
  • 導航欄
  • 標籤
  • 徽章
  • 頁眉和英雄單元
  • 縮略圖
  • 警報
  • 進度條
  • 模態
  • 下拉菜單
  • 工具提示
  • 約夏克布丁
  • 手風琴
  • 旋轉木馬
  • 提前輸入

在未來的指南中,我們可能會更詳細地逐個介紹這些組件。在此之前,請在文檔中查找其中的每一個,以獲取有關如何使用和自定義它們的信息。

通過對內容的簡要介紹,我們可以專注於使用 Bootstrap。為此,我們將使用一個基本的 HTML 模板,其中包含我們在文件結構中提到的所有內容。

現在,看看一個典型的 HTML 文件

  1. <!DOCTYPE html>
  2. <html>
  3. <頭部>
  4. <title> Bootstrap 101 模板</title>
  5. <元名稱= “視口”內容= “寬度=設備寬度,初始比例=1.0” >
  6. </head>
  7. <正文>
  8. <h1>你好,世界!</h1>
  9. <script src = "https://code.jquery.com/jquery.js" ></script>
  10. </正文>
  11. </html>

要使其成為 Bootstrapped 模板,只需包含適當的 CSS 和 JS 文件:

  1. <!DOCTYPE html>
  2. <html>
  3. <頭部>
  4. <title> Bootstrap 101 模板</title>
  5. <元名稱= “視口”內容= “寬度=設備寬度,初始比例=1.0” >
  6. <!-- 引導程序 -->
  7. <link href = "css/bootstrap.min.css" rel = "stylesheet" media = "screen" >
  8. </head>
  9. <正文>
  10. <h1>你好,世界!</h1>
  11. <script src = "https://code.jquery.com/jquery.js" ></script>
  12. <script src = "js/bootstrap.min.js" ></script>
  13. </正文>
  14. </html>

你準備好了!添加這兩個文件後,您可以開始使用 Bootstrap 開發任何站點或應用程序。

使用一些示例佈局超越基本模板。我們鼓勵人們對這些示例進行迭代,而不是簡單地將它們用作最終結果。

  • 入門模板

    包含所有 Bootstrap CSS 和 JavaScript 的準系統 HTML 文檔。

  • 基本營銷網站

    具有一個主要信息的英雄單位和三個支持元素。

  • 流體佈局

    使用我們新的響應式、流暢的網格系統來創建無縫的液體佈局。

  • 狹義營銷

    適合小型項目或團隊的輕量級營銷模板。

  • 合理的導航

    在修改後的導航欄中具有等寬導航鏈接的營銷頁面。

  • 登入

    準系統使用自定義、更大的表單控件和靈活的佈局登錄表單。

  • 粘性頁腳

    將固定高度的頁腳固定到用戶視口的底部。

  • 旋轉木馬大屏幕

    基本營銷網站上的一個更具互動性的即興表演,具有突出的輪播。

前往文檔以獲取信息、示例和代碼片段,或者進行下一個飛躍並為任何即將進行的項目自定義 Bootstrap。

訪問引導文檔 自定義引導程序