使用bootstrap3开发响应式网站

使用bootstrap3开发响应式网站

本文实例为大家分享了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: caFIHrJlc(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 > .timelinFIHrJe-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;

}

}

他是一位白手起家事业成功的亿万富翁，是当今最成功的世界级潜能开发专家；他协助职业球队、企业总裁、国家元首激发潜能，渡过各种困境及低潮。曾辅导过多位皇室的家庭成员，被美国前总统克林顿、戴安娜王妃聘为个人顾问；曾为众多世界名人提供咨询，包括南非总统曼徳拉、前苏联总统戈尔巴乔夫、世界网球冠军安德烈•阿加西等；

做的过程中发现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%');

}

}

});

效果图：

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。