2.4 基于bootstrap写个页面
2017-10-20 本文已影响36人
林天宇
建立一个模版页面
1、在template目录下新建一个webpage.html模版页面，代码如下：
代码有点长，我给予细细注释：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入css，这里用到了url_for函数 ---->
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='bootstrap/css/bootstrap.min.css')}}" />
<!--- 建立一个自己的css文档，放在／statci/css/style.css 用来自己写css- -->
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/style.css')}}" />
<title>FlaskWeb</title>
</head>
<body>
<!-- 1、导航栏部分 -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- 移动设备显示 -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{ url_for('index') }}">{{ APPName }}</a>
</div>
<!-- PC设备显示-->
<div class="collapse navbar-collapse" id="bs-navbar-collapse">
<!-- 1.1 菜单链接部分 -->
<ul class="nav navbar-nav">
<li class="active"><a href="{{ url_for('index') }}">{{ username }} <span class="sr-only">(current)</span></a></li>
<li><a href="#">常用链接</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">我的链接 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="https://user.qzone.qq.com/278754/">QQ空间</a></li>
<li><a href="http://weibo.com/u/5519494764/">微博</a></li>
<li role="separator" class="divider"></li>
<li><a href="http://weibo.com/5519494764/">我的网站</a></li>
</ul>
</li>
</ul>
<!-- 1.2 居右的菜单部分 -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">注册</a></li>
<li><a href="#">登陆</a></li>
</ul>
<!-- 1.3 查询框 -->
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入...">
</div>
<button type="submit" class="btn btn-default">查询</button>
</form>
</div><!-- /.navbar-collapse -->
</div>
</div>
<!---导航栏结束--->
<!-- 2.页面部分 -->
<!-- 2.1 容器----->
<div class="container-fluid">
<div class="row">
<!--主体部分开始-->
<!--主体部分结束-->
</div> <!---row结束----->
</div><!---container-fluid结束------>
<!--3.footer尾部--->
<footer>
<nav class="navbar navbar-default">
<div class="text-right">
<p> </p>
<p><a href="#">Back to top</a></p>
</div>
</nav>
</footer>
<!---4.尾部引入js部分---->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{{ url_for('static',filename='jquery/1.12.4/jquery.min.js') }}"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{{ url_for('static',filename='bootstrap/js/bootstrap.min.js') }}"></script>
</body>
</html>
2、在/static/css／目录中建立一个style.css文件。作用是用来写自己的css，目前干了两件事：一是字体，二是控制navbar的距离。
body,button, input, select, textarea,h1 ,h2, h3, h4, h5, h6 {
font-family:"HanHei SC","PingFang SC","Helvetica Neue","Helvetica","STHeitiSC-Light","Arial",sans-serif;
}
body { padding-top: 50px; }
3、修改index视图函数中的rend_template文件为刚才建立的webpage.html：
return render_template('webpage.html',username=username)
4、运行，达到预期效果。
