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 |