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

}

}

效果：

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

深刻体会到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模板例如：
1. http://www.ninesixty.co.uk/ 向下滚动导航条隐藏，向上滚动导航条显示
2. http://www.mikeinghamdesign.com/ 图片悬停效果
严格按照bootstrap模板，module->container->row->col->内容

下一步首页优化

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

桂电在线-转变成bootstrap版3(记录学习bootstrap)的更多相关文章

桂电在线-转变成bootstrap版2(记录学习bootstrap)
下载bootstrap框架https://github.com/twbs/bootstrap 或者 http://getbootstrap.com/ 拷贝模板修改基本模板语言zh-cn,标题,描述 ...
桂电在线-转变成bootstrap版
由于angularjs的不熟悉,而且SEO需要学习更多东西,于是先采用bootstrap版本,毕竟工作上也需要使用bootstrap,然后参照视频教程学习. bootstrap 基本模板 <!D ...
桂电在线-php-提取菜单到配置文件2
继续昨晚没完成的主菜单模板:  <div class="on-light" id="menus"> <?p ...
桂电在线-php-提取菜单到配置文件
新建存储菜单的配置文件 menus.php,并配置菜单 <?php if ( ! defined('BASEPATH')) exit('No direct script access allow ...
桂电在线_微信公众平台开发之-运用angularjs显示学校公告新闻列表和详情页面
折腾angularjs的感悟几天折腾,总的来说看了很多博客,要么不是最新的技术文档,要么写得不够完整,因为别人是基于他们的理解写的技术博客代码不一定会贴完整,所以一旦你用的是最新的想要看完整的实例就 ...
Ubuntu Linux 使用桂电校园网上网
2016年9月1日星期四桂电校园网今天升级新的出校器,旧的出校器已经不能使用,所以本篇博客已经过期,下面的方法已经不能让Ubuntu使用桂电校园网上外网了.详细的原因,请到这个网站查看:校园网计费 ...
PHP基础在线视频教程高清版
这个是我给大家介绍的PHP基础在线视频教程高清版,目前PHP慢慢垄断WEB的语言编写市场了,PHP 是一种服务器内置式的script 语言,它的出现使得在unix上快速地开发动态web成为现实.PHP ...
杭电acm阶段之理工大版
想參加全国软件设计大赛C/C++语言组的同学,假设前一篇<C和指针课后练习题总结>没看完的,请先看完而且依照上面的训练做完,然后做以下的训练. 传送门:http://blog.csdn.n ...
《2020版Linux云计算学习图谱》帮你提升80%专业技能，在线免费领
2亿人在家办公.视频会议的需求,给钉钉后台系统带来巨大压力.据了解,钉钉在通过阿里云紧急扩容1万台服务器后,再度扩容1万台云服务器. 受疫情影响,在家办公需求暴涨.从29号开始到2月6日,腾讯会议每天 ...

随机推荐

用LINQPad加上Tx驱动来分析log
Tx (LINQ to Logs and Traces)是微软发布的开源工具.可以用这个工具来使用LINQ分析日志,包括 Event Tracing for Windows (ETW) Event L ...
SAP ABAP 程序调用FORM
*&---------------------------------------------------------------------* *& Report ZHAIM_FOR ...
Winfrom 如何安全简单的跨线程更新控件
来源:http://www.cnblogs.com/rainbowzc/archive/2010/09/29/1838788.html 由于多线程可能导致对控件访问的不一致,导致出现问题.C#中默认是 ...
kindle
http://www.mindmap8.com/Kindle_Paperwhite/20130726266.html http://blog.csdn.net/felomeng/article/det ...
java转义xml中的多余尖括号
xml中的敏感字符是尖括号,如果xml的值中含有尖括号,那么在解析的时候就会报错,如: <?xml version="1.0" encoding="UTF-8&qu ...
IHttpModule实现URL重写
1.用自定义IHttpModule实现URL重写一般来说,要显示一些动态数据总是采用带参数的方式,比如制作一个UserInfo.aspx的动态页面用于显示系统的UserInfo这个用户信息表的数据, ...
Linux安装Jdk，CentOS安装Jdk
Linux安装Jdk,CentOS安装Jdk >>>>>>>>>>>>>>>>>>>& ...
11.9 noip模拟试题
NOIP2016 模拟赛——那些年,我们学过的文化课背单词(word.c/cpp/pas)[题目描述]fqk 退役后开始补习文化课啦, 于是他打开了英语必修一开始背单词. 看着满篇的单词非常头疼, 而 ...
开源 android
Android经典的开源项目其实非常多,但是国内的博客总是拿着N年前的一篇复制来复制去,实在是不利于新手学习.今天爬爬把自己熟悉的一些开源项目整理起来,希望能对Android开发同学们有所帮助.另外, ...
用Javascript评估用户输入密码的强度
<!-- 密码已经是我们生活工作中必不可少的工具,但一个不安全的密码有又有可能会给我们造成不必要的损失.作为网站设计者,如果我们在网页中能对用户输入的密码进行安全评估,并显示出相应的提示信息 ...

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

正文菜单

html:

css:

效果图：

底部

html

css

桂电在线-转变成bootstrap版3(记录学习bootstrap)的更多相关文章

随机推荐

热门专题