桂电在线-转变成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. 添加导航

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;
}

 

效果图：image

。。。待续

posted @ 2014-12-28 16:47  yo胡yo  阅读(315)  评论(0)  编辑  收藏  举报