项目班 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. Java面试题10(如何取到set集合的第一个元素)

    1.如何取到set集合的第一个元素. public static void main(String[] args) { Set set = new HashSet(); set.add("x ...

  2. GCC泛型宏

    在JAVA和CPP这种OOP语言中,都有泛型类,在C语言可以用宏定义实现泛型函数. main.c #include <stdio.h> #define min(x, y) ({ \ typ ...

  3. 使用UIVisualEffectView创建毛玻璃效果

    UIVisuaEffectView :继承自UIView,可以看成是专门用于处理毛玻璃效果的视图,只要我们将这个特殊的View添加到其他视图(eg. ImageView )上面,被该UIVisuaEf ...

  4. Operating System-Process(2)进程表&&中断处理

    上一篇文章阐述了进程的基本信息,本文主要介绍进程的实现,主要内容: 进程表(Process Table or Process Control Blocks) 中断处理(Interrupt) 一.进程表 ...

  5. MongoDB分析工具之一：explain()语句分析工具

    explain(),语句分析工具 MongoDB 3.0之后,explain的返回与使用方法与之前版本有了很大的变化,介于3.0之后的优秀特色和我们目前所使用给的是3.0.7版本,本文仅针对Mongo ...

  6. 【P2P网贷新手入门】详解借款标的种类及其风险

    不同于国外的网贷平台以信用借款标为主,在中国,我们投资网贷平台会看到多样借款标,而投资人往往弄不清自己投资的标属于什么类型的标,特点怎么样,风险如何. 抵 押 标 定义:借款人用自己的房屋车辆等实物在 ...

  7. ss3

    1)执行如下命令,进行安装shadowsocks(命令需要一条条的输入,然后回车,执行完一条,在执行下一条命令),过程中可能会让你选择确认的地方,直接输入"y"回车即可: yum ...

  8. kafka 基础知识梳理（转载）

    一.kafka 简介 kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据.这种动作(网页浏览,搜索和其他用户的行动)是在现代网络上的许多社会功能的一个关键因 ...

  9. Blast 如何使用Blast+（Linux）转载

    下载数据 #此处下载对应物种的数据库ftp://ftp.ncbi.nih.gov/genomes/,下载fna格式的即可   wget ftp://ftp.ncbi.nih.gov/genomes/A ...

  10. hdu1054

    /* [题意] 给定一棵树,标记一节点,则与该节点所连的边都被标记,问最少需要标记多少个节点使得所有边都被标记: 或者说给定一个树型城堡,在交叉路口放一个士兵,则与该路口相连的路都被守住, 问最少需要 ...