第一次使用bootstrap3做的响应式网站

第一次使用bootstrap3,发现对移动支持得不错，可以很快的开发出一个支持移动和PC端的网站

作为一个后台程序员觉得得界面做得还可以，按以前是只能自己看看了

时间线来自国外网站，使用到的css如下

.timeline {

    list-style: none;

    padding: 20px 0 20px;

    position: relative;

}

.timeline:before {

    top:;

    bottom:;

    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:;

    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:;

    border-right-width: 15px;

    left: -15px;

    right: auto;

}

.timeline > li.timeline-inverted > .timeline-panel:after {

    border-left-width:;

    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:;

    color: inherit;

}

.timeline-body > p,

.timeline-body > ul {

    margin-bottom:;

}

.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:;

        top: 16px;

    }

    ul.timeline > li > .timeline-panel {

        float: right;

    }

    ul.timeline > li > .timeline-panel:before {

        border-left-width:;

        border-right-width: 15px;

        left: -15px;

        right: auto;

    }

    ul.timeline > li > .timeline-panel:after {

        border-left-width:;

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

                    </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%');

             }

          }

 });

以下是最后效果图，

实际效果在 www.witleaf.com

巴特西

第一次使用bootstrap3做的响应式网站

最新文章

热门文章