• <th id="stlci"><track id="stlci"></track></th>
    1. <dd id="stlci"><track id="stlci"></track></dd>
        <th id="stlci"><track id="stlci"><video id="stlci"></video></track></th>
      1. <tbody id="stlci"></tbody>

        起步

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

        下載之前先檢查一下是否準備好了一個代碼編輯器(我們推薦使用 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
        主播福利