zoukankan      html  css  js  c++  java
  • 桂电在线-转变成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- 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;  
    }

    效果图:

    imageimage

     

    底部

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

    效果:imageimage

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

    1. 深刻体会到bootstrap3.0移动设备优先规则的意义 @media (min- 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/
  • 相关阅读:
    OSPF
    【今日CS 视觉论文速览】 24 Jan 2019
    【今日CS 视觉论文速览】Wed, 23 Jan 2019
    【今日CS 视觉论文速览】 21 Jan 2019
    【Processing学习笔记】安装与入门
    【今日CS 视觉论文速览】Part2, 18 Jan 2019
    【今日CS 视觉论文速览】Fri, 18 Jan 2019
    【今日CS 视觉论文速览】Thu, 17 Jan 2019
    【今日CS 视觉论文速览】Part2, 16 Jan 2019
    【今日CS 视觉论文速览】Wed, 16 Jan 2019
  • 原文地址:https://www.cnblogs.com/jdhu/p/4191162.html
Copyright © 2011-2022 走看看