1. 下载bootstrap框架https://github.com/twbs/bootstrap 或者 http://getbootstrap.com/

  2. 拷贝模板

  3. 修改基本模板

    1. 语言zh-cn，标题，描述

    2. 修改css,js,网站logo路径

    3. 修改后

      <!DOCTYPE html>
      
<html lang="zh-cn">
      
  <head>
      
    <meta charset="utf-8">
      
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
      
    <meta name="viewport" content="width=device-width, initial-scale=1">
      
    <meta name="description" content="桂电在线 - 丰富多彩的大学信息数据平台，让大学生活，大学学习更迅速、简单。">
      
    <meta name="keywords" content="桂电在线, 大学信息数据平台, 大学生活，大学学习">
      
    <meta name="author" content="jd胡">

    <title>桂电在线</title>

    <!-- Bootstrap的css -->
      
    <link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
      
    <!--项目css文件 -->
      
    <link href="<?=__PUBLIC__?>style/app.css" rel="stylesheet"> 

    <!--[if lt IE 9]>
      
    <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.js"></script>
      
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
      
    <![endif]-->

    <link rel="apple-touch-icon" href="<?=__PUBLIC__?>images/favicon.ico">
      
    <link rel="icon" href="<?=__PUBLIC__?>images/favicon.ico">
      
  </head>
      
    <body>

        <!-- jQuery -->
      
        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
      
        <!-- bootstrap的js　-->
      
        <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
      
        <!-- 项目js文件-->
      
        <script src="<?=__PUBLIC__?>script/app.js"></script>
      
    </body>
      
</html>

  4. 添加导航

html:

<!-- 导航条 -->

    <nav class="navbar navbar-default">

        <div class="container">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse">

                    <span class="sr-only">切换的导航条</span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

                <a href="/" class="navbar-brand"> <i class="glyphicon glyphicon-cloud"></i><strong>桂电在线</strong>

                </a>

            </div>

            <div class="collapse navbar-collapse" id="bs-navbar-collapse">

                <ul class="nav navbar-nav navbar-left">

                    <li class="active">

                        <a href="/"> <i class="glyphicon glyphicon-home"></i>

                        </a>

                    </li>

                    <li>

                        <a href="" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">

                            校园生活

                            <span class="caret"></span>

                        </a>

                        <ul class="dropdown-menu" role="menu">

                            <li>

                                <a href="#">官网公告</a>

                            </li>

                            <li>

                                <a href="#">校园活动</a>

                            </li>

                            <li>

                                <a href="#">跳蚤专场</a>

                            </li>

                            <li>

                                <a href="#">校历</a>

                            </li>

                            <li>

                                <a href="#">校园地图</a>

                            </li>

                            <li>

                                <a href="#">校园美景</a>

                            </li>

                            <li>

                                <a href="#">一卡通丢失</a>

                            </li>

                            <li>

                                <a href="#">一卡通招领</a>

                            </li>

                        </ul>

                    </li>

                    <li>

                        <a href="" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">

                            校园学习

                            <span class="caret"></span>

                        </a>

                        <ul class="dropdown-menu" role="menu">

                            <li>

                                <a href="#">翻译一下</a>

                            </li>

                            <li>

                                <a href="#">分享资源</a>

                            </li>

                            <li>

                                <a href="#">小谈学习</a>

                            </li>

                            <li>

                                <a href="#">查询四六级成绩</a>

                            </li>

                        </ul>

                    </li>

                    <li>

                        <a href="">

                            校园名片

                        </a>

                    </li>

                </ul>

                <ul class="nav navbar-nav navbar-right">

                    <li>

                        <a href="#" class="btn btn-default navbar-btn">登录</a>

                    </li>

                    <li>

                        <a href="#" class="btn btn-primary navbar-btn">注册</a>

                    </li>

                </ul>

            </div>

            <!-- /.navbar-collapse --> 

        </div>

        <!-- /.container-fluid --> 

    </nav>

    <!-- /nav -->

css注释定义:

  • /*！xxx*/ 使用上的注释
  • /*-xxx*/ 或者 /*--xx*/ 层级的注释

css：

/*！xxx*/

/*-xxx*/ /*--xx*/

/*导航条*/

.navbar-brand {

  padding-right: 40px;

}

.navbar-btn {

  margin-top: 10px;

  margin-bottom: 8px;

}

/*！小屏幕不存在浮动的边距*/

@media (min-width: 768px) {

  .navbar-btn.btn-primary {

    margin-left: 10px;

  }

}

.navbar-fixed-top {

  box-shadow: 0px 1px 0px 0px rgba(176, 176, 176, 0.1);

}

/*-按钮*/

.navbar-btn.btn-default,

.navbar-btn.btn-primary {

  padding: 7px 18px;

  line-height: normal !important;

}

/*--注册按钮*/

.navbar-default .navbar-nav>li>a.navbar-btn.btn-primary{

  color: #fff;

}

/*！点击面板各个状态的样式，检查每个状态是否需要重写*/

.navbar-default .navbar-nav>li>a.navbar-btn.btn-primary:hover{

  color: #428bca;

  background-color: #fff;

}

