第一次使用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 库,你可以轻松嵌入到你的项目.元素会更具自己的宽度,自动响应和适应空间的增加或 ...
随机推荐
- HDUOJ------2398Savings Account
Savings Account Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)T ...
- Appirater激励用户为你的app评分
如果你此前开发过app,那么你会知道获得用户积极的评分并不是一件简单的事情.不幸的是,用户往往给他们不喜欢的东西负面评价,而不怎么倾向于给喜欢的内容留下积极评价. 所以,你作为一个开发者如何激励用 ...
- 最简易的PHP Storm调试模式开启方式
使用的是xdebug调试工具. 其实真的很想吐槽php语言开启调试模式真的好麻烦. 据说xdebug调试工具不支持php7.0以下版本,我同事的php5.6就不支持噗嗤.. 正文: 1.先用phpSt ...
- JMeter学习笔记--详解JMeter配置元件
JMeter配置元件可以用来初始化默认值和变量,以便后续采样器使用.将在其作用域的初始化阶段处理. CSV Data Set Config:被用来从文件中读取数据,并将它们拆分后存储到变量中,适合处理 ...
- zabbix中文乱码的解决办法
配置zabbix,发现中文不能正常显示,出现如下图所示的乱码: 修改方法: 1.从windows下控制面板->字体->选择一种字体例如“新宋体” 2.把它拷贝到zabbix的web端的fo ...
- 设置PdfPTable与标题间的距离
使用itextsharp生成PDF时,需要改变标题与文档中添加的PdfPTable间距离,改变SpacingBefore值不起作用,查了下这方面的知识较少,自己跟踪代码,找到了设置位置是在使用iTex ...
- webservice快速入门-使用wsimport生成ws服务端(二)
上个例子演示的是在当前项目下发布的Webservice Server,而实际应用中和Client是分离的,本文介绍两种客户端开发方式: 1.导出WebService服务端服务接口到jar包,客户端引入 ...
- 【JavaWeb】(10)微信公众号开发进阶
因为普通开发会有很多的权限限制,所以我们能够申请一个測试账号来开发体验一下微信公众号的其它接口功能. 申请測试号我就不介绍了.非常easy.申请成功后,还须要配置Url地址和token,和我们普通公众 ...
- [k8s]如何处理dockerfile无expose情况下在k8s里暴漏访问
做镜像时候忘记expose端口了, 或者要做一个通用的镜像, expose端口不固定, 又要在k8s环境里跑并暴漏服务访问,怎么破? 实际上: yaml的 ports: - containerPort ...
- 【Android】11.3 屏幕旋转和场景变换过程中GridView的呈现
分类:C#.Android.VS2015: 创建日期:2016-02-21 一.简介 实际上,对于布局文件中的View来说,大多数情况下,Android都会自动保存这些状态,并不需要我们都去处理它.这 ...