项目班 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. ffmpeg代码实现自定义encoder

    1.概述 本文主要讲述如何用ffmpeg代码实现自己的encoder. 2.代码 /* *本程序主要实现一个自己的encoder并加入到encoder链中去,供api调用 *作者:缪国凯(MK) *8 ...

  2. 将tomcat7解压版注册为windows系统服务

    一.修改service.bat文件(...tomcat7\bin\service.bat) 该文件中共修改两处即可 ①:在文件的开头加入以下设置,分别是java的安装路径.Tomcat的安装路径及服务 ...

  3. Qt Quick之Canvas

    QML中的Canvas,俗称画布,它用来定义一个绘图区域,可以使用ECMAScript代码来绘制直线,矩形,贝塞尔曲线,弧线,图片,文字等图元,还可以为这些图元应用填充颜色和边框颜色,甚至还可以进行低 ...

  4. [SPOJ-DISUBSTR]Distinct Substrings

    vjudge 题意 给你一个串,求不同字串个数. \(n\le10^5\) sol 直接建SAM然后输出\(\sum_{i=1}^{tot}len[i]-len[fa[i]]\) code #incl ...

  5. windows下python使用虚拟环境

    官方文档: http://pythonguidecn.readthedocs.io/zh/latest/dev/virtualenvs.html virtualenv 是一个创建隔绝的Python环境 ...

  6. QT（4）信号与槽

    mainWidget.h #ifndef MAINWIDGET_H #define MAINWIDGET_H #include <QWidget> #include <QPushBu ...

  7. 清理：db上面的过期的binlog，释放磁盘空间。 （转)

    如果10台以内的db的话,自己手动ssh进去,clean就足以,但是上百台呢,就要写脚本了.大概思路:在 一台db跳转机上面, 写一个脚本,访问slave,远程获取正在复制的master上面的binl ...

  8. MySQL数据库服务器参数优化mycnf,16G内存8核CPU,

    业务场景: 后台支持手机在线更新系统,db服务器内存16G,8核,dell的pc服务器. qps: 200个左右 tps: 1个左右 一分钟50几个 sort_buffer_size = 32M 大了 ...

  9. 【转】Pro Android学习笔记（三六）：Fragment（1）：基本概念

    目录(?)[-] 为何引入Fragment 大小屏幕的适配 横屏竖屏切换 返回键 什么是Fragment 为何引入Fragment 我们之前的Activity都是都是全屏处理较为简单的单一事务功能,适 ...

  10. Spark Streaming之六：Transformations 普通的转换操作

    与RDD类似,DStream也提供了自己的一系列操作方法,这些操作可以分成四类: Transformations 普通的转换操作 Window Operations 窗口转换操作 Join Opera ...