To simplify the process of developing Web UI, Bootwrap uses the predefined layout which consists of two elements
Page
and
Menu
.
Note: if your application does not require the top-level menu it can be discarded.
The container could be any element inheriting
WebComponent
class. Typically for hosting other custom interface elements is used
Panel
.
from bootwrap import Page
page = Page(
favicon=..., title=..., resources=..., menu=...,
container=...
)
The menu represents the top-level navigation bar containing anchors and actions allowing to switch between different application
Page
s.
from bootwrap import Menu
menu = Menu(
logo=..., brand=..., anchors=..., actions=...
)
To run Web UI offline, you need to download CSS and JS scripts, store them locally, and instruct Page to load these scripts from a static location.
from bootwrap import Page
# CSS (source URLs):
# - https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css
# - https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css
# - https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css
# JS: (source URLs):
# - https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js
# - https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js
# - https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js
# - https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js
# - https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js
# - https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/json.min.js
# - https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/yaml.min.js
# - https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/bash.min.js
page = Page(
favicon=...,
title=...,
resources=[
Link('/static/css/bootstrap.min.css'),
Link('/static/css/all.min.css'),
Link('/static/css/default.min.css')
Javascript('/static/js/jquery.min.js'),
Javascript('/static/js/popper.min.js'),
Javascript('/static/js/bootstrap.bundle.min.js'),
Javascript('/static/js/highlight.min.js'),
Javascript('/static/js/languages/python.min.js'),
Javascript('/static/js/languages/json.min.js'),
Javascript('/static/js/languages/yaml.min.js'),
Javascript('/static/js/languages/bash.min.js')
],
menu=...,
container=...
)