디지털 양피지/Flask2015. 12. 17. 16:51

Twitter Bootstrap Integration with Flask-Bootstrap

Bootstrap은 Twitter에서 공개한 client-side Framework 이다. Flask에서는 extension을 사용하여 간단하게 integration 할 수 있도록 도와 준다. Flask-Bootstrap은 다음과 같이 설치 한다.

(venv)$pip install flask-bootstrap


flask-bootstrap을 initialization 하기위해서는 다음과 같이 하면 된다.

from flask.ext.bootstrap import Bootstrap

#...

bootstrap = Bootstrap(app)

flask-bootstrap이 초기화 되면 모든 bootstrap 파일들을 template에서 사용할 수 있다. application은 template 확장을 통해 개발 할 수 있다. 


{% extends "bootstrap/base.html" %}


아래와 같이 user.html에 flask-bootstrap에서 지원하는 block을 지정해 준다. title, navbar, content 블럭을 새로 작성하였다.


위 작업을 수행하고 나면 아래와 같은 bootstrap 형식의 page를 볼 수 있다.




기본적으로 bast.html에 template block을 사용하여 확장해 나갈 수 있으며 Flask-Bootstrap template block은 다음과 같다.


이중 styles와 scripts 파일은 bootstrap file에 이미 정의 되어 있어서 그냥 사용하면 문제가 될 수 있다. Jinja2의 super()를 사용하여 추가하는 방식으로 사용해야 한다.


{% block scripts %}

{{ super() }}

<script type="text/javascript" scr="my-script.js"></script>

{% endblock %}




'디지털 양피지 > Flask' 카테고리의 다른 글

Flask - Custom Filters  (0) 2016.01.05
Flask - Web Form  (0) 2015.12.18
Flask - Custom Error Pages / Links / Static Files /Time  (0) 2015.12.18
Flask - Template  (0) 2015.12.17
Flask - Basic Application Structure  (0) 2015.12.16
Posted by 빨간 양말