vue使用本地圖片
bootstrap簡介
1）bootstrap由@mdo和@fat在Twitter工作時建立，Bootstrap使用LESS CSS並用Node編譯，託管在GitHub上，方便大家使用這一框架構建更好的web應用。
2）Bootstrap不光為了看起來好看，而且在現代的桌面瀏覽器上有極佳的表現(包括IE7！)。在平板電腦和智慧手機上面還有響應式CSS可以使用。
3）12列的響應式柵格結構、豐富的元件、JavaScript外掛、排版、表單控制元件，還有基於web的定製工具。
以上是bootstrap官網的介紹。
使用bootstrap時需要先行下載bootstrap，在官網下載即可，下載之前先檢查一下是否準備好了一個程式碼編輯器，你是否已經掌握了足夠的HTML和CSS知識以開展工作。這裡我們不詳述原始碼檔案，但是它們可以隨時被下載。在這裡我們只著重介紹使用已經編譯好的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.*
bootstrap.min.*)。圖片檔案是使用ImageOptim工具進行壓縮的，這個工具是Mac平臺上用於壓縮PNG檔案的一個app。
值得注意是，所有的JavaScript外掛都依賴jQuery庫。
bootstrap包含的東西：
1）文件章節
全域性性的樣式檔案，用於重置背景、連結樣式、柵格系統等，幷包含兩個簡單的佈局結構。
常見的HTML元素 -- 如排版、程式碼、表格、表單、和按鈕的樣式。還包括Glyphicons, 一個非常棒的圖示集。
常見介面元件 -- 如標籤、pill、導航、警告、頁面標題的基本樣式。
和元件類似，這些Javascript外掛用來實現提示(tooltip)、彈出框(popover)、模態對話方塊(modal)等具有互動性的元件。
2）元件列表
元件庫和JavaScript外掛集一同提供了以下元件元素。
- 按鈕組
- 按鈕下拉選單
- 用於導航的標籤、pill、列表
- 導航條
- Labels
- Badges
- Page headers and hero unit
- 縮圖
- 警告對話方塊
- 進度條
- 模態對話方塊(Modals)
- 下拉選單(Dropdowns)
- Tooltips
- Popovers
- Accordion
- Carousel
- Typeahead
在後面的文件中, 我們會挨個詳細的介紹這些元件的細節。在此之前, 先來看看如何使用並定製它們。
3）基本的HTML模版
先介紹一個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使用方法：
1）佈局容器
bootstrap為頁面內容以及柵格系統包裹了一個.container容器，我們提供了兩個類。要注意由於padding的原因，這兩種容器不可以互相巢狀。
.container寬度固定支援響應式佈局
<div class="container">
...
</div>.container-fluid類用於寬度的100%並佔據全部視口（viewport）的容器。
<div class="container-fluid">
...
</div>2)柵格系統
Bootstrap預設的柵格系統為12列，形成一個940px寬的容器，預設沒有啟用響應式佈局特性。如果加入響應式佈局CSS檔案，柵格系統會自動根據可視視窗的寬度從724px到1170px進行動態調整。在可視視窗低於767px寬的情況下，列將不再固定並且會在垂直方向堆疊。
帶有基本柵格的HTML程式碼
簡單的兩列式佈局，建立一個.row容器，並在容器中加入合適數量的.span*列即可。由於預設是12列的柵格，所有.span*列所跨越的柵格數之和最多是12(或者等於其父容器的柵格數)。
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>偏移列
把列向右移動可使用.offset*類。每個類都給列的左邊距增加了指定單位的列。例如，.offset4將.span4右移了4個列的寬度。
<div class="row">
<div class="span4">...</div>
<div class="span3 offset2">...</div>
</div>巢狀列
在預設的柵格系統裡, 在已有的.span*內新增一個新的.row並加入.span*列，就可實現巢狀。被巢狀列中的每列列數總和要等於父級
<div class="row">
<div class="span9">
Level 1 column
<div class="row">
<div class="span6">Level 2</div>
<div class="span3">Level 2</div>
</div>
</div>
</div>3）流式柵格系統案例
流式柵格系統對每一列的寬度使用百分比而不是畫素數量。它和固定柵格系統一樣擁有響應式佈局的能力，這就保證它能對不同的解析度和裝置做出適當的調整。
將.row替換為.row-fluid就能讓任何一行“流動”起來。應用於每一列的類不用改變，這樣能方便的在流式與固定柵格之間切換。
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>流式柵格的偏移
定義方式和固定網格系統相同：給任何想偏移的列新增.offset*即可。
<div class="row-fluid">
<div class="span4">...</div>
<div class="span4 offset2">...</div>
</div>流式巢狀佈局
與固定柵格的巢狀有一點不同：被巢狀的列數之和要等於12。這是因為流式柵格使用百分比來設定每列的寬度。
<div class="row-fluid">
<div class="span12">
Fluid 12
<div class="row-fluid">
<div class="span6">
Fluid 6
<div class="row-fluid">
<div class="span6">Fluid 6</div>
<div class="span6">Fluid 6</div>
</div>
</div>
<div class="span6">Fluid 6</div>
</div>
</div>
</div>