Module HTML.Styles.Bootstrap4

This library contains some operations to generate web pages rendered with Bootstrap version 4.

Author: Michael Hanus

Version: January 2024

Summary of exported operations:

bootstrapPage :: String -> [String] -> [String] -> String -> (String,[BaseHtml]) -> [[BaseHtml]] -> [[BaseHtml]] -> Int -> [BaseHtml] -> [BaseHtml] -> [BaseHtml] -> [BaseHtml] -> HtmlPage  Deterministic 
An HTML page rendered with bootstrap with a fixed top navigation bar.
bootstrapPage2 :: String -> [String] -> [String] -> String -> (String,[BaseHtml]) -> [(String,[BaseHtml])] -> [(String,[BaseHtml])] -> Int -> [BaseHtml] -> [BaseHtml] -> [BaseHtml] -> [BaseHtml] -> HtmlPage  Deterministic 
An HTML page rendered with bootstrap with a fixed top navigation bar and individual classes for the top menu items.
titledSideMenu :: HTML a => String -> [[a]] -> [a]  Deterministic 
Create a side menu containing a title and a list of items:
primButton :: String -> ((HtmlRef -> String) -> IO HtmlPage) -> HtmlExp  Non-deterministic 
Primary input button.
primSmButton :: String -> ((HtmlRef -> String) -> IO HtmlPage) -> HtmlExp  Non-deterministic 
Small primary input button.
scndButton :: String -> ((HtmlRef -> String) -> IO HtmlPage) -> HtmlExp  Non-deterministic 
Secondary input button.
scndSmButton :: String -> ((HtmlRef -> String) -> IO HtmlPage) -> HtmlExp  Non-deterministic 
Small secondary input button.
infoButton :: String -> ((HtmlRef -> String) -> IO HtmlPage) -> HtmlExp  Non-deterministic 
Info input button.
infoSmButton :: String -> ((HtmlRef -> String) -> IO HtmlPage) -> HtmlExp  Non-deterministic 
Small info input button.
hrefPrimButton :: HTML a => String -> [a] -> a  Deterministic 
Hypertext reference rendered as a primary button.
hrefPrimSmButton :: HTML a => String -> [a] -> a  Deterministic 
Hypertext reference rendered as a small primary button.
hrefScndButton :: HTML a => String -> [a] -> a  Deterministic 
Hypertext reference rendered as a secondary button.
hrefScndSmButton :: HTML a => String -> [a] -> a  Deterministic 
Hypertext reference rendered as a small secondary button.
hrefInfoButton :: HTML a => String -> [a] -> a  Deterministic 
Hypertext reference rendered as an info button.
hrefInfoSmButton :: HTML a => String -> [a] -> a  Deterministic 
Hypertext reference rendered as a small secondary button.
hrefSuccButton :: HTML a => String -> [a] -> a  Deterministic 
Hypertext reference rendered as a success button.
hrefSuccSmButton :: HTML a => String -> [a] -> a  Deterministic 
Hypertext reference rendered as a small success button.
hrefWarnButton :: HTML a => String -> [a] -> a  Deterministic 
Hypertext reference rendered as a warning button.
hrefWarnSmButton :: HTML a => String -> [a] -> a  Deterministic 
Hypertext reference rendered as a small warning button.
hrefDangButton :: HTML a => String -> [a] -> a  Deterministic 
Hypertext reference rendered as a danger button.
hrefDangSmButton :: HTML a => String -> [a] -> a  Deterministic 
Hypertext reference rendered as a small danger button.
hrefLightButton :: HTML a => String -> [a] -> a  Deterministic 
Hypertext reference rendered as a light button.
hrefLightSmButton :: HTML a => String -> [a] -> a  Deterministic 
Hypertext reference rendered as a small light button.
hrefDarkButton :: HTML a => String -> [a] -> a  Deterministic 
Hypertext reference rendered as a dark button.
hrefDarkSmButton :: HTML a => String -> [a] -> a  Deterministic 
Hypertext reference rendered as a small dark button.
hrefPrimBlock :: HTML a => String -> [a] -> a  Deterministic 
hrefScndBlock :: HTML a => String -> [a] -> a  Deterministic 
hrefInfoBlock :: HTML a => String -> [a] -> a  Deterministic 
Hypertext reference rendered as an info block button.
hrefPrimSmBlock :: HTML a => String -> [a] -> a  Deterministic 
hrefScndSmBlock :: HTML a => String -> [a] -> a  Deterministic 
hrefInfoSmBlock :: HTML a => String -> [a] -> a  Deterministic 
hrefPrimBadge :: HTML a => String -> [a] -> a  Deterministic 
Hypertext reference rendered as a primary badge.
hrefScndBadge :: HTML a => String -> [a] -> a  Deterministic 
Hypertext reference rendered as a secondary badge.
hrefSuccBadge :: HTML a => String -> [a] -> a  Deterministic 
Hypertext reference rendered as a success badge.
hrefInfoBadge :: HTML a => String -> [a] -> a  Deterministic 
Hypertext reference rendered as an info badge.
hrefWarnBadge :: HTML a => String -> [a] -> a  Deterministic 
Hypertext reference rendered as a warning badge.
hrefDangBadge :: HTML a => String -> [a] -> a  Deterministic 
Hypertext reference rendered as a danger badge.
hrefLightBadge :: HTML a => String -> [a] -> a  Deterministic 
Hypertext reference rendered as a light badge.
hrefDarkBadge :: HTML a => String -> [a] -> a  Deterministic 
Hypertext reference rendered as a dark badge.
ehrefPrimBadge :: HTML a => String -> [a] -> a  Deterministic 
External hypertext reference rendered as a primary badge.
ehrefScndBadge :: HTML a => String -> [a] -> a  Deterministic 
External hypertext reference rendered as a secondary badge.
ehrefSuccBadge :: HTML a => String -> [a] -> a  Deterministic 
External hypertext reference rendered as a success badge.
ehrefInfoBadge :: HTML a => String -> [a] -> a  Deterministic 
External hypertext reference rendered as an info badge.
ehrefWarnBadge :: HTML a => String -> [a] -> a  Deterministic 
External hypertext reference rendered as a warning badge.
ehrefDangBadge :: HTML a => String -> [a] -> a  Deterministic 
External hypertext reference rendered as a danger badge.
ehrefLightBadge :: HTML a => String -> [a] -> a  Deterministic 
External hypertext reference rendered as a light badge.
ehrefDarkBadge :: HTML a => String -> [a] -> a  Deterministic 
External hypertext reference rendered as a dark badge.
hrefNav :: HTML a => String -> [a] -> a  Deterministic 
Hypertext reference in navigations.
hrefNavActive :: HTML a => String -> [a] -> a  Deterministic 
Active hypertext reference in navigations.
ehrefNav :: HTML a => String -> [a] -> a  Deterministic 
External hypertext reference in navigations.
ehref :: HTML a => String -> [a] -> a  Deterministic 
An external hypertext reference which opens on a new page.
eTarget :: HTML a => a -> a  Deterministic 
Transforms a hypertext reference into an external one which opens on a new page.
kbdInput :: HTML a => [a] -> a  Deterministic 
Render an HTML expression as keyboard or user input.
staticButton :: HTML a => [a] -> a  Deterministic 
stdModal :: HTML a => Bool -> String -> [a] -> [a] -> [a] -> a  Deterministic 
Defining a modal dialog where a modal id, the title, body, and footer HTML expressions are provided.
modalLaunchPrimButton :: HTML a => String -> String -> a  Deterministic 
A primary button to launch a modal dialog where the modal id and the button text are provided.
modalClosePrimButton :: HTML a => String -> a  Deterministic 
A primary button to close a modal dialog to be used inside the modal definition.
scriptShowModal :: String -> [BaseHtml]  Deterministic 
A JavaScript element which can be put at the end of the page body in order to show a modal defined in the page after the page is loaded.

