第一次使用bootstrap3做的响应式网站

第一次使用bootstrap3,发现对移动支持得不错，可以很快的开发出一个支持移动和PC端的网站

作为一个后台程序员觉得得界面做得还可以， 按以前是只能自己看看了

时间线来自国外网站，使用到的css如下

<ul class="timeline">
<li>
<div class="timeline-badge"><i class="ion-leaf"></i></div>
<div class="timeline-panel" style="width: 46%;">
<div class="timeline-heading">
<h4 class="timeline-title">安东尼罗宾·简介</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i></small></p>
</div>
<div class="timeline-body">
<p>他是一位白手起家事业成功的亿万富翁，是当今最成功的世界级潜能开发专家；他协助职业球队、企业总裁、国家元首激发潜能，渡过各种困境及低潮。曾辅导过多位皇室的家庭成员，被美国前总统克林顿、戴安娜王妃聘为个人顾问；曾为众多世界名人提供咨询，包括南非总统曼徳拉、前苏联总统戈尔巴乔夫、世界网球冠军安德烈•阿加西等；

</p>
</div>
</div>
</li>
<li>......................</li>
</ul>

View Code

做的过程中发现android 4.0 上对width: -webkit-calc(100% - 90px); 支持得不是很好，时间线显示不正常，后来用JS来解决了

$(function() {
$(window).resize(function() {
initTimePanelSize();
});
initTimePanelSize();
function initTimePanelSize(){
width = $(this).width();
//alert(width);
if (width <= 767) {
$('div.timeline-panel').width($(this).width() - 90);
} else {
$('div.timeline-panel').css('width', '46%');
}
}
});

以下是最后效果图，





实际效果在 www.witleaf.com