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

  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. 添加导航

    <!-- 导航条 -->
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">

                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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"><strong>桂电在线</strong></a>
                </div>

                <div class="collpse navbar-collapse" id="navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                生活
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu" role="menu">
                                <li class="active"><a href="">test1</a></li>
                                <li><a href="">test1</a></li>
                                <li><a href="">test1</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="">test1</a></li>
                                <li><a href="">test1</a></li>
                                <li><a href="">test1</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="">test1</a></li>
                                <li><a href="">test1</a></li>
                                <li><a href="">test1</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>

。。。待续

时间： 2024-10-19 15:25:55

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

桂电在线-转变成bootstrap版

由于angularjs的不熟悉,而且SEO需要学习更多东西,于是先采用bootstrap版本,毕竟工作上也需要使用bootstrap,然后参照视频教程学习. bootstrap 基本模板 <!DOCTYPE html> <html lang="zh-cn"> <head> <!-- Meta, title, CSS, favicons, etc. --> <meta charset="utf-8"> <

微信公众平台开发-桂电在线1

主要功能 桂电在线目的是包含学校内所有信息展示,创造一个跟学生相关信息的平台.主要模块由校园消息,生活,学习,个人名片四大模块 目前系统环境是: 硬件:SAE,微信公众平台 软件:php mysql apache 程序框架:SAE版的CI框架,ama 主页入口网址:http://jdhu.sinaapp.com/ 目前正在开发当中..

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

折腾angularjs的感悟 几天折腾,总的来说看了很多博客,要么不是最新的技术文档,要么写得不够完整,因为别人是基于他们的理解写的技术博客代码不一定会贴完整,所以一旦你用的是最新的想要看完整的实例就只能去官网查阅文档,现在通过实现下面的两个功能才真正了解什么是前端的MVVM框架. 另外,总结下我理解中的MVVM框架:后台php是MVC框架,一直做法是php处理数据,然后把数据渲染到模板,然后后台返回html页面给浏览器, 现在前端mvvm(model-view-viewmodel)就是:mod

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

新建存储菜单的配置文件 menus.php,并配置菜单 <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); /*菜单配置*/ $config['menus'] = array(); // 校园生活 $config['menus']['life'] = array('name' => '学校生活', 'submenu' => array( 'news/official_news' =>

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

继续昨晚没完成的主菜单模板: <!-- 菜单块 --> <div class="on-light" id="menus"> <?php foreach ($menus as $menu_key => $menu): ?> <?php // 排除校园名片 if ($menu_key == 'card') break; ?> <section class="container" id=&qu

在线看图网页版，快速查看CAD图纸

在线看图网页版,快速查看CAD图纸.在日常CAD工作中,我们常常会需要查阅大量的CAD图纸.有时候下载安装CAD看图软件会非常的麻烦,而且占用电脑内存.所以今天小编想给大家分享一中不需要下载安装任何软件,也能在线查看CAD图纸的方法.具体演示步骤如下: 步骤一:我们需要先在浏览器里搜索"xunjieCAD"一词,找到官网网址,进入官网界面. 步骤二:在xunjieCAD官网里,把光标放置在"在线转换"标签上,会出现各种在线转换的选择标签,我们点击"在线看图

《Python基础教程 第2版 修订版》学习笔记（一）

<Python基础教程 第2版 修订版>学习笔记(一) 第一章:快速改造:基础知识 1.1 安装Python (略) How to Become a Hacker: http://www.catb.org/~esr/faqs/hacker-howto.html 中文版:如何成为一名黑客 http://blog.jobbole.com/64196/ (伯乐在线版,个人认为目前比较完善的版本) 1.2 交互解释器 >>> 1.3 算法是什么 目标:煮一盘午餐肉加鸡蛋的食物 过程:

快速了解Bootstrap—在MVA学习Bootstrap

©版权声明:本文为博主原创文章,如需转载请注明出处. Bootstrap 是目前最流行的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB项目. 如果您希望在几个小时内对Bootstrap有一个直观的了解,观看微软虚拟学院(MVA)的视频教学Building Responsive UI with Bootstrap或许是个不错的选择. 这是一个大概六个小时的视频教学,分为七个部分.除了视频,每个部分还配有PPT和小测验.视频是英文的,配有英文字幕.通过这几个小时的学习

spring4.0.6最新稳定版新特性学习,简单学习教程(一)

Spring Framework 4.0 学习整理. Spring框架的核心部分就是Ioc容器,而Ioc控制的就是各种Bean,一个Spring项目的水平往往从其XML配置文件内容就能略知一二,很多项目,往往是外包公司的项目,配置文件往往是乱七八糟,抱着能跑就行,不报错就行的态度去写,然后在项目中后期发现各种缺失又去一通乱补,其结果就是,整个文档可读性极差,毫无章法.这也不能怪写这个XML的人,拿着苦逼程序员的工资干着架构师的工作必然是这个结果.为了程序员的幸福,我认为有必要来一套简单快速的官方