Documentation Template

Section with text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.

Section with image and text

Screenshot: image-1355x900px.jpg

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

Section with several images

Screenshot: image-1355x900px.jpg

H3 Heading

Text elements

Headings (H1..H6)

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Paragraph

Lists (ul, ol)

Unordered list (ul.doc-list)

Lorem ipsum dolor sit amet
Aenean leo ligula, porttitor eu
Nullam quis ante. Etiam sit
Duis arcu tortor, suscipit
Phasellus leo dolor, tempus
Vestibulum fringilla pede sit
Pellentesque ut neque

Ordered list (ol.doc-list)

Lorem ipsum dolor sit amet
Aenean leo ligula, porttitor eu
Nullam quis ante. Etiam sit
Duis arcu tortor, suscipit
Phasellus leo dolor, tempus
Vestibulum fringilla pede sit
Pellentesque ut neque

Mixed list (ol.doc-list > ul > ol)

Ordered item
Ordered item
- Unordered item
- Unordered item
  1. Ordered item
  2. Ordered item
Ordered item
Ordered item

Mixed list (ul.doc-list > ol > ul)

Unordered item
Unordered item
1. Ordered item
2. Ordered item
  - Unordered item
  - Unordered item
Unordered item
Unordered item

List group

Basic example

* Source link:https://getbootstrap.com/docs/3.4/components/#list-group

Lorem ipsum dolor sit amet, consectetuer adipiscing
Aenean leo ligula, porttitor eu, consequat vitae
Nullam quis ante. Etiam sit amet orci eget eros
Duis arcu tortor, suscipit eget, imperdiet nec
Phasellus leo dolor, tempus non, auctor et, hendrerit

Contextual classes

* Source link:https://getbootstrap.com/docs/3.4/components/#list-group-contextual-classes

Lorem ipsum dolor sit amet, consectetuer adipiscing
Aenean leo ligula, porttitor eu, consequat vitae
Nullam quis ante. Etiam sit amet orci eget eros
Phasellus leo dolor, tempus non, auctor et, hendrerit

Responsive tables

* Source link:https://getbootstrap.com/docs/3.4/css/#tables

Style №1

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Style №2

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Alerts and notifications

* Source link:https://getbootstrap.com/docs/3.4/components/#alerts

Progress bars

* Source link:https://getbootstrap.com/docs/3.4/components/#progress

Default progress bar

With label

60%

More examples

Panel with heading

* Source link:https://getbootstrap.com/docs/3.4/components/#panels

Panel title

Panel content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

HTML tag: <pre>

/* body */
body {
	position: relative;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	font-weight: normal;
	line-height: 1.2;
	color: #4d5155;
}

Code highlighting (Prism)

Prism is used in this documentation to highlight code. Link: https://prismjs.com/. How to use: https://prismjs.com/index.html#basic-usage.

Theme: Default;
Supported languages: Markup + HTML + XML + SVG + MathML + SSML + Atom + RSS, CSS, C-like, JavaScript, .ignore + .gitignore + .hgignore + .npmignore, JSON + Web App Manifest, Markdown, Markup templating, PHP, SQL (This is the list of selected languages on the PrismJS download page);
Plugins: Line Highlight, Line Numbers, Toolbar, Copy to Clipboard Button (This is the list of selected plugins on the PrismJS download page).

If you need more supported languages, or you want to use some other theme, then you can always add the language you need and change the theme on the Prism download page, and after downloading, replace the Prism files (/assets/css/prism.css and /assets/js/prism.js) in this documentation with yours.

Language: HTML (with line numbering)

