Bootstrap-Flask

Bootstrap-flask

Bootstrap-flask4 helper for Flask/Jinja2. Based on Flask-Bootstrap, but lighter and better.
扩展Bootstrap-Flask基于扩展Flask-Bootstrap实现，旨在替代缺乏维护的后者。和Flask-Bootstrap相比，Bootstrap-Flask简化了大部分功能（比如未内置基模板），添加了Bootstrap4支持，并增加了一些辅助功能。

安装

pip install bootstrap-flask

初始化

from flask_bootstrap import Bootstrap
from flask import Flask

app = Flask(__name__)

bootstrap = Bootstrap(app)

加载静态资源

bootstrap对象提供了两个方法可以用来生成资源引用代码：用来加载CSS文件的bootstrap.load_css（）方法和用来加载JavaScript文件（包括Bootstrap、jQuery、Popper.js）的bootstrap.load_js（）方法。

<head>
....
{{ bootstrap.load_css() }}
</head>
<body>
...
{{ bootstrap.load_js() }}
</body>

宏

扩展Bootstrap-Flask内置了可以快速渲染Bootstrap样式HTML组件的宏，并提供了内置的Bootstrap资源，方便快速开发，使用它可以简化在Web程序里集使用Bootstrap的过程。

render_field()
Render a form field create by Flask-WTF/WTForms.

{% from 'bootstrap/form.html' import render_field %}

<form method="post">
	 {{ form.csrf_token() }}
	 {{ render_field(form.username) }}
	 {{ render_field(form.password) }}
	 {{ render_field(form.submit) }}
</form>

render_field(field, form_type=“basic”, horizontal_columns=(‘lg’, 2, 10), button_map={})
Render a single form field.

Parameters:
field – The form field (attribute) to render.
form_type – One of basic, inline or horizontal. See the Bootstrap docs for details on different form layouts.
horizontal_columns – When using the horizontal layout, layout forms like this. Must be a 3-tuple of (column-type, left-column-size, right-column-size).
button_map – A dictionary, mapping button field names to Bootstrap category names such as primary, danger or success. Buttons not found in the button_map will use the secondary type of button.

render_form()
Render a form object create by Flask-WTF/WTForms.

{% from 'bootstrap/form.html' import render_form %}

{{ render_form(form) }}

render_form(form, action="", method=“post”, extra_classes=None, role=“form”, form_type=“basic”, horizontal_columns=(‘lg’, 2, 10), enctype=None, button_map={}, id="", novalidate=False, render_kw={})
Outputs Bootstrap-markup for a complete Flask-WTF form.

Parameters:
form – The form to output.
action – The URL to receive form data.
method – method attribute.
extra_classes – The classes to add to the .
role – role attribute.
form_type – One of basic, inline or horizontal. See the Bootstrap docs for details on different form layouts.
horizontal_columns – When using the horizontal layout, layout forms like this. Must be a 3-tuple of (column-type, left-column-size, right-column-size).
enctype – enctype attribute. If None, will automatically be set to multipart/form-data if a FileField is present in the form.
button_map – A dictionary, mapping button field names to names such as primary, danger or success. For example, {‘submit’: ‘success’}. Buttons not found in the button_map will use the default type of button.
id – The id attribute.
novalidate – Flag that decide whether add novalidate class in .
render_kw – A dictionary, specifying custom attributes for the tag.

render_form_row()
Render a row of a grid form

{% from 'bootstrap/form.html' import render_form_row %}

<form method="post">
    {{ form.csrf_token() }}
    {{ render_form_row([form.username, form.password]) }}
    {{ render_form_row([form.remember]) }}
    {{ render_form_row([form.submit]) }}
</form>

render_form_row(fields, row_class=‘form-row’, col_class_default=‘col’, col_map={})
Render a bootstrap row with the given fields

Parameters:
fields – An iterable of fields to render in a row.
row_class – Class to apply to the div intended to represent the row, like form-row or row
col_class_default – The default class to apply to the div that represents a column if nothing more specific is said for the div column of the rendered field.
col_map – A dictionary, mapping field.name to a class definition that should be applied to the div column that contains the field. For example: col_map={‘username’: ‘col-md-2’})

render_pager()
Render a pagination object create by Flask-SQLAlchemy
```
{% from 'bootstrap/pagination.html' import render_pager %}

{{ render_pager(pagination) }}
```
render_pager(pagination, fragment=’’, prev=(‘← Previous’)|safe, next=(‘Next →’)|safe, align=’’, **kwargs)
Renders a simple pager for query pagination.

Parameters:
pagination – Pagination instance.
fragment – Add url fragment into link, such as #comment.
prev – Symbol/text to use for the “previous page” button.
next – Symbol/text to use for the “next page” button.
align – Can be ‘left’, ‘center’ or ‘right’, default to ‘left’.
kwargs – Additional arguments passed to url_for.
render_pagination()
Render a pagination object create by Flask-SQLAlchemy.
```
{% from 'bootstrap/pagination.html' import render_pagination %}

{{ render_pagination(pagination) }}
```
render_pagination(pagination, endpoint=None, prev=’«’, next=’»’, ellipses=’…’, size=None, args={}, fragment=’’, align=’’, **kwargs)¶
Render a standard pagination for query pagination.

Parameters:
pagination – Pagination instance.
endpoint – Which endpoint to call when a page number is clicked. url_for() will be called with the given endpoint and a single parameter, page. If None, uses the requests current endpoint.
prev – Symbol/text to use for the “previous page” button. If None, the button will be hidden.
next – Symbol/text to use for the “next page” button. If None, the button will be hidden.
ellipses – Symbol/text to use to indicate that pages have been skipped. If None, no indicator will be printed.
size – Can be ‘sm’ or ‘lg’ for smaller/larger pagination.
args – Additional arguments passed to url_for(). If endpoint is None, uses args and view_args
fragment – Add url fragment into link, such as #comment.
align – The align of the paginationi. Can be ‘left’, ‘center’ or ‘right’, default to ‘left’.
kwargs – Extra attributes for the element in < ul >.
render_nav_item()
Render a Bootstrap nav item.
```
{% from 'bootstrap/nav.html' import render_nav_item %}

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="navbar-nav mr-auto">
        {{ render_nav_item('index', 'Home') }}
        {{ render_nav_item('explore', 'Explore') }}
        {{ render_nav_item('about', 'About') }}
    </div>
</nav>
```
render_nav_item(endpoint, text, badge=’’, use_li=False, **kwargs)
Render a Bootstrap nav item.

Parameters:
endpoint – The endpoint used to generate URL.
text – The text that will displayed on the item.
badge – Badge text.
use_li – Default to generate , if set to True, it will generate < li >< a>< /a>< /li>.
kwargs – Additional keyword arguments pass to url_for().

render_breadcrumb_item()
Render a Bootstrap breadcrumb item.

{% from 'bootstrap/nav.html' import render_breadcrumb_item %}

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        {{ render_breadcrumb_item('home', 'Home') }}
        {{ render_breadcrumb_item('users', 'Users') }}
        {{ render_breadcrumb_item('posts', 'Posts') }}
        {{ render_breadcrumb_item('comments', 'Comments') }}
    </ol>
</nav>

render_breadcrumb_item(endpoint, text, **kwargs)
Render a Bootstrap breadcrumb item.

Parameters:
endpoint – The endpoint used to generate URL.
text – The text that will displayed on the item.
kwargs – Additional keyword arguments pass to url_for().