第一次使用bootstrap3,发现对移动支持得不错,可以很快的开发出一个支持移动和PC端的网站
作为一个后台程序员觉得得界面做得还可以, 按以前是只能自己看看了
时间线来自国外网站,使用到的css如下
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}
.timeline > li {
margin-bottom: 20px;
position: relative;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li > .timeline-panel {
width: 46%;
float: left;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 20px;
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline > li > .timeline-panel:before {
position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 15px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " ";
}
.timeline > li > .timeline-panel:after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline > li > .timeline-badge {
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 1.4em;
text-align: center;
position: absolute;
top: 16px;
left: 50%;
margin-left: -25px;
background-color: #999999;
z-index: 100;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline-badge.primary {
background-color: #2e6da4 !important;
}
.timeline-badge.success {
background-color: #3f903f !important;
}
.timeline-badge.warning {
background-color: #f0ad4e !important;
}
.timeline-badge.danger {
background-color: #d9534f !important;
}
.timeline-badge.info {
background-color: #5bc0de !important;
}
.timeline-title {
margin-top: 0;
color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
margin-bottom: 0;
}
.timeline-body > p + p {
margin-top: 5px;
}
@media (max-width: 767px) {
ul.timeline:before {
left: 40px;
}
ul.timeline > li > .timeline-panel {
width: calc(100% - 90px);
width: -moz-calc(100% - 90px);
width: -webkit-calc(100% - 90px);
}
ul.timeline > li > .timeline-badge {
left: 15px;
margin-left: 0;
top: 16px;
}
ul.timeline > li > .timeline-panel {
float: right;
}
ul.timeline > li > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
ul.timeline > li > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
}
<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>
做的过程中发现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
分享到:
相关推荐
基于Bootstrap3的响应式布局网站教程源码(五),基础入门,适合新手,有齐全的注释,详细教程参考我的博文。除了博文所写之外,我还更新了许多实用的源码。 为了防止有些人不知道怎么用,我还不厌其烦的讲解下,...
基于Bootstrap3的响应式布局网站,基础入门,适合新手,有齐全的注释,详细教程参考我的博文。(只有一个jsp页面)
Bootstrap 3 综合实战项目教程,Web前端响应式开发项目实战视频教程带源码资源Bootstrap 3 综合实战项目教程,Web前端响应式开发项目实战视频教程带源码资源Bootstrap 3 综合实战项目教程,Web前端响应式开发项目...
基于Bootstrap3的响应式布局网站教程源码(二),基础入门,适合新手,有齐全的注释,详细教程参考我的博文。除了博文所写之外,我还更新了如何制作BOX的源码。 为了防止有些人不知道怎么用,我还不厌其烦的讲解下...
以bootstrap完成的响应式星巴克网站源码,本网站也是借鉴成品网站完成,仅供开发人员下载学习,如用作商业用途,本人概不负责。
jQuery bootstrap响应式网站模板,简洁清新功能全
基于Vue.js和Bootstrap构建和响应式管理面板
Bootstrap手机响应式下拉框
二十套精美的响应式网站,除了基本的HTML+CSS+JS以外,还用到了bootStrap,因为bootStrap天生就支持响应式。这些网站设计整体风格和个人博客网站类似,适合参考其响应式网页布局,同样适合同学们完成网页大作业。
bootstrap后台响应式模板
bootstrap响应式后台模板bootstrap响应式后台模板bootstrap响应式后台模板bootstrap响应式后台模板bootstrap响应式后台模板bootstrap响应式后台模板
本书讨论了使用Bootstrap构建网站,从基本的项目和文件结构开始,然后是网格系统和布局方式,再后来讨论HTML元素特别是表单、表格、按钮等界面元素。在对Bootstrap有了基本的理解之后,我们会讨论漂亮的导航条、面包...
截止2017年10月本人收集的bootstrap模板 响应式,还有很多只是限制了文件大小不传不上来
Bootstrap响应式网站模板,风格简洁大气
Bootstrap响应式模态登录框插件,jQuery基于Bootstrap制作的一款响应式模态登录框插件,点击遮罩弹出登录窗口代码。
bootstrap响应式旅游网站
bootstrap实现响应式登录页面
jQuery Bootstrap响应式商城网站模板,全套所有功能模块齐全。
Bootstrap响应式布局