第一次使用bootstrap3做的响应式网站
第一次使用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做的响应式网站的更多相关文章
- 使用Bootstrap 3开发响应式网站实践03,轮播下方的内容排版
通常把一些重要信息.需要重点标注的信息放在轮播的下方显示,这部分区域用到了大字体的标题.副标题以及段落文字等. <div class="row" id="bigCa ...
- 使用 CSS 媒体查询创建响应式网站
简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...
- 【Web探索之旅】第二部分第五课:响应式网站和移动应用
内容简介 1.第二部分第五课:响应式网站和移动应用 2.第三部分第一课预告:服务器 第二部分第五课:响应式网站和移动应用 在我们开始聊响应式网站之前,我们可以聊聊移动App(App是Applicati ...
- CSS 媒体查询创建响应式网站
使用 CSS 媒体查询创建响应式网站 适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...
- 使用Bootstrap 3开发响应式网站实践06,使用ListGroup、Thumbnails展示内容
□ ListGroup展示内容 当希望把同类型的内容以列表.区块展示的时候,ListGroup是不错的选择. <div class="col-sm-6"> <h3 ...
- 为何企业钟爱H5响应式网站? html5响应式网站的优势与特点
随着移动互联网时代的到来,H5响应式网站应运而生,并成功获得了商家.访客.搜索引擎等的青睐!越来越多的企业也选择了H5响应式建站,可为何企业钟爱H5响应式网站呢?难道传统网站不好吗?这个不能妄下结论, ...
- 使用Quasar设计Material和IOS风格的响应式网站
使用Quasar设计Material和IOS风格的响应式网站 栏目: CSS · 发布时间: 8个月前 来源: segmentfault.com 本文转载自:https://segmentfaul ...
- Skeljs – 用于构建响应式网站的前端开发框架
skelJS 是一个轻量级的前端框架,用于构建响应式站点和应用程序.让设计人员和开发人员可能够使用四个强大的组件:CSS 网格系统,响应式处理程序,CSS 的快捷方式和插件系统. 您可能感兴趣的相关文 ...
- 使用 Responsive Elements 快速构建响应式网站
Responsive Elements 可以使任何元素来适应和应对他们所占据的区域.这是一个轻量的 JavaScript 库,你可以轻松嵌入到你的项目.元素会更具自己的宽度,自动响应和适应空间的增加或 ...
随机推荐
- navicat for mysql怎么注册?navicat11全系列破解教程(附注册码)
来自脚本之家 http://www.jb51.net/softjc/473494.html
- Java获取资源的路径
在Java中,有两种路径: 类路径 文件夹路径 使用类路径有两种方式: object.getClass().getResource()返回资源的URL MyClass.class.getResourc ...
- HawkHost退款流程详解
http://www.senzw.com/newsfile/2011928115323.htmlHawkhost提供30天退款保证,退款流程也比较简单,下面为大家介绍一下整个退款流程. 首先登录客户中 ...
- C# 打开钱箱支持北洋、佳博、爱普生
/// <summary> /// 执行开钱箱操作 /// 没钱箱或打印机原功能都可以正常使用 /// </summary> public void ExecuteOpenCa ...
- Linux命令-定时任务命令:crontab
linux定时任务命令相当于windows=>附件=>系统工具=>计划任务程序. 要想让linux定时任务生效,首先应该先启动crond服务,并且给这个服务设置开机自自动. 默认li ...
- iOS - App 应用
1.Xcode 项目属性 Product Name 软件名称.产品名称.项目名称 Organization Name 公司名称.组织名称 Organization Identifier 公司的唯一标识 ...
- Android使用DrawerLayout仿qq6.6版本侧滑效果
一讲到侧滑菜单,我相信大家都会想到一个开源控件SlidingMenu,在google还没有出来DrawerLayout的时候几乎都是使用Slidingmenu来实现侧滑效果,可以说是效果很不错,自 ...
- Python 字典 clear()方法
描述 Python 字典 clear() 方法用于删除字典内所有元素. 语法 clear() 方法语法: D.clear() 参数 无. 返回值 该方法没有任何返回值. 实例 以下实例展示了 clea ...
- struts2 ValueStack详解,页面获取值el表达式、ognl表达式
http://www.blogjava.net/max/archive/2007/04/28/114417.html 我想用的是el表达式! http://www.cnblogs.com/belief ...
- angular.js快速入门 hello world
我们整个系列的学习会去写一个简单blog雏形,如果有精力再完善美化. 但是这篇还是要从HelloWorld开始学习. angular.js 文件加载我们选用 bootstrap中文网提供的一个cdn服 ...