[Python3][Flask1.1] Flask로 blog 웹개발 실습 - 17 : Face Lift with Bootstrap (css)

 

 

1. 부트스트랩 설치

$ pip install flask-bootstrap

 

 

 

2. Flask-Bootstrap 인스턴스 생성

다른 Flask 확장과 함께 초기화해야함

# vim app/__init__.py

# ...
from flask_bootstrap import Bootstrap

app = Flask(__name__)
# ...
bootstrap = Bootstrap(app)

 

 

 

3. bootstrap 활용

확장명이 초기화되면 bootstrap/base.html 템플릿과 extends 절을 활용하여 응용 프로그램 템플릿에서 참조할 수 있습니다.

기존의 base.html 파일을 재설계해줍니다.

<!-- vim app/templates/base.html -->

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

{% block title %}
    {% if title %}{{ title }} - Microblog{% else %}Welcome to Microblog{% endif %}
{% endblock %}

{% block navbar %}
    <nav class="navbar navbar-default">
        ... navigation bar here (see complete code on GitHub) ...
    </nav>
{% endblock %}

{% block content %}
    <div class="container">
        {% with messages = get_flashed_messages() %}
        {% if messages %}
            {% for message in messages %}
            <div class="alert alert-info" role="alert">{{ message }}</div>
            {% endfor %}
        {% endif %}
        {% endwith %}

        {# application content needs to be provided in the app_content block #}
        {% block app_content %}{% endblock %}
    </div>
{% endblock %}

block navbar와 block

<!-- vim app/templates/404.html -->

{% extends "base.html" %}

{% block app_content %}
    <h1>File Not Found</h1>
    <p><a href="{{ url_for('index') }}">Back</a></p>
{% endblock %}

content 에서 app_content로 바뀌었다.

 

 

 

4. 

추후 업데이트 예정