<!doctype html>
<html lang="en">
<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

	<!-- Author and icon -->
	<meta name="author" content="Alexey Trofimov">
	<link rel="icon" href="assets/img/favicon.png">

	<!-- Document title -->
	<title>Documentation Template</title>

	<!-- Google font: Open Sans ( link: https://fonts.google.com/specimen/Open+Sans ) -->
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i&display=swap" rel="stylesheet">

	<!-- CSS files -->
	<link href="assets/css/bootstrap.min.css" rel="stylesheet">
	<link href="assets/css/bootstrap-theme.min.css" rel="stylesheet">
	<link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
	<link href="assets/css/font-awesome.min.css" rel="stylesheet">
	<link href="assets/plugins/prettyPhoto/css/prettyPhoto.css" rel="stylesheet">
	<link href="assets/css/prism.css" rel="stylesheet">
	<link href="assets/css/documentation.css" rel="stylesheet">

	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<script src="assets/js/html5shiv.min.js"></script>
		<script src="assets/js/respond.min.js"></script>
	<![endif]-->
</head>
<body>
	<!-- header -->
	<header id="docs-header">
		<div class="container">
			...
			...
		</div>
	</header>
	<!-- end: header -->
	...
	...
	<!-- footer -->
	<footer id="docs-footer" role="contentinfo">
		<div class="container">
			<div class="docs-footer-container">
				<p>Footer text</p>
			</div>
		</div>
	</footer>
	<!-- end: footer -->

	<!-- JS files
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="assets/js/jquery.min.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/ie10-viewport-bug-workaround.js"></script>
	<script src="assets/plugins/prettyPhoto/js/jquery.prettyPhoto.js"></script>
	<script src="assets/js/prism.js"></script>
	<script src="assets/js/documentation.js"></script>
</body>
</html>

Language: CSS (no line numbering)

/**
 * 2.0 Top navigation (Header)
 * -------------------------------------------------------------
 */

#docs-header {
	background-color: #428bca;
	min-height: 40px;
	box-shadow: inset 0 -2px 5px rgba(0,0,0,0.1);
}
.docs-header-container {
	text-align: center;
}

/* top nav */
.docs-header-navigation {
	margin: 0;
	padding: 0;
}
.docs-header-navigation li {
	display: inline-block;
}
.docs-header-navigation li a {
	display: inline-block;
	line-height: 40px;
	padding: 0 15px;
	font-size: 13px;
	font-weight: 400;
	color: #cdddeb;
	text-decoration: none;
}
.docs-header-navigation li a:hover {
	color: #ffffff;
}
.docs-header-navigation li.first-social-link {
	margin-left: 30px;
}
.docs-header-navigation li.social-link a {
	font-size: 14px;
	padding: 0 10px;
}

/* template name */
.docs-header-navigation li.template-name {
	margin-right: 25px;
}
.docs-header-navigation li.template-name a {
	font-size: 14px;
	font-weight: 600;
	color: #ffffff;
}

Language: JavaScript (with line numbering)

/**
 * documentation.js
 */

( function( $ ) {
	'use strict';
	$( document ).ready( function() {

		/**
		 * Scrollspy
		 * -------------------------------------------------------------
		 */

		$( 'body' ).scrollspy( {
			target: '#sidebar-scrollspy-nav',
			offset: 55,
		} );


		/**
		 * Affix
		 * -------------------------------------------------------------
		 */

		$( '#sidebar-nav' ).affix( {
			offset: {
				top: function() {
					return ( this.top = $( '#docs-header' ).outerHeight( true ) + $( '#docs-heading-section' ).outerHeight( true ) );
				},
				bottom: function() {
					return ( this.bottom = $( '#docs-footer' ).outerHeight( true ) );
				},
			}
		} );


		/**
		 * prettyPhoto lightbox
		 * -------------------------------------------------------------
		 */

		$( "a[rel^='prettyPhoto']" ).prettyPhoto( {
			autoplay_slideshow: false,
			opacity: 0.5,
			show_title: false,
			allow_resize: true,
			theme: 'pp_default',
			deeplinking: false,
			social_tools: false,
		} );

	} );
} )( jQuery );

Credits

jQuery (v1.12.4) - jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
Bootstrap (v3.4.1) - Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Font Awesome (v4.7.0) - Get vector icons and social logos on your website with the web's most popular icon set and toolkit.
prettyPhoto (v3.1.6) - prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It's a full blown media lightbox.
PrismJS (v1.29.0) - Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.
html5shiv.js (v3.7.3) from Alexander Farkas - The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.
Respond.js (v1.4.2) from Scott Jehl - A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more).
Google Fonts - Open Sans.

As I wrote at the beginning, feel free to use this template in your projects. And thank you very much for your interest and your attention! I wish you good luck in your new projects ;)

Template Name - Documentation

Section with text

Section with image and text

Popup image (prettyPhoto)

Section with several images

H3 Heading

Text elements

Headings (H1..H6)

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Paragraph

Lists (ul, ol)

Unordered list (ul.doc-list)

Ordered list (ol.doc-list)

Mixed list (ol.doc-list > ul > ol)

Mixed list (ul.doc-list > ol > ul)

List group

Basic example

Contextual classes

Responsive tables

Style №1

Style №2

Alerts and notifications

Progress bars

Default progress bar

With label

More examples

Panel with heading

Panel title

HTML tag: <pre>

Code highlighting (Prism)

Language: HTML (with line numbering)

Language: CSS (no line numbering)

Language: JavaScript (with line numbering)

Credits