使用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 相关文章推荐
接收键盘指令的脚本
Jun 26 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
关于axios如何全局注册浅析
Jan 14 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
Vue 用Vant实现时间选择器的示例代码
Oct 25 Javascript
VuePress 中如何增加用户登录功能
Nov 29 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 Javascript
antd form表单数据回显操作
Nov 02 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使用curl通过代理获取数据的实现方法
2016/05/16 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
vue的mixins属性详解
2018/03/14 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
vue实现记事本功能
2019/06/26 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
Python使用matplotlib绘制动画的方法
2015/05/20 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
What is view? why do we have view?
2012/06/22 面试题
外贸学院会计专业应届生求职信
2013/11/14 职场文书
单位人事专员介绍信
2014/01/11 职场文书
寄语学生的话
2014/04/10 职场文书
工地质量标语
2014/06/12 职场文书
如何写股份合作协议书
2014/09/11 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
逃课检讨书范文
2015/05/06 职场文书
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript
MySQL创建管理LIST分区
2022/04/13 MySQL
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers