-
下载bootstrap框架https://github.com/twbs/bootstrap 或者 http://getbootstrap.com/
-
拷贝模板
-
修改基本模板
-
语言zh-cn，标题，描述
-
修改css,js,网站logo路径
-
修改后
<!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>
-
-
添加导航
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- 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; }
效果图：
。。。待续