.navbar-default .navbar-nav>li>a.navbar-btn.btn-primary:focus{

  color: #428bca;

}

效果图：

。。。待续

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

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

    继续上文 正文菜单 html: <!-- 菜单块 --> <div class="on-light" id="menus"> <s ...

  2. 桂电在线-转变成bootstrap版

    由于angularjs的不熟悉,而且SEO需要学习更多东西,于是先采用bootstrap版本,毕竟工作上也需要使用bootstrap,然后参照视频教程学习. bootstrap 基本模板 <!D ...

  3. 桂电在线-php-提取菜单到配置文件2

    继续昨晚没完成的主菜单模板: <!-- 菜单块 --> <div class="on-light" id="menus"> <?p ...

  4. 桂电在线-php-提取菜单到配置文件

    新建存储菜单的配置文件 menus.php,并配置菜单 <?php if ( ! defined('BASEPATH')) exit('No direct script access allow ...

  5. 桂电在线_微信公众平台开发之-运用angularjs显示学校公告新闻列表和详情页面

    折腾angularjs的感悟 几天折腾,总的来说看了很多博客,要么不是最新的技术文档,要么写得不够完整,因为别人是基于他们的理解写的技术博客代码不一定会贴完整,所以一旦你用的是最新的想要看完整的实例就 ...

  6. Ubuntu Linux 使用桂电校园网 上网

    2016年9月1日 星期四 桂电校园网今天升级新的出校器,旧的出校器已经不能使用,所以本篇博客已经过期,下面的方法已经不能让Ubuntu使用桂电校园网上外网了.详细的原因,请到这个网站查看:校园网计费 ...

  7. PHP基础在线视频教程高清版

    这个是我给大家介绍的PHP基础在线视频教程高清版,目前PHP慢慢垄断WEB的语言编写市场了,PHP 是一种服务器内置式的script 语言,它的出现使得在unix上快速地开发动态web成为现实.PHP ...

  8. 杭电acm阶段之理工大版

    想參加全国软件设计大赛C/C++语言组的同学,假设前一篇<C和指针课后练习题总结>没看完的,请先看完而且依照上面的训练做完,然后做以下的训练. 传送门:http://blog.csdn.n ...

  9. 《2020版Linux云计算学习图谱》帮你提升80%专业技能，在线免费领

    2亿人在家办公.视频会议的需求,给钉钉后台系统带来巨大压力.据了解,钉钉在通过阿里云紧急扩容1万台服务器后,再度扩容1万台云服务器. 受疫情影响,在家办公需求暴涨.从29号开始到2月6日,腾讯会议每天 ...

随机推荐

  1. 【转】shell 教程——06 Shell变量：Shell变量的定义、删除变量、只读变量、变量类型

    Shell支持自定义变量. 定义变量 定义变量时,变量名不加美元符号($),如: variableName="value" 注意,变量名和等号之间不能有空格,这可能和你熟悉的所有编 ...

  2. iOS 开发中常见的设计模式

    最近有小伙伴问到在iOS开发中的几种设计模式,这里摘录一下别人的总结(因为已经感觉总结得差不多了,适用的可以阅读一下) 首先是开发中的23中设计模式分为三大类:1.创建型 2.结构型 3.行为型 (i ...

  3. Kerberos认证流程详解

    Kerberos是诞生于上个世纪90年代的计算机认证协议,被广泛应用于各大操作系统和Hadoop生态系统中.了解Kerberos认证的流程将有助于解决Hadoop集群中的安全配置过程中的问题.为此,本 ...

  4. Android.mk 的含义

    LOCAL_PATH:=$(call my-dir) LOCAL_PATH是定义源文件在哪个目录用的. my-dir 是个定义的宏方法, $(call my-dir)就是调用这个叫 my-dir的宏方 ...

  5. LED灯开关电路

    “灯控项目”中LED灯开关控制电路,LED供电电压12V,工作电流200mA. 电路图

  6. android79 Fragment生命周期

    切换成01时依次调用onCreate,onStart,onResume方法,切换到03的时候01依次onPause,onStop,onDestroy,03依次onCreate,onStart,onRe ...

  7. Sending e-mail with Spring MVC---reference

    reference from:http://www.codejava.net/frameworks/spring/sending-e-mail-with-spring-mvc Table of con ...

  8. 源码解析之–YYAsyncLayer异步绘制

    来源:伯乐在线专栏作者 - Shelin 链接:http://ios.jobbole.com/86878/ 点击 → 了解如何加入专栏作者 前言 YYAsyncLayer是异步绘制与显示的工具.最初是 ...

  9. 【原】个人对win7开机黑屏只有鼠标排障总结

    个人对win7开机黑屏只有鼠标排障总结 文:铁乐猫 第一种情况是explorer.exe进程丢失或损坏有关: 判断方法是按Ctrl+Alt+Del键能呼出任务管理器,结束explorer.exe进程, ...

  10. CentOS7上GitHub/GitLab多帐号管理SSH Key

    由于公司团队使用 GitLab 来托管代码,同时,个人在 Github 上还有一些代码仓库,可公司邮箱与个人邮箱是不同的,由此产生的 SSH key 也是不同的,这就造成了冲突 ,文章提供此类问题的解 ...