The Bootstrap framework for creating web pages with modern design and functionality can be used in many different ways. This note shows the default setup for using Bootstrap styles with HTML documents generated from DocOnce source code. DocOnce supports many variants of Bootstrap themes. Most of them are demonstrated below.
The Bootstrap styles in DocOnce offer the following special features:
alert, with a colored background, often with the famous admonition colors from the original Bootstrap themepanel, with a colored heading but otherwise white background for the content.A plain Bootstrap style is generated by
doconce format html bootstrap_demo --html_style=bootstrap
--pygments_html_style=default --html_admon=bootstrap_panel
doconce split_html bootstrap_demo --pagination --nav_button=bottom
If you do not like the special red font used for inline verbatim
(monospace) text, use the option --html_code_style=inherit to
force the background and foreground colors to inherit from the
colors used in the document.
Placement of navigation buttons.
Navigation buttons or a page indicator can be
placed at the bottom of the page (default), the top, or both at the
top and bottom using --nav_button=bottom, --nav_button=top, or
--nav_buttom=top+bottom, respectively as option to doconce split_html.
By default, navigation buttons with Prev and Next are used, but
the --pagination option replaces buttons with a horizontal array of page
numbers.
Some color variations of the basic Bootstrap theme are bundled with DocOnce:
--html_style=bootstrap_bootflat --html_admon=bootstrap_panel --html_code_style=inherit)--html_style=bootstrap_FlatUI --html_admon=bootstrap_panel --html_code_style=inherit)--html_style=bootstrap_blue --html_admon=bootstrap_panel --html_code_style=inherit)--html_style=bootstrap_bluegray --html_admon=bootstrap_panel --html_code_style=inherit)--html_style=bootstrap_brown --html_admon=bootstrap_panel --html_code_style=inherit)--html_style=bootstrap_red --html_admon=bootstrap_panel --html_code_style=inherit)--html_style=bootstrap_bloodish --html_admon=bootstrap_panel --html_code_style=inherit)--html_style=bootstrap_cbc --html_admon=bootstrap_panel --html_code_style=inherit)--html_style=bootstrap_simula --html_admon=bootstrap_panel --html_code_style=inherit)http://bootswatch.com offers a series of free Bootstrap styles with different designs. Typical generation of styles with white background goes like
doconce format html bootstrap_demo --html_style=bootswatch_simplex
--pygments_html_style=default --html_admon=bootstrap_panel
-html_pre_style=inherit
This gives admonitions with panel style. With the alert style we
normally like to have computer code with the same background as
the alert and consequently add the option -html_pre_style=inherit:
doconce format html bootstrap_demo --html_style=bootswatch_simplex
--pygments_html_style=default --html_admon=bootstrap_alert
-html_code_style=inherit -html_pre_style=inherit
For dark styles we use --html_pre_style=inherit --keep_pygments_html_bg
as options to avoid any white background. We also use a dark pygments
style for computer code blocks: --pygments_html_style=monokai.
doconce format html bootstrap_demo --html_style=bootswatch_slate
--pygments_html_style=monokai --html_admon=bootstrap_panel
--html_output=cyborg --keep_pygments_html_bg
--html_code_style=inherit --html_pre_style=inherit
Some of the Boostrap/Bootswatch styles come with quite small fonts,
which make the text very dense. Use the command-line option
"--html_body_style=font-size:20px;line-height:1.5" to override the
font size and the line height (the chosen values are suitable for
bootswatch_journal).
Admons with panel style:
"--html_body_style=font-size:20px;line-height:1.5")Admons as alerts (colored background):
The styles above are generated by DocOnce at compile time. There is also
a possibility to specify an HTML template file where the core DocOnce
text are embedded. In this way, one has complete control of the header and
footer parts of the document, and in particular layouts based on having
the core text inside nested <div> tags.
DocOnce comes with two Bootstrap-based templates:
--html_style=bootstrap --html_template=template_vagrant.html --html_toc_indent=0)--html_style=bootstrap --html_template=template_bootstrap_wtoc.html)