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

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

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

.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
} .timeline:before {
top:;
bottom:;
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:;
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:;
border-right-width: 15px;
left: -15px;
right: auto;
} .timeline > li.timeline-inverted > .timeline-panel:after {
border-left-width:;
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:;
color: inherit;
} .timeline-body > p,
.timeline-body > ul {
margin-bottom:;
} .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:;
top: 16px;
} ul.timeline > li > .timeline-panel {
float: right;
} ul.timeline > li > .timeline-panel:before {
border-left-width:;
border-right-width: 15px;
left: -15px;
right: auto;
} ul.timeline > li > .timeline-panel:after {
border-left-width:;
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做的响应式网站的更多相关文章

  1. 使用Bootstrap 3开发响应式网站实践03,轮播下方的内容排版

    通常把一些重要信息.需要重点标注的信息放在轮播的下方显示,这部分区域用到了大字体的标题.副标题以及段落文字等. <div class="row" id="bigCa ...

  2. 使用 CSS 媒体查询创建响应式网站

    简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...

  3. 【Web探索之旅】第二部分第五课:响应式网站和移动应用

    内容简介 1.第二部分第五课:响应式网站和移动应用 2.第三部分第一课预告:服务器 第二部分第五课:响应式网站和移动应用 在我们开始聊响应式网站之前,我们可以聊聊移动App(App是Applicati ...

  4. CSS 媒体查询创建响应式网站

    使用 CSS 媒体查询创建响应式网站  适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...

  5. 使用Bootstrap 3开发响应式网站实践06,使用ListGroup、Thumbnails展示内容

    □ ListGroup展示内容 当希望把同类型的内容以列表.区块展示的时候,ListGroup是不错的选择. <div class="col-sm-6"> <h3 ...

  6. 为何企业钟爱H5响应式网站? html5响应式网站的优势与特点

    随着移动互联网时代的到来,H5响应式网站应运而生,并成功获得了商家.访客.搜索引擎等的青睐!越来越多的企业也选择了H5响应式建站,可为何企业钟爱H5响应式网站呢?难道传统网站不好吗?这个不能妄下结论, ...

  7. 使用Quasar设计Material和IOS风格的响应式网站

    使用Quasar设计Material和IOS风格的响应式网站 栏目: CSS · 发布时间: 8个月前 来源: segmentfault.com   本文转载自:https://segmentfaul ...

  8. Skeljs – 用于构建响应式网站的前端开发框架

    skelJS 是一个轻量级的前端框架,用于构建响应式站点和应用程序.让设计人员和开发人员可能够使用四个强大的组件:CSS 网格系统,响应式处理程序,CSS 的快捷方式和插件系统. 您可能感兴趣的相关文 ...

  9. 使用 Responsive Elements 快速构建响应式网站

    Responsive Elements 可以使任何元素来适应和应对他们所占据的区域.这是一个轻量的 JavaScript 库,你可以轻松嵌入到你的项目.元素会更具自己的宽度,自动响应和适应空间的增加或 ...

随机推荐

  1. [原创]-[WEB]代码高亮工具

    代码高亮显示,不是什么新鲜玩艺了,各种各样的插件多了去了.       一开始想在baidu空间里贴代码,用GeSHi生成的高亮HTML复制到编辑器就可以了,不过QQ空间却不行,复制过去的格式全部被清 ...

  2. 使用JavaStcript对数组元素去重的方法

    在做javascript开发的时候,经常会遇到数组元素重复的问题,而javascript Array又没有直接提供方法解决此问题,还需要自己去实现. 方案一: 思路: 1.构建一个新的数组存放结果: ...

  3. CoreData 增删改查

    #pragma mark - Core Data Methods - (void)insertObjectWithFileName:(NSString *)fileName { /** SQL新增记录 ...

  4. 【LeetCode】93. Restore IP Addresses

    Restore IP Addresses Given a string containing only digits, restore it by returning all possible val ...

  5. Android干坏事——禁止设备休眠

    实现这一功能的方法有两种,一种是在Manifest.xml文件里面声明,一种是在代码里面修改LayoutParams的标志位.具体如下: 1.在Manifest.xml文件里面用user-permis ...

  6. Linux命令-终止进程命令:kill

    kill -l 查看进程信号 常用信号 例如: 例子参见:Linux命令-查看进程命令:pstree

  7. 什么是RESTfull?理解RESTfull架构【转】

    越来越多的人开始意识到,网站即软件,而且是一种新型的软件. 这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(high latency).高 ...

  8. 腾讯云HTTPS设置管理

    腾讯云HTTPS解决方案:腾讯云针对现有用户,提供HTTPS的安全加密方案.腾讯云HTTPS有两种解决方法:客户自带证书和腾讯提供域名和证书. 腾讯云HTTPS解决方法客户提供证书和私钥,托管至腾讯云 ...

  9. Zookeeper监控工具

    Zookeeper的常用开源监控工具可以参考:http://zqhxuyuan.github.io/2016/12/31/BigData-Monitor-Tool

  10. python学习笔记——multiprocessing 多进程组件-队列Queue

    1 消息队列 1.1 基本语法 消息队列:multiprocessing.Queue,Queue是对进程安全的队列,可以使用Queue实现对进程之间的数据传输:还有一个重要作用是作为缓存使用. Que ...