spectre.css是一個輕量級的css框架，只要使用過bootstrap，那麼這個使用起來就不是問題，不過現在網路上的文檔大都是英文，而且寫的比較概括，所以查閱起來不是很方便，今天是我第一天學習這個框架，把所學到的知識點記錄下來。 使用步驟： 1.引用方法 下載spectre.css，地址：ht ...
spectre.css是一個輕量級的css框架，只要使用過bootstrap，那麼這個使用起來就不是問題，不過現在網路上的文檔大都是英文，而且寫的比較概括，所以查閱起來不是很方便，今天是我第一天學習這個框架，把所學到的知識點記錄下來。
使用步驟：
1.引用方法
下載spectre.css，地址：https://github.com/picturepan2/spectre/releases，然後解壓，將裡面的dist的css文件引入到你創建的項目中，如下圖所示：
2.使用方法
html標簽裡面，加入類名：<div class="timeline"></div>
3.時間線
（1）源代碼
<div class="wrap" style="width: 400px;margin: 0 auto;">
<div class="timeline">
<div class="timeline-item" id="timeline-example-1">
<div class="timeline-left icon-lg">
<a class="timeline-icon tooltip" data-tooltip="2016年三月" href="#timeline-example-1"></a>
</div>
<div class="timeline-content">
<div class="tile">
<div class="tile-content">
<p class="tile-subtitle">2016年3月</p>
<p class="tile-title">初始提交</p>
</div>
</div>
</div>
</div>
<div class="timeline-item" id="timeline-example-2">
<div class="timeline-left">
<a class="timeline-icon icon-lg tooltip" href="#timeline-example-2" data-tooltip="2017年2月">
<i class="icon icon-check"></i>
</a>
</div>
<div class="timeline-content">
<div class="tile">
<div class="tile-content">
<p class="tile-subtitle">2017年2月</p>
<p class="tile-title">新文件經驗</p>
<p class="tile-title"><a href="">條形碼</a>：表示任務的進度</p>
<p class="tile-title"><a href="">步驟</a>：一系列任務步驟的進度指標</p>
<p class="tile-title"><a href="">瓷磚</a>：可重覆或可嵌入的信息塊</p>
</div>
<div class="tile-action">
<button class="btn">視圖</button>
</div>
</div>
</div>
</div>
<div class="timeline-item" id="timeline-example-3">
<div class="timeline-left">
<a class="timeline-icon icon-lg tooltip" href="#timeline-example-2" data-tooltip="2017年3月">
<i class="icon icon-check"></i>
</a>
</div>
<div class="timeline-content">
<div class="tile">
<div class="tile-content">
<p class="tile-subtitle">2017年3月</p>
<p class="tile-title"><a href="">圖標</a>：單元素，響應和純CSS圖標</p>
<p class="tile-title"><a href="">Popovers</a>：小重疊內容容器</p>
<p class="tile-title"><a href="">日曆</a>：日期或日期範圍選擇器和事件顯示</p>
<p class="tile-title"><a href="">旋轉木馬</a>：旋轉圖像的幻燈片</p>
</div>
<div class="tile-action">
<button class="btn">視圖</button>
</div>
</div>
</div>
</div>
</div>
</div>
（2）效果圖
