桂电在线-转变成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>©<?=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; } }
效果：
至此，桂电在线首页的布局第一版就结束了，总结下感受
- 深刻体会到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。以后相应式页面实现步骤：先小后逐个阈值调大
- 逛下bootstrap外文官网，多体验外国的bootstrap框架做的页面 有些效果真心好酷，可惜有些效果目前还没深入研究学习，别人也封装好了，以后设法找多点开源bootstrap模板 例如：
- http://www.ninesixty.co.uk/ 向下滚动导航条隐藏，向上滚动导航条显示
- http://www.mikeinghamdesign.com/ 图片悬停效果
- 严格按照bootstrap模板，module->container->row->col->内容
下一步首页优化
