flask可以结合Bootstrap吗？

Question

我看网上的教程学了一下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) }}呢？

Answer 1

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

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

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

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

Answer 2

有flask-bootstrap吧

Answer 3

引入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>

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

Answer 4

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