<source id="zl0zm"></source>
  • <i id="zl0zm"></i>

    <wbr id="zl0zm"></wbr>
  • 起步

    簡介整個項目、組件、和如何使用一個簡單的模版入門

    下載之前先檢查一下是否準備好了一個代碼編輯器(我們推薦使用 Sublime Text 2) ,你是否已經掌握了足夠的HTML和CSS知識以開展工作。這里我們不詳述源碼文件,但是它們可以隨時被下載。在這里我們只著重介紹使用已經編譯好的Bootstrap文件進行入門講解。

    下載編譯好的文件

    快速開始:立即下載編譯好的版本吧,里面已經包含了CSS、JS和圖片文件了,而且所有文件已經經過了壓縮處理。不過,文檔和源碼文件不包含哦。

    下載Bootstrap

    下載源碼

    從GitHub直接下載到的最新版的源碼包括CSS、JavaScript的源文件,以及一份文檔。

    下載Bootstrap源碼

    在下載的壓縮包中你可以看到如下的文件結構和內容。所有文件按邏輯進行分類存儲,并且提供了編譯和壓縮兩個版本的文件。

    將下載的文件解壓縮之后就可以看到如下的文件結構:

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

    這就是Bootstrap的基本結構:編譯后的文件可以快速應用于任何web項目。我們提供了編譯版的CSS和JS文件 (bootstrap.*),也同時提供了編譯并壓縮之后的CSS和JS文件 (bootstrap.min.*)。圖片文件是使用 ImageOptim 工具進行壓縮的,這個工具是Mac平臺上用于壓縮PNG文件的一個app。

    請注意,所有的JavaScript插件都依賴jQuery庫。

    Bootstrap中的HTML、CSS和JS適用于各類設備, 不過它們可以被概括成幾個類別,請看本文檔頂部的導航條。

    文檔章節

    腳手架

    全局性的樣式文件,用于重置背景、鏈接樣式、柵格系統等,并包含兩個簡單的布局結構。

    基本CSS樣式

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

    組件

    常見界面組件 -- 如標簽、pill、導航、警告、頁面標題的基本樣式。

    JavaScript插件

    和組件類似,這些Javascript插件用來實現提示(tooltip)、彈出框(popover)、模態對話框(modal)等具有交互性的組件。

    組件列表

    組件庫JavaScript插件集 一同提供了以下組件元素。

    • 按鈕組
    • 按鈕下拉菜單
    • 用于導航的標簽、pill、列表
    • 導航條
    • Labels
    • Badges
    • Page headers and hero unit
    • 縮略圖
    • 警告對話框
    • 進度條
    • 模態對話框(Modals)
    • 下拉菜單(Dropdowns)
    • Tooltips
    • Popovers
    • Accordion
    • Carousel
    • Typeahead

    在后面的文檔中, 我們會挨個詳細的介紹這些組件的細節。在此之前, 先來看看如何使用并定制它們。

    為了把注意力完全放到使用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>
    

    為了使其成為一個Bootstrap模板, 需要包含相應的 CSS and JS 文件:

    <!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
    主播福利