Layout

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.

Page

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=...
)

Menu

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=...
)

Launch Offline

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=...
)