開源夏令營（2）

Bootstrap3中默認定義頁面爲12個邏輯列，我們需要通過定義元素佔據的列的數量來定義頁面佈局效果

所有佈局列定義必須放入.row定義元素，並且.row定義元素必須定義到.container或者.container-fluid元素中，如下：

1. <div class="container">
2. <!-- 定義的佈局必須添加到class定義row中 //-->
3. <div class="row">
4. <!-- 這裏定義具體的頁面佈局 //-->
5. </div>
6. </div>

因爲支持響應式設計，這裏我們可以針對不同設備來定義不同的佈局樣式，如下：

超小屏幕 手機 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面顯示器 (≥992px) 大屏幕 大桌面顯示器 (≥1200px) 柵格系統行爲 總是水平排列 開始是堆疊在一起的，當大於這些閾值時將變爲水平排列C .container 最大寬度 None （自動） 750px 970px 1170px 類前綴 .col-xs- .col-sm- .col-md- .col-lg- 列（column）數 12 最大列寬 自動 ~62px ~81px ~97px 槽（gutter）寬 30px （每列左右均有 15px的間隔） 可嵌套 是 可偏移（Offsets） 是 可排序 是

通過定義以上不同的設備的CSS，我們可以針對不同設備定義不同類型的佈局，如下：

1. <div class="row">
2. <!--
3. 這裏定義頁面實際佈局方式：
5. a. bootstrap3默認把頁面邏輯定義爲12個列
6. b. 佈局樣式通過設置佔據列的數量來定義
7. c. 針對不同屏幕寬度的設備可以定義不同的佈局展示方式，如下：
9. xs: Extra Small devices
10. sm: Small devices
11. md: Medium devices
12. lg: Large devices
15. //-->
16. <div class="col-sm-3 col-xs-12 grey box">目錄</div>
17. <div class="col-sm-1 col-xs-12"></div>
18. <div class="col-sm-8 col-xs-12 orange box">內容</div>
19. <!--
20. 以上分別定義了三個div元素，佈局寬度如下：
21. - xs設備中三個元素分別佔據完整頁面寬度
22. - sm設備中三個元素分別佔據3個列，1個列和8個列寬度
23. //-->
24. </div>

以上代碼中，我們在超小型設備定義３個div都佔據了12列（即整屏寬度），而在小型設備上，定義的分別是佔據３個列，１個列和８個列。

javascript動態效果：

1. Bootstrap3中自帶的popover效果
2. 使用chart.js實現的一個甜甜圈圖表效果

小提示：使用前請確認導入了jQuery類庫和bootstrap3的類庫

popover效果

相關代碼如下：

在contact按鈕中添加id="contact"，如下：

1. <p id="contact" class="address text-center">聯繫</p>

對應javascript如下：

1. /*這裏針對聯繫按鈕添加一個popover組件*/
2. $('#contact').popover({
3. placement:'bottom', //popover位置
4. container: 'body',
5. html:true,
6. content:'<p>QQ: 36181610</p><p>微博：weibo.com/gbtags</p><p>微信：gbtags</p>'
7. });

這樣如果你點擊聯繫按鈕，會看到一個彈出popover效果

甜甜圈語言水平圖表

這裏我們使用chart.js來實現甜甜圈風格的語言水平圖表，首先引用chart.js，這裏使用jQuery的ajax方法加載js，相關代碼如下：

1. $.getScript('http://www.chartjs.org/assets/Chart.js', function(){
3. //回調方法中處理生成圖表
5. });

回調方法中，我們生成數據並且使用canvas來生成中文語言水平圖形，如下：

1. //定義中文語言水平
2. var zhdata =[{
3. label: '中文水平',
4. value: 90,
5. highlight: '#FFC870',
6. color: '#F7464A'
7. }, {
8. value: 10,
9. color: "#EEEEEE"
10. }
11. ]
13. var zhoptions ={
14. animation: true,
15. segmentShowStroke : false // 不描邊
16. };
18. var c = $('#zh');
19. var ct = c.get(0).getContext('2d');
20. var zhChart = new Chart(ct).Doughnut(zhdata, zhoptions);

類似方式，可以生成英文語言水平圖形。

最後生成效果如下：