1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
|
Advanced Usage
===============
.. _button_customization:
Form Button Customization
-------------------------
Button Style
~~~~~~~~~~~~
When you use form related macros, you have a couple ways to style buttons. Before we start to dive into the solutions, let's
review some Bootstrap basics: In Bootstrap 4, you have 9 normal button style and 8 outline button style, so you have 17 button
style classes below:
- btn-primary
- btn-secondary
- btn-success
- btn-danger
- btn-warning
- btn-info
- btn-light
- btn-dark
- btn-link
- btn-outline-primary
- btn-outline-secondary
- btn-outline-success
- btn-outline-danger
- btn-outline-warning
- btn-outline-info
- btn-outline-light
- btn-outline-dark
Remove the ``btn-`` prefix, you will get what we (actually, I) called "Bootstrap button style name":
- primary
- secondary
- success
- danger
- warning
- info
- light
- dark
- link
- outline-primary
- outline-secondary
- outline-success
- outline-danger
- outline-warning
- outline-info
- outline-light
- outline-dark
You will use these names in Bootstrap-Flask. First, you configuration variables ``BOOTSTRAP_BTN_STYLE`` to set a global form button style:
.. code-block:: python
from flask import Flask
from flask_bootstrap import Bootstrap
app = Flask(__name__)
bootstrap = Bootstrap(app)
app.config['BOOTSTRAP_BTN_STYLE'] = 'primary' # default to 'secondary'
Or you can use ``button_style`` parameter when using ``render_form``, ``render_field`` and ``render_form_row``, this parameter will overwrite
``BOOTSTRAP_BTN_STYLE``:
.. code-block:: jinja
{% from 'bootstrap4/form.html' import render_form %}
{{ render_form(form, button_style='success') }}
Similarly, you can use this way to control the button size. In Bootstrap 4, buttons can have 4 sizes:
- btn-sm
- btn-md (the default size)
- btn-lg
- btn-block
So, the size names used in Bootstrap-Flask will be:
- sm
- md (the default size)
- lg
- block
Now you can use a configuration variable called ``BOOTSTRAP_BTN_STYLE`` to set global form button size:
.. code-block:: python
from flask import Flask
from flask_bootstrap import Bootstrap4
app = Flask(__name__)
bootstrap = Bootstrap4(app)
app.config['BOOTSTRAP_BTN_SIZE'] = 'sm' # default to 'md'
there also a parameter called ``button_size`` in form related macros (it will overwrite ``BOOTSTRAP_BTN_SIZE``):
.. code-block:: jinja
{% from 'bootstrap4/form.html' import render_form %}
{{ render_form(form, button_size='lg') }}
if you need a **block level small** button (``btn btn-sm btn-block``), you can just do something hacky like this:
.. code-block:: python
app.config['BOOTSTRAP_BTN_SIZE'] = 'sm btn-block'
What if I have three buttons in one form, and I want they have different styles and sizes? The answer is ``button_map`` parameter in form related macros.
``button_map`` is a dictionary that mapping button field name to Bootstrap button style names. For example, ``{'submit': 'success'}``.
Here is a more complicate example:
.. code-block:: jinja
{% from 'bootstrap4/form.html' import render_form %}
{{ render_form(form, button_map={'submit': 'success', 'cancel': 'secondary', 'delete': 'danger'}) }}
It will overwrite ``button_style`` and ``BOOTSTRAP_BTN_STYLE``.
.. _checkbox_customization:
Form Checkbox Customization
---------------------------
Rendering Switch
~~~~~~~~~~~~~~~~
Bootstrap offers the rendering of a checkbox (or check) as a
`switch <https://getbootstrap.com/docs/5.1/forms/checks-radios/#switches>`_. In
Bootstrap-Flask, simply use the built-in class ``SwitchField()`` instead of
``BooleanField()``. See also the example application.
.. _bootswatch_theme:
Bootswatch Themes
-----------------
`Bootswatch <https://bootswatch.com>`_ is a collection of free and open source themes for Bootstrap. If you are using ``bootstrap.load_css()`` to include
Bootstrap resources. Then you can set Bootswatch theme with configuration variable ``BOOTSTRAP_BOOTSWATCH_THEME``.
The available theme names are: 'cerulean', 'cosmo', 'cyborg', 'darkly', 'flatly', 'journal', 'litera',
'lumen', 'lux', 'materia', 'minty', 'pulse', 'sandstone', 'simplex', 'sketchy', 'slate',
'solar', 'spacelab', 'superhero', 'united', 'yeti'.
For Bootstrap 5, besides these, you can also use: 'morph', 'quartz', 'vapor', 'zephyr'.
Here is an example to use ``lumen`` theme:
.. code-block:: python
app.config['BOOTSTRAP_BOOTSWATCH_THEME'] = 'lumen'
You can find these themes on `https://bootswatch.com <https://bootswatch.com>`_.
|
