开源夏令营（2）

Bootstrap3中默认定义页面为12个逻辑列，我们需要通过定义元素占据的列的数量来定义页面布局效果

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

<div class="container">
  <!-- 定义的布局必须添加到class定义row中 //-->
  <div class="row">
   <!-- 这里定义具体的页面布局 //-->
  </div>
</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，我们可以针对不同设备定义不同类型的布局，如下：

  <div class="row">
    <!--
      这里定义页面实际布局方式：
      
      a. bootstrap3默认把页面逻辑定义为12个列
      b. 布局样式通过设置占据列的数量来定义 
      c. 针对不同屏幕宽度的设备可以定义不同的布局展示方式，如下：
      
        xs: Extra Small devices
        sm: Small devices
        md: Medium devices
        lg: Large devices
      
      
    //-->
    <div class="col-sm-3 col-xs-12 grey box">目录</div>
    <div class="col-sm-1 col-xs-12"></div>
    <div class="col-sm-8 col-xs-12 orange box">内容</div>
    <!--
      以上分别定义了三个div元素，布局宽度如下：
      - xs设备中三个元素分别占据完整页面宽度
      - sm设备中三个元素分别占据3个列，1个列和8个列宽度
    //-->
  </div>

以上代码中，我们在超小型设备定义３个div都占据了12列（即整屏宽度），而在小型设备上，定义的分别是占据３个列，１个列和８个列。

javascript动态效果：

1. Bootstrap3中自带的popover效果
2. 使用chart.js实现的一个甜甜圈图表效果

小提示：使用前请确认导入了jQuery类库和bootstrap3的类库

popover效果

相关代码如下：

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

<p id="contact" class="address text-center">联系</p>

对应javascript如下：

  /*这里针对联系按钮添加一个popover组件*/
  $('#contact').popover({
    placement:'bottom', //popover位置
    container: 'body',
    html:true,
    content:'<p>QQ: 36181610</p><p>微博：weibo.com/gbtags</p><p>微信：gbtags</p>'
  });

这样如果你点击联系按钮，会看到一个弹出popover效果

甜甜圈语言水平图表

这里我们使用chart.js来实现甜甜圈风格的语言水平图表，首先引用chart.js，这里使用jQuery的ajax方法加载js，相关代码如下：

$.getScript('http://www.chartjs.org/assets/Chart.js', function(){
  //回调方法中处理生成图表
});

回调方法中，我们生成数据并且使用canvas来生成中文语言水平图形，如下：

    //定义中文语言水平
    var zhdata =[{
      label: '中文水平',
      value: 90,
      highlight: '#FFC870',
      color: '#F7464A'
     }, {
value: 10,
color: "#EEEEEE"
}     
    ]
    
    var zhoptions ={
animation: true,
segmentShowStroke : false // 不描边
    };
    
    var c = $('#zh');
    var ct = c.get(0).getContext('2d');
    var zhChart = new Chart(ct).Doughnut(zhdata, zhoptions);

类似方式，可以生成英文语言水平图形。

最后生成效果如下：