Exported operations:

bootstrapPage :: String -> [String] -> [String] -> String -> (String,[BaseHtml]) -> [[BaseHtml]] -> [[BaseHtml]] -> Int -> [BaseHtml] -> [BaseHtml] -> [BaseHtml] -> [BaseHtml] -> HtmlPage  Deterministic 

An HTML page rendered with bootstrap with a fixed top navigation bar.

Example call:
(bootstrapPage favicon styles jsincludes title brand columns sidemenu header contents footer)
Parameters:
  • favicon : the icon file favicon.ico (when empty not included)
  • styles : the style files to be included (typically, css/bootstrap.min.css)
  • jsincludes : the JavaScript files to be included (typically, .../jquery.js, js/bootstrap.min.js)
  • title : the title of the form
  • brand : the brand shown top left (a URL/title pair)
  • columns : number of columns for the left-side menu (if columns==0, then the left-side menu is omitted)
  • sidemenu : the menu shown at the left-side of the main document (maybe created with titledSideMenu)
  • header : the main header (will be rendered with jumbotron style)
  • contents : the main contents of the document
  • footer : the footer of the document

bootstrapPage2 :: String -> [String] -> [String] -> String -> (String,[BaseHtml]) -> [(String,[BaseHtml])] -> [(String,[BaseHtml])] -> Int -> [BaseHtml] -> [BaseHtml] -> [BaseHtml] -> [BaseHtml] -> HtmlPage  Deterministic 

