项目班 06 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 %}