项目班 05 Bootstrap
一、介绍
#基于HTML，CSS，JS的简洁灵活的流行前端框架及交互组件集 #为快速WEB开发提供了一套前端工具包，包括布局、网格、表格、按钮、表单、导航、提示等等 #Twitter 出品，大厂开源产品 Github；基于 Less，丰富的 Mixi；Responsive 的栅格系统（Grid），移动设备优先；丰富的组件（HTML和JS）；插件（比如 icon font -- Font Awesome）
templates/base.html 更新
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="{{ static_url('css/bootstrap.css') }}"> {# <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.css">#} <title>{% block title %}Tornado Title{% end %}</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Tudo 图片</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="/">首页 <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="/explore">发现</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 用户中心 </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">个人信息</a> <a class="dropdown-item" href="#">收藏</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">帮助</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="/logout">登出</a> </li> </ul> <a class="btn btn-info my-2 my-sm-0" href="/upload">上传</a> </div> </nav> <div class="container"> <div style="width: auto; text-align: center;"> {% block content %}Default body of base{% end %} </div> </div> <script src="{{ static_url('js/jquery-3.3.1.slim.min.js') }}"></script> <script src="{{ static_url('js/popper.min.js') }}"></script> <script src="{{ static_url('js/bootstrap.js') }}"></script> {#<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>#} {#<script src="https://cdn.bootcss.com/popper.js/1.14.3/esm/popper.min.js"></script>#} {#<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>#} </body> </html>
templates/login.html
{% extends 'base.html' %}
{% block title %}login page{% end %}
{% block content %}
<div class="row">
<div class="col-sm-6">
<form action="/login?next={{ next }}" method="post" enctype="multipart/form-data">
<div class="form-group">
Username
<input autofocus="" class="form-control" id="id_username" maxlength="254" name="username" type="text" required="">
</div>
<div class="form-group">
Password
<input class="form-control" id="id_password" name="password" type="password" required="">
</div>
<button class="btn btn-primary">Login</button>
<div>
还没有帐号，需要<a href="/signup">注册</a>一个
</div>
</form>
</div>
</div>{% end %}
templates/signup.html
{% extends 'base.html' %}
{% block title %}login page{% end %}
{% block content %}
<div class="row">
<div class="col-sm-6">
<form action="/login?next={{ next }}" method="post" enctype="multipart/form-data">
<div class="form-group">
Username
<input autofocus="" class="form-control" id="id_username" maxlength="254" name="username" type="text" required="">
</div>
<div class="form-group">
Password
<input class="form-control" id="id_password" name="password" type="password" required="">
</div>
<button class="btn btn-primary">Login</button>
<div>
还没有帐号，需要<a href="/signup">注册</a>一个
</div>
</form>
</div>
</div>{% end %}