码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-12-28 18:08:29      阅读:99      评论:0      收藏:0      [点我收藏+]

标签:

  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>

。。。待续

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

标签:

原文地址:http://www.cnblogs.com/jdhu/p/4190132.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!