<strong id="ty4sq"><pre id="ty4sq"></pre></strong>

  • <th id="ty4sq"></th>
    <progress id="ty4sq"><track id="ty4sq"></track></progress>
    
  • <dd id="ty4sq"><noscript id="ty4sq"></noscript></dd><dd id="ty4sq"></dd>
    1. <progress id="ty4sq"><big id="ty4sq"><video id="ty4sq"></video></big></progress>

      起步

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

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