Skip to content
develop
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
css
 
 
 
 
 
 
 
 
xsl
 
 
 
 
 
 
 
 
 
 

DITA Bootstrap

A plug-in for DITA Open Toolkit that extends the default HTML5 output with a basic Bootstrap template.

Sample DITA Bootstrap output

Installing

Use the dita command to add this plug-in to your DITA Open Toolkit installation:

DITA-OT 3.5 and newer:

dita install fox.jason.extend.css
dita install net.infotexture.dita-bootstrap

DITA-OT 3.3 and newer:

dita --install fox.jason.extend.css
dita --install net.infotexture.dita-bootstrap

DITA-OT 3.2 and older:

dita --install \
    https://github.com/jason-fox/fox.jason.extend.css/archive/master.zip
dita --install \
    https://github.com/infotexture/dita-bootstrap/archive/master.zip

Using

Specify the html5-bootstrap format when building output with the dita command:

dita --input=path/to/your.ditamap \
     --format=html5-bootstrap

Customizing

Header menu

The plug-in includes a default static navbar with a project name and global links. To override the global navigation with a header of your own, pass a custom header file to the dita command via the --args.hdr parameter:

dita --input=path/to/your.ditamap \
     --format=html5-bootstrap \
     --args.hdr=path/to/your-header.xml

The plug-in includes a sample header alternative with a dark navbar.

Edit a copy of this file to adjust the content of the global navigation.

Sidebar menu

The plug-in extends the standard --nav-toc parameter to add styled list groups for the sidebar. Five styles now are supported:

  • full - Unstyled full TOC - same as HTML5 Plugin (default)
  • partial - Unstyled partial TOC that shows the current topic - same as HTML5 Plugin
  • list-group-full - Styled full TOC within a Bootstrap List Group
  • list-group-partial - Styled partial TOC that shows the current topic within a Bootstrap List Group
  • none - no TOC
dita --input=path/to/your.ditamap \
     --format=html5-bootstrap \
     --nav-toc=list-group-partial

Custom CSS

Bootstrap themes can be generated using the Themestr.app. The plug-in includes a sample placeholder for custom CSS styles. You can edit this file to add style rules of your own. Override the default Bootstrap theme by passing a custom CSS file to the dita command via the --args.css parameter:

dita --input=path/to/your.ditamap --format=html5-bootstrap \
     --args.hdr=path/to/your-header.xml \
     --args.css=<name-of-css>.css \
     --args.copycss=yes \
     --args.csspath=css \
     --args.cssroot=path/to/your/theme

Sample DITA Bootstrap output

For more extensive customizations, you may want to fork this repository and create a new plug-in of your own.

You can add your own XSLT customizations by creating a new plug-in that extends the DITA Bootstrap XSLT transforms. Just amend args.xsl to point to your own XSLT files. An XSLT template is included within this repository.

Feedback

  • If you find this useful and build something of your own on top of it, let me know.

  • If you find a bug or would like to suggest a change, create an issue.
    (If it's a bug, provide steps to recreate the issue.)

  • If you know how to fix it yourself, submit a pull request with the proposed changes.

License

Apache 2.0 © 2017 - 2021 Roger W. Fienhold Sheen

Within the sample documentation, where necessary, the texts describing the usage of each component have been copied directly from the official Bootstrap 5.0 documentation, however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass.