首页 > flask可以结合Bootstrap吗?

flask可以结合Bootstrap吗?

我看网上的教程学了一下flask,做了一个简单的登陆系统,但是界面很难看,我想把界面风格用Bootstrap改成Flat UI,或者就是Bootstrap也行,但是不知道应该怎么搞。

{% extends "header.html" %}

{% block content %}


<h1>登陆</h1>




<form action="" method="post" name="login">
      {{ form.hidden_tag() }}
      <p>
          用户名:<br>
          {{ form.username(size=80) }}<br>
          {% for error in form.username.errors %}
          <span style="color: red;">[{{error}}]</span>
          {% endfor %}<br>
      </p>
      <p>
          密码:<br>
          {{ form.password(size=80) }}<br>
          {% for error in form.password.errors %}
          <span style="color: red;">[{{error}}]</span>
          {% endfor %}<br>
      </p>
      <p>{{ form.remember_me }} 记住我</p>
      <p><input type="submit" value="登陆"></p>
  </form>


怎么才能把Bootstrap结合起来呢?
比如一个Bootstrap的输入框是这样的

<input type="text" class="form-control login-field" value="" placeholder="学号" id="login-name" />

那怎么替换 {{ form.username(size=80) }}呢?


完全没问题,样式链接可以如楼上写成动态生成的,也可以写成静态的

<link href="/css/bootstrap.css" rel="stylesheet" media="screen"

至于wtforms生成的input可以按以下方式应用class

{{ form.username(class='form-control login-field',placeholder='学号') }}

有flask-bootstrap吧


https://github.com/mbr/flask-bootstrap


引入bootstrap

在base.html 里面引入:

<link href="{{ url_for('.static', filename = 'css/bootstrap.css') }}" rel="stylesheet" media="screen">
<link href="{{ url_for('.static', filename = 'css/bootstrap-responsive.min.css') }}" rel="stylesheet">


<script src="{{ url_for('.static', filename = 'js/bootstrap.js') }}"></script>
<script src="{{ url_for('.static', filename = 'js/bootstrap-select.js') }}"></script>

把该引入的都引入,然后就可以开始使用了。

【热门文章】
【热门文章】