使用bootstrap3开发响应式网站


Posted in Javascript onMay 12, 2016

本文实例为大家分享了bootstrap3响应式网站开发代码,供大家参考,具体内容如下

第一次使用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>他是一位白手起家事业成功的亿万富翁,是当今最成功的世界级潜能开发专家;他协助职业球队、企业总裁、国家元首激发潜能,渡过各种困境及低潮。曾辅导过多位皇室的家庭成员,被美国前总统克林顿、戴安娜王妃聘为个人顾问;曾为众多世界名人提供咨询,包括南非总统曼?岳?⑶八樟?芡掣甓?颓欠颉⑹澜缤?蚬诰?驳铝?#8226;阿加西等;

   </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%');
  }
  }
 });

效果图:

使用bootstrap3开发响应式网站

使用bootstrap3开发响应式网站

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是bootstrap3响应式网站关键制作代码,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的遍历同id元素 并响应事件的代码
Jun 14 Javascript
JS实现简单的键盘打字的效果
Apr 24 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
Node.js创建一个Express服务的方法详解
Jan 06 Javascript
详解vue 组件
Jun 11 Javascript
React+EggJs实现断点续传的示例代码
Jul 07 Javascript
JavaScript如何优化逻辑判断代码详解
Jun 08 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 #Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 #Javascript
去除字符串左右两边的空格(实现代码)
May 12 #Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 #Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 #Javascript
You might like
PHP 批量删除 sql语句
2009/06/05 PHP
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
php关键字仅替换一次的实现函数
2015/10/29 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
使用python编写监听端
2018/04/12 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
深入了解Python 变量作用域
2020/07/24 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
python requests库的使用
2021/01/06 Python
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
在职人员函授期间自我评价分享
2013/11/08 职场文书
行政前台岗位职责
2013/12/04 职场文书
酒店经理职责
2014/01/30 职场文书
学校安全教育制度
2014/01/31 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
欢度春节标语
2014/07/01 职场文书
上班旷工检讨书
2015/08/15 职场文书