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

项目 06 Bootstrap的更多相关文章

  1. 为SpringMvc项目安装BootStrap和AngularJs前端框架

    在我们"用SpringMVC写一个注册的小Demo"之前,我们学习一下如何给该项目安装Bootstrap和AngularJs的前端框架,这样我们就能轻松排版出漂亮的登录界面.我们采 ...

  2. 在asp.net mvc4项目里bootstrap datetimepicker控件的使用

    前段时间写了一篇关于调用阿里大于的短信接口来开发例会短信群发通知功能的文章http://www.cnblogs.com/zhouyuangan/p/apicall_1.html,其中的例会时间是需求中 ...

  3. vue项目引入bootstrap、jquery

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  4. Vue项目使用bootstrap

    ①npm install boostrap@4.0.0 --save @4.0.0为版本号 ②在项目的main.js中添加 import 'bootstrap/dist/css/bootstrap.m ...

  5. react项目使用bootstrap

    曾经对于react项目怎么使用bootstrap纠结了很久,网上也查了好多的资料,有的用react-bootstrap,只要npm install 以后,import就可以使用里面的css了.但是这个 ...

  6. vue项目引入bootstrap正确姿势

    vue如何引入bootstrap 最近在玩全栈,自然少不了vue的使用.使用vue-cli生成的项目想引入bootstrap,需要先安装相应的npm包,然后在代码中显示引入. 1.安装依赖包: cnp ...

  7. 06 BootStrap前端开发框架(超级好用)

    1.BootStrap概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JavaScript 的,它简洁灵活 ...

  8. 第一个项目--用bootstrap实现美工设计的首页

    主要介绍在首页实现中用到bootstrap实现效果的地方. 实现如下的效果: <li> <div role="group" style="padding ...

  9. Vue2.0项目使用bootstrap后提示Module parse failed: Unexpected character

    具体报错如下: 报错原因是: Vue2.0无法识别bootstrap.css中使用的字体,也就是上图中圈出来的地方. 解决方案: // 需要在webpack.config.js增加对不识别文件的处理 ...

随机推荐

  1. webpack打包APP的后端地址处理

    PC端我们用webpack打包,只需要写相对路径,发布的时候和后端接口在同一目录下即可. 但是做过APP或者混合开发的同学都知道,APP不需要发布的,如果后端地址还是用相对路径的话,可想而知,调用后端 ...

  2. JQUERYUI 框架 http://jqueryui.com/

    http://jqueryui.com/

  3. Makefile经典教程

    转自:http://blog.csdn.net/ruglcc/article/details/7814546/       makefile很重要 什么是makefile?或许很多Winodws的程序 ...

  4. 使用变参函数实现pwd命令

    #include "stdafx.h"#include <Windows.h> #define DIRNAME_LEN (MAX_PATH+2) BOOL PrintS ...

  5. 【254】◀▶IEW-Unit19

    Unit 19 Technology Communication I.名词性从句在雅思写作中的运用 英语中哪些位置可以放名词? 1)主语 2)宾语 3)表语 4)同位语 名词的位置放一个句子=名词性从 ...

  6. shell监测磁盘使用并发送邮件

    linux sendEmail工具的安装使用    1.下载文件 #wget  http://files.cnblogs.com/files/sunziying/sendEmail-v1.56.tar ...

  7. Javax ws 01

    1 EndPoint发布服务 package com.gosaint.provider; import javax.jws.WebService; /** * @Authgor: gosaint * ...

  8. DOS查看端口占用及杀掉进程命令

    转载自:http://www.cnblogs.com/rainman/p/3457227.html 1. 查看端口占用 在windows命令行窗口下执行: netstat -aon|findstr & ...

  9. Java学习之多态（Polymorphism）

    多态==晚绑定 不要把函数重载理解为多态. 因为多态是一种运行期的行为,不是编译期的行为. 多态:父类型的引用可以指向子类型的对象. 比如 Parent p = new Child(); 当使用多态方 ...

  10. lsnrctl start错误Linux Error: 29: Illegal seek （翻译：非法谋取）

    现在,想不起来为什么ORACLE的监听,怎么就突然无法起来了呢. 好吧,问题反正就是发生了. lsnrctl start 遇到如下错误, LSNRCTL for Linux: Version 10.2 ...