桂电在线-转变成bootstrap版3(记录学习bootstrap)

继续上文

正文菜单

html:

<!-- 菜单块 -->
    <div class="on-light" id="menus">
        <section class="container" id="life-menus">
            <header class="col-xs-12 text-center">
                <h2 class="bs-docs-featurette-title">校园生活</h2>
                <p class="lead">校内生活都知道！</p>
            </header>
            <div class="row bs-docs-featured-sites">
                <div class="col-xs-6 col-sm-3">
                    <a href="" class="menu menu1">官网公告</a>
                </div>
                <div class="col-xs-6 col-sm-3">
                    <a href="" class="menu menu2">校园活动</a>
                </div>
                <div class="col-xs-6 col-sm-3">
                    <a href="" class="menu menu3">跳蚤专场</a>
                </div>
                <div class="col-xs-6 col-sm-3">
                    <a href="" class="menu menu4">校历</a>
                </div>
            </div>
            <div class="row bs-docs-featured-sites">
                <div class="col-xs-6 col-sm-3">
                    <a href="" class="menu menu5">校园地图</a>
                </div>
                <div class="col-xs-6 col-sm-3">
                    <a href="" class="menu menu6">校园美景</a>
                </div>
                <div class="col-xs-6 col-sm-3">
                    <a href="" class="menu menu7">一卡通丢失</a>
                </div>
                <div class="col-xs-6 col-sm-3">
                    <a href="" class="menu menu8">一卡通招领</a>
                </div>
            </div>
        </section>

        <section class="container" id="study-menus">
            <header class="col-xs-12 text-center">
                <h2 class="bs-docs-featurette-title">校园学习</h2>
                <p class="lead">校内学习都知道！</p>
            </header>
            <div class="row bs-docs-featured-sites">
                <div class="col-xs-6 col-sm-3">
                    <a href="" class="menu menu1">翻译一下</a>
                </div>
                <div class="col-xs-6 col-sm-3">
                    <a href="" class="menu menu2">分享资源</a>
                </div>
                <div class="col-xs-6 col-sm-3">
                    <a href="" class="menu menu3">小谈学习</a>
                </div>
                <div class="col-xs-6 col-sm-3">
                    <a href="" class="menu menu4">查询四六级成绩</a>
                </div>
            </div>
    </section>

    <section class="container" id="cards-menus">
        <header class="col-xs-12 text-center">
            <h2 class="bs-docs-featurette-title">校园名片</h2>
            <p class="lead">校内朋友圈，你可能认识他们喔！？</p>
        </header>
        <!-- 杰出校友 -->
        <div class="row text-right">
            <div class="col-xs-12 text-right">
                <a href="" class="btn btn-primary">
                    更多校友
                    <i class="glyphicon glyphicon-chevron-right"></i>
                </a>
            </div>
        </div>
        <div class="row bs-docs-featured-sites">
            <div class="col-xs-6 col-sm-3">
                <a href="">
                    <img src="<?=__PUBLIC__?>images/test.jpg" alt="" class="img-responsive"/></a>
            </div>
            <div class="col-xs-6 col-sm-3">
                <a href="">
                    <img src="<?=__PUBLIC__?>images/test.jpg" alt="" class="img-responsive"/></a>
            </div>
            <div class="col-xs-6 col-sm-3">
                <a href="">
                    <img src="<?=__PUBLIC__?>images/test.jpg" alt="" class="img-responsive"/></a>
            </div>
            <div class="col-xs-6 col-sm-3">
                <a href="">
                    <img src="<?=__PUBLIC__?>images/test.jpg" alt="" class="img-responsive"/></a>
            </div>
        </div>
    </section>
</div>

css:

/*菜单块*/
#menus .container{
  margin-top: 35px;
}

#menus .menu{
  display: block;
  color: #fff;
  min-height: 150px;
  padding: 56px 20px 20px;
  text-align: center;
  font-size: 26px;
}

#menus .menu.menu1{background-color:#308999;}
#menus .menu.menu1:hover{background-color:#3894a6;}
#menus .menu.menu2{background-color:#e7b45b;}
#menus .menu.menu2:hover{background-color:#ffc65c;}
#menus .menu.menu3{background-color:#19b1d0;}
#menus .menu.menu3:hover{background-color:#00c3e5;}
#menus .menu.menu4{background-color:#e78931;}
#menus .menu.menu4:hover{background-color:#ff9721;}
#menus .menu.menu5{background-color:#74569f;}
#menus .menu.menu5:hover{background-color:#8160b3;}
#menus .menu.menu6{background-color:#24637d;}
#menus .menu.menu6:hover{background-color:#28728f;}
#menus .menu.menu7{background-color:#86bc3f;}
#menus .menu.menu7:hover{background-color:#94d145;}
#menus .menu.menu8{background-color:#e7b45b;}
#menus .menu.menu8:hover{background-color:#ffc65c;}

@media (min-width: 768px) {
  .bs-docs-featurette-title {
    font-size: 40px;
  }
  .bs-docs-featured-sites .col-sm-3:first-child img{
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .bs-docs-featured-sites .col-sm-3:last-child img {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}

.bs-docs-featured-sites {
  margin-right: -1px;
  margin-left: -1px;
}

.bs-docs-featured-sites .col-xs-6{
  padding: 1px;
}

效果图：

底部

html

<!-- 底部 -->
<footer class="bs-docs-footer">
    <div class="container">
        <div class="row">
            <div class="logo col-xs-12 col-md-3 text-center">
                <a href="/" class="navbar-brand">
                    <i class="glyphicon glyphicon-cloud"></i>
                    <strong>桂电在线</strong>
                </a>
            </div>
            <div class="links col-xs-12 col-md-7">
                <span>&copy;<?=date('Y')?> yo胡yo All rights reserved</span>
            </div>
        </div>
    </div>
</footer>

css

/*底部*/
.bs-docs-footer {
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: 100px;
  color: #777;
  text-align: center;
  border-top: 1px solid #e5e5e5;
}

.bs-docs-footer .links {
  font-size: 16px;
}

.bs-docs-footer .navbar-brand{
  float: none;
}
}

效果：

至此，桂电在线首页的布局第一版就结束了，总结下感受

1. 深刻体会到bootstrap3.0移动设备优先规则的意义 @media (min-width: 768px) { .bs-docs-featurette-title { font-size: 40px; } .bs-docs-featured-sites .col-sm-3:first-child img{ border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .bs-docs-featured-sites .col-sm-3:last-child img { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } }  以上是针对大于768px的大屏幕所做的样式处理，目前为了入门只简单做了两套相应式布局col-xs和col-md。以后相应式页面实现步骤：先小后逐个阈值调大
2. 逛下bootstrap外文官网，多体验外国的bootstrap框架做的页面 有些效果真心好酷，可惜有些效果目前还没深入研究学习，别人也封装好了，以后设法找多点开源bootstrap模板 例如：
   1. http://www.ninesixty.co.uk/ 向下滚动导航条隐藏，向上滚动导航条显示
   2. http://www.mikeinghamdesign.com/ 图片悬停效果
3. 严格按照bootstrap模板，module->container->row->col->内容

下一步首页优化

1. 返回顶部 http://leximiller.com/
2. 搜索效果http://newrelic.com/
3. 导航条滚动显示隐藏http://www.ninesixty.co.uk/ | 显示隐藏 http://www.wideeyecreative.com/
4. 菜单图片悬停显示http://www.mikeinghamdesign.com/ http://www.wideeyecreative.com/ http://www.creative-tim.com/