An HTML page rendered with bootstrap with a fixed top navigation bar and individual classes for the top menu items.

Example call:
(bootstrapPage2 favicon styles jsincludes title brand columns sidemenu header contents footer)
Parameters:
  • favicon : the icon file favicon.ico (when empty not included)
  • styles : the style files to be included (typically, css/bootstrap.min.css)
  • jsincludes : the JavaScript files to be included (typically, .../jquery.js, js/bootstrap.min.js)
  • title : the title of the form
  • brand : the brand shown top left (a URL/title pair)
  • columns : number of columns for the left-side menu (if columns==0, then the left-side menu is omitted)
  • sidemenu : the menu shown at the left-side of the main document (maybe created with titledSideMenu)
  • header : the main header (will be rendered with jumbotron style)
  • contents : the main contents of the document
  • footer : the footer of the document

titledSideMenu :: HTML a => String -> [[a]] -> [a]  Deterministic 

Create a side menu containing a title and a list of items:

primButton :: String -> ((HtmlRef -> String) -> IO HtmlPage) -> HtmlExp  Non-deterministic 

Primary input button.

primSmButton :: String -> ((HtmlRef -> String) -> IO HtmlPage) -> HtmlExp  Non-deterministic 

Small primary input button.

scndButton :: String -> ((HtmlRef -> String) -> IO HtmlPage) -> HtmlExp  Non-deterministic 

Secondary input button.

scndSmButton :: String -> ((HtmlRef -> String) -> IO HtmlPage) -> HtmlExp  Non-deterministic 

Small secondary input button.

infoButton :: String -> ((HtmlRef -> String) -> IO HtmlPage) -> HtmlExp  Non-deterministic 

Info input button.

infoSmButton :: String -> ((HtmlRef -> String) -> IO HtmlPage) -> HtmlExp  Non-deterministic 

Small info input button.

hrefPrimButton :: HTML a => String -> [a] -> a  Deterministic 

Hypertext reference rendered as a primary button.

hrefPrimSmButton :: HTML a => String -> [a] -> a  Deterministic 

Hypertext reference rendered as a small primary button.

hrefScndButton :: HTML a => String -> [a] -> a  Deterministic 

Hypertext reference rendered as a secondary button.

hrefScndSmButton :: HTML a => String -> [a] -> a  Deterministic 

Hypertext reference rendered as a small secondary button.

hrefInfoButton :: HTML a => String -> [a] -> a  Deterministic 

Hypertext reference rendered as an info button.

hrefInfoSmButton :: HTML a => String -> [a] -> a  Deterministic 

Hypertext reference rendered as a small secondary button.

hrefSuccButton :: HTML a => String -> [a] -> a  Deterministic 

Hypertext reference rendered as a success button.

hrefSuccSmButton :: HTML a => String -> [a] -> a  Deterministic 

Hypertext reference rendered as a small success button.

hrefWarnButton :: HTML a => String -> [a] -> a  Deterministic 

Hypertext reference rendered as a warning button.

hrefWarnSmButton :: HTML a => String -> [a] -> a  Deterministic 

Hypertext reference rendered as a small warning button.

hrefDangButton :: HTML a => String -> [a] -> a  Deterministic 

Hypertext reference rendered as a danger button.

hrefDangSmButton :: HTML a => String -> [a] -> a  Deterministic 

Hypertext reference rendered as a small danger button.

hrefLightButton :: HTML a => String -> [a] -> a  Deterministic 

Hypertext reference rendered as a light button.

hrefLightSmButton :: HTML a => String -> [a] -> a  Deterministic 

Hypertext reference rendered as a small light button.

