引導程序

入門

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

1. 下載

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

下載編譯

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

下載引導程序

下載源

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

下載引導源

2.文件結構

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

下載後，解壓縮壓縮文件夾以查看（已編譯）Bootstrap 的結構。你會看到這樣的東西：

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

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

3. 包括什麼

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

文檔部分

腳手架

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

基礎 CSS

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

成分

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

Javascript 插件

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

組件列表

組件和Javascript 插件部分共同提供以下界面元素：

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

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

4.基本的HTML模板

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

現在，看看一個典型的 HTML 文件：

  1. <html>
  2.   <頭部>
  3.     <title> Bootstrap 101 模板</title>
  4.   </head>
  5.   <正文>
  6.     <h1>你好，世界！</h1>
  7.   </正文>
  8. </html>

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

  1. <html>
  2.   <頭部>
  3.     <title> Bootstrap 101 模板</title>
  4.     <!-- 引導程序 -->
  5.     <link href = "css/bootstrap.min.css" rel = "stylesheet" >  
  6.   </head>
  7.   <正文>
  8.     <h1>你好，世界！</h1>
  9.     <script src = "js/bootstrap.min.js" ></script> 
  10.   </正文>
  11. </html>

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

5. 例子

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

  • 基本營銷網站

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

  • 流體佈局

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

  • 入門模板

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

接下來是什麼？

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

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