项目班 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. bzoj 2001: City 城市建设 cdq

    题目 PS国是一个拥有诸多城市的大国,国王Louis为城市的交通建设可谓绞尽脑汁.Louis可以在某些城市之间修建道路,在不同的城市之间修建道路需要不同的花费.Louis希望建造最少的道路使得国内所有 ...

  2. Windows常用的命令

    wmic msinfo32 regedit msconfig

  3. 使用Visual Studio进行单元测试-Part2

    写在开头:Coding ain't done until all the tests run. No unit test no BB. 另外有童鞋在上一篇博文留言说找不到Add Fake Assemb ...

  4. hdu 4372 Count the Buildings —— 思路+第一类斯特林数

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=4372 首先,最高的会被看见: 然后考虑剩下 \( x+y-2 \) 个被看见的,每个带了一群被它挡住的楼, ...

  5. oracle--视图（2）---

    Oracle---视图 视图是基于一个表或多个表或视图的逻辑表,本身不包含数据,通过它可以对表里面的数据进行查询和修改.视图基于的表称为基表,Oracle的数据库对象分为五种:表,视图,序列,索引和同 ...

  6. django examples 学习笔记(1)创建一个独立的python环境

    pip install virtualenv   创建一个虚拟环境 virtualenv   my_env      创建一个独立的环境 source my_env/bin/activate   激活 ...

  7. Activity---弹出右侧窗口

    第一步: Activity弹出窗口的布局 <?xml version="1.0" encoding="UTF-8"?> //布局文件main_top ...

  8. jprofiler9.1.1 安装与配置

    一.安装部分 安装包: 1.jprofiler_linux_9_1_1.rpm 2.jprofiler_windows-x64_9_1_1.exe 需要注意的是,Linux 和 Windows 安装的 ...

  9. 牛叉之nc命令

    nc是一款很不错的网络检测工具,以下是详细使用. 'nc.exe -h'即可看到各参数的使用方法. 基本格式:nc [-options] hostname port [ports] - nc -l - ...

  10. Hive之数据查询

    Hive之数据查询 发布于:2013 年 10 月 11 日 由 Aaron发布于: Hive 一,排序和聚合 对于排序有两种方式,一种是order by 一种是sort by order by 会对 ...