使用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 相关文章推荐
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
bootstrap模态框消失问题的解决方法
Dec 02 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
Apr 07 Javascript
Angular2数据绑定详解
Apr 18 Javascript
在微信小程序中保存网络图片
Feb 12 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
Aug 23 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 Javascript
JS实现分页导航效果
Feb 19 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脚本的10个技巧(6)
2006/10/09 PHP
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
php设计模式 Visitor 访问者模式
2011/06/28 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
javascript中的隐式调用
2018/02/10 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
python里将list中元素依次向前移动一位
2014/09/12 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
在django中使用post方法时,需要增加csrftoken的例子
2020/03/13 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
abstract class和interface有什么区别?
2012/01/03 面试题
行政前台岗位职责
2013/12/04 职场文书
村捐赠仪式答谢词
2014/01/21 职场文书
2014年师德承诺书
2014/05/23 职场文书
新郎结婚感言
2015/07/31 职场文书
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang