桂电在线-转变成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日,腾讯会议每天 ...

随机推荐

30分钟Git命令入门到放弃
git 现在的火爆程度非同一般,它被广泛地用在大型开源项目,团队开发,以及独立开发者,甚至学生之中. 初学者非常容易被各种命令,参数吓哭.但实际上刚上手你并不需要了解所有命令的用途.你可以从掌握一些简 ...
Yii PHP 框架分析 (一)
Yii PHP 框架分析 (一)作者:wdy http://hi.baidu.com/delphiss/blog/item/f7da86d787adb72506088b4b.html 基于yii1.0 ...
缺少HTML Doctype造成的样式问题
很简单的一个登陆界面: 代码: <html> <head> <style type="text/css"> form span { displa ...
Shell if else语句
if 语句通过关系运算符判断表达式的真假来决定执行哪个分支.Shell 有三种 if ... else 语句: if ... fi 语句: if ... else ... fi 语句: if ... ...
Junit 断言 assertThat Hamcrest匹配器
junit断言总结本文参考了http://blog.csdn.net/wangpeng047/article/details/9628449一 junit断言1.JUnit框架用一组assert方法封 ...
为什么String要设计成不可变的?
英文原:http://www.programcreek.com/2013/04/why-string-is-immutable-in-java/ 转自:http://blog.csdn.net/ren ...
(6/18)重学Standford_iOS7开发_控制器多态性、导航控制器、选项卡栏控制器_课程笔记
终于有时间跟新了,两周时间复(yu)习(xi)了5门考试累觉不爱...... ------------------------------------------------------------- ...
ABAP(笔记)
1.excel表格上传 *&---------------------------------------------------------------------* ** 程序名称:ZSD ...
Swift 实现图片转字符画的功能
本文介绍一个IOS APP , 将图片转换成ASCII字符画,使用Swift语言编写. 举个例子,我们使用著名的蕾娜照片作为原图片经APP转换后形成的字符画,我们打印出来,效果如下: 放大她的脸部可 ...
oracle6
转换函数介绍转换函数用于将数据类型从一种转为另外一种.在某些情况下,oracle server允许值的数据类型和实际的不一样,这时oracle server会隐含的转化数据类型比如: crea ...

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

正文菜单

html:

css:

效果图：

底部

html

css

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

随机推荐

热门专题