标签：bootstrap
Bootstrap开发
是一个很好用的页面布局。实在好用，我在http://4440271.blog.51cto.com/4430271/1663863
中使用的就是boostrap的模板
下载：http://v3.bootcss.com/getting-started/
这里，我用在：bbs_pro项目中的登陆页面来说明其用法，在这一部分中所介绍的内容均在前端，后端的部分略去，详细参考关于项目的解说部分：http://4440271.blog.51cto.com/4430271/1663863
在bbs_pro项目中，我们选择：http://v3.bootcss.com/examples/navbar-static-top/
作为基本样式，所有代码均在这个基础上改动。
最总，我们所做的bbs_pro的基本页面，index.html 样式如下图：
登陆页面login.html 的显示为：
由此可以看出，登陆页面与index页面导航部分的样式是相同的，因此，登陆页面与index页面存在继承的关系，具体来看一下各部分是如何完成的：
首先，应当添加所需的css样式：
这里重点说一下customize.css这个文件，它是从虎嗅网中取出的对bbs正文栏的阴影样式，在虎嗅网中找到表示阴影部分的代码拷贝下来，放到customize.css文件中
.center-container-hx,.footer {
box-shadow: 2px 0 5px rgba(214, 214, 215, 0.9), -2px 0 5px rgba(214, 214, 215, 0.9);
}
/*.contents{margin-top: 20px;}*/
/*.container-hx {width:1000px;margin:0 auto;z-index:10;height:100%;text-align: left}*/
.contents {margin-top:20px;}
/** {word-wrap:break-word;}*/
/*.comments{*/
/*width:70%*/
/*}*/在index中的引入如图：
相应的，在customize.css中
下面给出index页面部分的代码，
<!DOCTYPE html>
<!-- saved from url=(0048)http://v3.bootcss.com/examples/navbar-fixed-top/ -->
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="http://v3.bootcss.com/favicon.ico">
<title>Fixed Top Navbar Example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/static/css/navbar-fixed-top.css" rel="stylesheet">
<!--从虎嗅网中导入的带阴影的边框，代码保存在/static/css/customize.css中-->
<link href="/static/css/customize.css" rel="stylesheet">
<!-- Just for debugging purposes. Don‘t actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top"><!--导航标签-->
<div class="container"> <!-- 导航的logo -->
<div class="navbar-header"><!--导航的头部分-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="/">抽屉</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"> <!--导航栏中的内容-->
<li class="active"><a href="/">全部</a></li>
{% for category in bbs_category %}
{% ifequal category.id cate_id %}
<li class="active"><a href="/category/{{ category.id }}/">{{ category.name }}</a></li>
{% else %}
<li class=""><a href="/category/{{ category.id }}/">{{ category.name }}</a></li>
{% endifequal %}
{% endfor %}
</ul>
<ul class="nav navbar-nav navbar-right"> <!--登陆设置，在最右端的下拉菜单-->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{% if user.is_authenticated %}
{{ user.username }}
{% else %}
登陆
{% endif %}
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/login/">Login</a></li>
<li><a href="/logout/">Logout</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!--虎嗅网中的样式-->
<div class="container center-container-hx"> <!-- 放置可重用的数据-->
<!---------------------------------------------------------------------------------------->
<!--下面的代码为动态页面，此页面为母版，其他网站可以重用block中的数据，只要继承母版即可-->
{% block page-content %}
<!-- Main component for a primary marketing message or call to action -->
<ul class="nav nav-pills navbar-right" role="tablist">
<li role="presentation" class="active">
<a href="/bbs_pub/">发帖</a>
</li>
</ul>
<br/>
<hr>
<div class="contents">
{% for bbs in bbs_list %}
<!--论坛首页链接标题-->
<a href="/detail/{{ bbs.id }}">{{ bbs.title }}</a><!--点击标题跳转到bbs_detail.html-->
<br>
{{ bbs.summary }}
<br>
<hr>
{% endfor %}
</div>
{% endblock %}
<!--------------------------------------------------------------------------------------->
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/static/js/jquery-2.1.1.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
</body></html>在登录页面中，继承了{%block xxxxxx%}……{%endblock%}之外的内容
在登录页面中，我们借用了http://v3.bootcss.com/examples/signin/
中的样式
查看网页代码，可以截取form中的内容，如图：
我们看到，这里用到from-signin的样式，但是我们的样式中没有这个样式，查看代码引入的样式，可以看到：
点击框中的文件，可以看到这段css文件的代码，将其拷贝到：
少做修改：
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #eee;
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
position: relative;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="text"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}这样，就可将这个样式引入到我们的login.html中
因为login.html继承自index.html，要写明继承关系，然后在{%block%}中填写login的代码。具体代码如下：
<link href="/static/css/signin.css" rel="stylesheet">
{%extends ‘index.html‘%}
{% block page-content%}
<div class="container">
<form action=‘/acc_login/‘ class="form-signin" method=‘POST‘>
{# <input type=‘text‘ name=‘username‘ />#}
{# <input type=‘password‘ name=‘password‘ />#}
{##}
{# <input type=‘submit‘ value=‘Login‘ />#}
<h2 class="form-signin-heading">Please sign in</h2>
<label for="in" class="sr-only">Username</label>
<input type="text" name="username" class="form-control" placeholder="Username" required>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" name="password" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
{# <input type=‘submit‘ value=‘Sign in‘ />#}
<span style=‘color:red‘>{{login_err}}</span>
</form>
</div>
{%endblock%}加上bbs_pro的后台代码，就可以的到如前面所给出的显示。
本文出自 “thystar” 博客，请务必保留此出处http://4440271.blog.51cto.com/4430271/1663934
标签：bootstrap
原文地址：http://4440271.blog.51cto.com/4430271/1663934