hrefDarkButton :: HTML a => String -> [a] -> a  Deterministic 

Hypertext reference rendered as a dark button.

hrefDarkSmButton :: HTML a => String -> [a] -> a  Deterministic 

Hypertext reference rendered as a small dark button.

hrefPrimBlock :: HTML a => String -> [a] -> a  Deterministic 

hrefScndBlock :: HTML a => String -> [a] -> a  Deterministic 

hrefInfoBlock :: HTML a => String -> [a] -> a  Deterministic 

Hypertext reference rendered as an info block button.

hrefPrimSmBlock :: HTML a => String -> [a] -> a  Deterministic 

hrefScndSmBlock :: HTML a => String -> [a] -> a  Deterministic 

hrefInfoSmBlock :: HTML a => String -> [a] -> a  Deterministic 

hrefPrimBadge :: HTML a => String -> [a] -> a  Deterministic 

Hypertext reference rendered as a primary badge.

hrefScndBadge :: HTML a => String -> [a] -> a  Deterministic 

Hypertext reference rendered as a secondary badge.

hrefSuccBadge :: HTML a => String -> [a] -> a  Deterministic 

Hypertext reference rendered as a success badge.

hrefInfoBadge :: HTML a => String -> [a] -> a  Deterministic 

Hypertext reference rendered as an info badge.

hrefWarnBadge :: HTML a => String -> [a] -> a  Deterministic 

Hypertext reference rendered as a warning badge.

hrefDangBadge :: HTML a => String -> [a] -> a  Deterministic 

Hypertext reference rendered as a danger badge.

hrefLightBadge :: HTML a => String -> [a] -> a  Deterministic 

Hypertext reference rendered as a light badge.

hrefDarkBadge :: HTML a => String -> [a] -> a  Deterministic 

Hypertext reference rendered as a dark badge.

ehrefPrimBadge :: HTML a => String -> [a] -> a  Deterministic 

External hypertext reference rendered as a primary badge.

ehrefScndBadge :: HTML a => String -> [a] -> a  Deterministic 

External hypertext reference rendered as a secondary badge.

ehrefSuccBadge :: HTML a => String -> [a] -> a  Deterministic 

External hypertext reference rendered as a success badge.

ehrefInfoBadge :: HTML a => String -> [a] -> a  Deterministic 

External hypertext reference rendered as an info badge.

ehrefWarnBadge :: HTML a => String -> [a] -> a  Deterministic 

External hypertext reference rendered as a warning badge.

ehrefDangBadge :: HTML a => String -> [a] -> a  Deterministic 

External hypertext reference rendered as a danger badge.

ehrefLightBadge :: HTML a => String -> [a] -> a  Deterministic 

External hypertext reference rendered as a light badge.

ehrefDarkBadge :: HTML a => String -> [a] -> a  Deterministic 

External hypertext reference rendered as a dark badge.

hrefNav :: HTML a => String -> [a] -> a  Deterministic 

Hypertext reference in navigations.

hrefNavActive :: HTML a => String -> [a] -> a  Deterministic 

Active hypertext reference in navigations.

ehrefNav :: HTML a => String -> [a] -> a  Deterministic 

External hypertext reference in navigations.

ehref :: HTML a => String -> [a] -> a  Deterministic 

An external hypertext reference which opens on a new page.

eTarget :: HTML a => a -> a  Deterministic 

Transforms a hypertext reference into an external one which opens on a new page. Basically, the attribute target="_blank" is added.

kbdInput :: HTML a => [a] -> a  Deterministic 

Render an HTML expression as keyboard or user input.

staticButton :: HTML a => [a] -> a  Deterministic 

stdModal :: HTML a => Bool -> String -> [a] -> [a] -> [a] -> a  Deterministic 

Defining a modal dialog where a modal id, the title, body, and footer HTML expressions are provided. If the first argument is True, then the modal dialog will not close when clicking outside it.

modalLaunchPrimButton :: HTML a => String -> String -> a  Deterministic 

A primary button to launch a modal dialog where the modal id and the button text are provided.

modalClosePrimButton :: HTML a => String -> a  Deterministic 

A primary button to close a modal dialog to be used inside the modal definition. The argument is the button text.

scriptShowModal :: String -> [BaseHtml]  Deterministic 

A JavaScript element which can be put at the end of the page body in order to show a modal defined in the page after the page is loaded.