项目班 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. Codeforces Round #402 (Div. 2) 题解

    Problem A: 题目大意: 给定两个数列\(a,b\),一次操作可以交换分别\(a,b\)数列中的任意一对数.求最少的交换次数使得任意一个数都在两个序列中出现相同的次数. (\(1 \leq a ...

  2. P1330 封锁阳光大学（二分图染色）

    题目描述 曹是一只爱刷街的老曹,暑假期间,他每天都欢快地在阳光大学的校园里刷街.河蟹看到欢快的曹,感到不爽.河蟹决定封锁阳光大学,不让曹刷街. 阳光大学的校园是一张由N个点构成的无向图,N个点之间由M ...

  3. HUE，大数据的SQL Shell

    1. HUE需要安装SASL 发现异常: Could not install table: Error creating table sample_07: Could not start SASL: ...

  4. cmake opencv,dlib 编译静态库 1

    无论windows,linux 所有的库 ,dlib,opencv 通过cmake-gui 设置好静态库, 动态库,和其他各个选项 Tips: cmake 优先级用cmake-gui,因为命令太多,容 ...

  5. mybatis 学习二 conf xml 配置信息

    xml映射配置文件      这个xml文件主要包括一下节点信息      * properties 属性      * settings 设置      * typeAliases 类型命名     ...

  6. 问题：c# newtonsoft.json使用；结果：Newtonsoft.Json 用法

    Newtonsoft.Json 用法 Newtonsoft.Json 是.NET 下开源的json格式序列号和反序列化的类库.官方网站: http://json.codeplex.com/ 使用方法 ...

  7. navicat自动备份

    http://blog.csdn.net/eastmount/article/details/70239244

  8. PullToRefresh------ListView的使用

    第一步 :写出布局文件的设置 <com.handmark.pulltorefresh.library.PullToRefreshListView android:id="@+id/pu ...

  9. [51nod1043]幸运号码

    题意:1个长度为2N的数,如果左边N个数的和 = 右边N个数的和,那么就是一个幸运号码. 例如:99.1230.123312是幸运号码. 给出一个N,求长度为2N的幸运号码的数量.由于数量很大,输出数 ...

  10. 存储引擎InnoDB

    InnoDB是MySQL的默认存储引擎, InnoDB支持的最大存储限制是64TB,支持事务安全,支持行锁,支持B树索引,不支持哈希索引和全文索引,支持集群索引,支持数据缓存,支持索引缓存,不支持数据 ...