使用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实现yield的方法
Nov 06 Javascript
Javscript调用iframe框架页面中函数的方法
Nov 01 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
May 25 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
浅谈js数组和splice的用法
Dec 04 Javascript
jQuery实现元素的插入
Feb 27 Javascript
jsTree事件和交互以及插件plugins详解
Aug 29 Javascript
JavaScript异步加载问题总结
Feb 17 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
Jun 18 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 Javascript
vue+vant实现购物车全选和反选功能
Nov 17 Vue.js
JavaScript前后端JSON使用方法教程
Nov 23 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 getDocNamespaces()函数讲解
2019/02/03 PHP
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
JavaScript实现控制打开文件另存为对话框的方法
2015/04/17 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
python数据归一化及三种方法详解
2019/08/06 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
Django多个app urls配置代码实例
2020/11/26 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
香港化妆品经销商:我的公主
2016/08/05 全球购物
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
中层干部竞争上岗演讲稿
2014/01/13 职场文书
《蓝色的树叶》教学反思
2014/02/24 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书
董事长助理工作职责范本
2014/07/01 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
三八妇女节寄语
2015/02/27 职场文书
python数据分析之用sklearn预测糖尿病
2021/04/22 Python
springboot临时文件存储目录配置方式
2021/07/01 Java/Android
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL