桂电在线-转变成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/