使用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插件pagewalkthrough实现引导页效果
Jul 05 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
js常用正则表达式集锦
May 17 Javascript
微信小程序实现弹框效果
May 26 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生成缩略图的类代码
2008/10/02 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
js重写方法的简单实现
2016/07/10 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
JS实现复制功能
2017/03/01 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
React实践之Tree组件的使用方法
2017/09/30 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
vue实现图片上传功能
2020/05/28 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
python实现五子棋小游戏
2020/03/25 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
Python 寻找局部最高点的实现
2019/12/05 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
银行求职自荐信
2014/06/30 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
2015感人爱情寄语
2015/02/26 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
篮球拉拉队口号
2015/12/25 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript
python析构函数用法及注意事项
2021/06/22 Python
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers