使用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 相关文章推荐
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
Vue路由跳转问题记录详解
Jun 15 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 Javascript
解决Vue-cli无法编译es6的问题
Oct 30 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获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
Node.js Buffer用法解读
2018/05/18 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
涉外文秘个人求职的自我评价
2013/10/07 职场文书
咨询公司各岗位职责
2013/12/02 职场文书
爱情保证书范文
2014/02/01 职场文书
科技开发中心办公室主任岗位责任制
2014/02/10 职场文书
党员教师工作决心书
2014/03/13 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
承租经营合作者协议书
2014/10/01 职场文书