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. mv、umask、chattr、lsattr命令

    mv命令行,即move 将文件移动到目录下 对文件或目录重命名 umask chattr 设置文件或目录的隐藏属性 lsattr显示文件或目录的隐藏属性 ls mv 1.txt aa ls cd aa ...

  2. 388. Longest Absolute File Path

    就是看哪个文件的绝对路径最长,不是看最深,是看最长,跟文件夹名,文件名都有关. \n表示一波,可能存在一个文件,可能只有文件夹,但是我们需要检测. 之后的\t表示层数. 思路是如果当前层数多余已经有的 ...

  3. css3 -&gt; 多栏布局

    在进行多栏布局时.使用bootstrap的栅格系统能够非常轻松的实现效果,事实上css3本身也提供了多兰布局的功能. 比方,我们在一个section标签内填充了非常多内容.同一时候希望内容可以显示成三 ...

  4. 怎样使用SetTimer MFC 够具体

    转自:http://blog.csdn.net/ellor/article/details/1714741 Timer事件,即定时器事件,是在游戏编程中,常常使用的一个事件.借助它能够产生定时运行动作 ...

  5. 动态规划入门——Eddy's research II

    转载请注明出处:http://blog.csdn.net/a1dark 分析:找规律 #include<stdio.h> int main(){ int m,n; while(scanf( ...

  6. console.debug()浏览器控制台打印输出 仅仅在支持console的浏览器下打印

    console.debug()浏览器控制台打印输出 仅仅在支持console的浏览器下打印 var util = {}; /** * 工具类 */ util = new function() { /* ...

  7. Director Scene Layer and Sprite

    Scenes Director Layers Multiple Layers Example: Sprites References Scenes A scene (implemented with ...

  8. Chapter 6 - How to Play Music and Sound Effect

    In this chapter, we would add background music to the game and play sound effect when the hero fires ...

  9. angularjs 更新局部作用域

    前几天项目需要,做了一个背景遮罩的弹出框,html采用js动态添加进去的,结果发现angularjs绑定在这里面不起作用,搜索下解决了,记录下: var smallApplyParent = docu ...

  10. javascript中强制类型转换

    javascript开发过程中,强制类型转换一般发生在条件判断和==运算符.其他情况,发生的类型转换(与这两种情况也是基本类似,属于万变不离其宗的范畴),暂不讨论. == 双等运算符 考虑代码: a ...