Pure Bootstrap Docs is a Single Page Website Template for Structured Online User Manual Documentation. It uses the default characteristics of the Bootstrap itself, so the name is 'Pure Bootstrap'. Especially, about 0.25, 0.5, 1, 1.5 and 3 rem size unit rule, it strictly follows the Bootstrap's way, but if you don't know what the size unit rule means, you may ignore. It targets to achieve the universal and conventional design, which accentuates the content, without any visual distraction, to all people, regardless of ages, genders or other factors.
It provides simple JS functions which can change the theme & color of your website.
The functions are located in /index_init.js file.
If you have basic JS knowlege, you can add more color sets by adding JSON variables in k6_color() funtion.
function k6_theme( mode = '' ) { ... } // E.g., k6_theme( 'dark' )
function k6_color( mode = '' ) {
let C = { your_color_set: { 'bs-primary': 'RRGGBB', ... }, ... }
...
} // E.g., k6_color( 'your_color_set' )As Bootstrap is fully responsive, it is fully responsive as well. Also, it uses Bootstrap's own Navbar and Offcanvas, so you have a few expreinces of Bootstrap, you will feel easy to understand and customize the code structure.
The navigation parts such as [1] primary heder, [2] secondary header, [3] left aside, [4] right aside and [5] footer are editable by JSON variable in /index_data.js file.
var k6_head_menu = [ { text: 'Home' , href : '#' , onclick: `alert( 'This is an onclick event example.' )`, },
{ text: 'Docs' , href : '/' , },
{ text: 'Blog' , href : 'https://blog.kla6.net' , target : '_blank' , },
{ text: 'Dropdown', children: [ { text : 'You Can Make' , href : '#', },
{ text : 'a Dropdown Menu', href : '#', },
{ text : null , },
{ text : 'by JSON Editing', href : '#', }, ], } ]
The page content index on the right aside will be automatically generated according to the article content, by parsing <h1> ~ <h6> tags with a JS function.
Also, it generate mouse hover hash links on each head tags as well.
The code is divided to 8 PHP files by `include` functions to understand and use easily for your own purpose.
<header id="k6-head" ><?php include 'index_head.php' ; ?></header>
<div id="k6-neck" ><?php include 'index_neck.php' ; ?></div>
<div id="k6-middle">
<aside id="k6-left" ><?php include 'index_left.php' ; ?></aside>
<div id="k6-center">
<main id="k6-body" ><?php include 'index_body.php' ; ?></main>
<footer id="k6-foot" ><?php include 'index_foot.php' ; ?></footer>
</div>
<aside id="k6-right" ><?php include 'index_right.php'; ?></aside>
</div>
As more and more mobile users increase, it provides full screen search modal for a better search sight. At the same time, it conisdered PC users as well by caring the Tab key pressing navigation situation. You may test it by pressing Tab key continuosly near the search box to understand what this means.