天天看點
傳回

開源夏令營（2）

Bootstrap3中預設定義頁面為12個邏輯列，我們需要通過定義元素占據的列的數量來定義頁面布局效果

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

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

因為支援響應式設計，這裡我們可以針對不同裝置來定義不同的布局樣式，如下：

超小螢幕 手機 (<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.       
  2.  <!--       
    3.       
  3.  這裡定義頁面實際布局方式：       
    4.           
  4.  a. bootstrap3預設把頁面邏輯定義為12個列       
    5.       
  5.  b. 布局樣式通過設定占據列的數量來定義       
    6.       
  6.  c. 針對不同螢幕寬度的裝置可以定義不同的布局展示方式，如下：       
    7.           
  7.  xs: Extra Small devices       
    8.       
  8.  sm: Small devices       
    9.       
  9.  md: Medium devices       
    10.       
  10.  lg: Large devices       
    11.               
  11.  //-->       
    12.       
  12.  <div class="col-sm-3 col-xs-12 grey box">目錄</div>       
    13.       
  13.  <div class="col-sm-1 col-xs-12"></div>       
    14.       
  14.  <div class="col-sm-8 col-xs-12 orange box">内容</div>       
    15.       
  15.  <!--       
    16.       
  16.  以上分别定義了三個div元素，布局寬度如下：       
    17.       
  17.  - xs裝置中三個元素分别占據完整頁面寬度       
    18.       
  18.  - sm裝置中三個元素分别占據3個列，1個列和8個列寬度       
    19.       
  19.  //-->       
    20.       
  20.  </div>       
    21.

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

javascript動态效果：

  1. Bootstrap3中自帶的popover效果
  2. 使用chart.js實作的一個甜甜圈圖表效果
小提示：使用前請确認導入了jQuery類庫和bootstrap3的類庫

popover效果

相關代碼如下：

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

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

對應javascript如下：

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

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

甜甜圈語言水準圖表

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

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

回調方法中，我們生成資料并且使用canvas來生成中文語言水準圖形，如下：

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

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

最後生成效果如下：

開源夏令營（2）
開源夏令營
上一篇: Storm1.0版本任務排程政策實作源碼分析
下一篇: 開源夏令營（7）

繼續閱讀