Demonstration of Bootstrap styles for DocOnce documents

Jun 14, 2016


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 basic Bootstrap style

Special features

The Bootstrap styles in DocOnce offer the following special features:

The basic style

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.

Color variations of the original Bootstrap theme

Some color variations of the basic Bootstrap theme are bundled with DocOnce:

Bootswatch styles

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

Tip: Some Bootswatch styles benefit from larger font! 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:

Admons as alerts (colored background):

Special templates based on Bootstrap themes

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: