天天看点
返回

开源夏令营（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）

继续阅读