<template src="template/main.xml" colour="BrBG" code="components" type="Bootstrap" title="Components">
<markdown>
## Glyphicons
Add in a [Glyphicon](http://glyphicons.com/) by using the `<icon>` tag:
</markdown>
<example col>
<mirror>
<icon camera>
<icon camera 2x>
<icon camera 3x>
<icon camera 4x>
<icon camera 5x>
<br><br>
<btn primary>Send email <icon envelope></btn>
<btn danger>Burn email <icon fire></btn>
</mirror>
</example>
<markdown>
## Font Awesome
</markdown>
<example col>
<mirror>
<fa star>
<fa phone>
<fa icon="square 2x,star inverse">
</mirror>
</example>
<markdown>
## Dropdowns
Insert a `<dropdown>` into a unordered list (`<ul>`), Navs (`<tabs>`,`<pills>`), or as a standalone Button or Link. **Always add a `title` attribute, this will be the dropdown link**.
Inside the dropdown put `<a>` links.
You can disable links with the `disabled` attribute.
You can add dropdown headers by placing them in a `<header>` tag, and use single `<divider>` tags to add a separator.
</markdown>
<example col>
<mirror>
<dropdown btn primary title="Button Dropdown">
<header>Header</header>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<divider>
<a href="#" disabled>Disabled Link</a>
</dropdown>
</mirror>
</example>
<markdown>
### Button Dropdowns
You can have a standalone button
</markdown>
<example col>
<mirror>
<dropdown btn primary lg title="Dropdown (large)">
<a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a><a href="#">Link 4</a>
</dropdown>
<dropdown btn split info sm title="Split Dropdown (small)">
<a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a><a href="#">Link 4</a>
</dropdown>
<dropdown a btn success right title="Right-Hand Dropdown">
<a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a><a href="#">Link 4</a>
</dropdown>
<dropdown a btn split up danger title="Dropup">
<a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a><a href="#">Link 4</a>
</dropdown>
<dropdown a title="Link Dropdown">
<a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a><a href="#">Link 4</a>
</dropdown>
</mirror>
</example>
<markdown>
## Button Groups
You can put `<btn>`s into groups using the `<btn-group>` tag.
You can use this to apply attributes, such as the *brand color* or size to all buttons (local attributes will override).
</markdown>
<example>
<mirror>
<btn-group primary>
<btn>Button 1</btn>
<btn>Button 2</btn>
<btn danger>Button 3</btn>
</btn-group>
<btn-group info>
<btn>Another group</btn>
<btn>Another 2</btn>
</btn-group>
</mirror>
</example>
<markdown>
### Toolbar
You can put `<btn-group>`s together into a `<btn-toolbar>`
</markdown>
<example col>
<mirror>
<btn-toolbar sm primary>
<btn-group>
<btn>1</btn><btn>2</btn><btn>3</btn>
</btn-group>
<btn-group info>
<btn>4</btn><btn>5</btn>
</btn-group>
<btn-group success>
<btn>6</btn><btn>7</btn><btn danger>8</btn>
</btn-group>
</btn-toolbar>
</mirror>
</example>
<markdown>
### Vertical
You can make a `<btn-group>` stack vertically using the `vertical` attribute
</markdown>
<example>
<mirror>
<btn-group vertical primary>
<btn>Button 1</btn>
<btn>Button 2</btn>
<dropdown btn title="Dropdown">
<a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a><a href="#">Link 4</a>
</dropdown>
<btn>Button 4</btn>
</btn-group>
</mirror>
</example>
<markdown>
### Justified
Make a `<btn-group>` justified by adding a`justified` attribute.
</markdown>
<example>
<mirror>
<btn-group justified info>
<btn>Button 1</btn>
<btn>Button 2</btn>
<btn>Button 3</btn>
</btn-group>
<btn-group justified success>
<a btn>Button 1</a>
<a btn>Button 2</a>
<a btn>Button 3</a>
</btn-group>
</mirror>
</example>
<markdown>
## Navs
### Tabs
Create tab navigation by using the `<tabs>` tag.
Inside, put `<a>` links for each tab.
You can fully justify the tabs using the `justified` attribute, and stack them vertically using `vertical`
</markdown>
<example>
<mirror>
<tabs justified>
<a href="#">Tab 1</a>
<a href="#">Tab 2</a>
<a href="#">Tab 2</a>
</tabs>
<tabs vertical>
<a href="#"><icon fire>Fire Tab</a>
<a href="#"><icon phone>Phone Tab</a>
<a href="#"><icon cloud>Cloud Tab</a>
</tabs>
</mirror>
</example>
<markdown>
### Pills
You can create a pill-style navigation using the `<pills>` tag in exactly the same way
</markdown>
<example>
<mirror>
<pills>
<a href="#" active>Pill Alpha (active)</a>
<a href="#">Pill Beta</a>
<dropdown title="Pill dropdown">
<a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a>
</dropdown>
</pills>
</mirror>
</example>
<markdown>
## Navbar
A `<navbar>` can be set as fixed with (using the `container` class), or full width, with the `fluid` attribute.
To make the navbar collapse down for smaller screens, add the `collapse` attribute.
There are also shortcut attributes to set `<navbar>` as `fixed-top`, `fixed-bottom`, or `static-top`.
Inside the `<navbar>` you can have a single `<brand>` section (this appearing on the left).
You can also place `<ul>` lists, `<dropdown>`s, `<btn>`s, `<form>`s and `<p>` text.
All of these can be given the attribute `right` to place them on the right side of the `<navbar>`
</markdown>
<example>
<mirror>
<navbar fluid collapse>
<brand><a href="#">Brand</a></brand>
<ul>
<li active><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<dropdown title="Dropdown">
<a href="#">Action</a>
<a href="#">Another action</a>
<a href="#">Something else here</a>
<divider>
<a href="#">Separated link</a>
<divider>
<a href="#">One more separated link</a>
</dropdown>
</ul>
<form role="search">
<input type="text" placeholder="Search">
<submit>Submit</submit>
</form>
<btn primary>Navbar button</btn>
<dropdown right active title="Dropdown">
<a href="#">Action</a>
<a href="#">Another action</a>
<a href="#">Something else here</a>
<divider>
<a href="#">Separated link</a>
<divider>
<a href="#">One more separated link</a>
</dropdown>
</navbar>
</mirror>
</example>
<markdown>
You can also use the inverse navbar colour, using the `inverse` attribute.
</markdown>
<example>
<mirror>
<navbar inverse fluid collapse>
<brand><a href="#">Brand</a></brand>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Text?</a></li>
</ul>
<p right>Text on the right <a href="#">with a link</a></p>
</navbar>
</mirror>
</example>
<markdown>
## Breadcrumbs
Create stylised breadcrumbs by placing `<a>` links inside the `<breadcrumb>` tab.
For the last `<a>` (which may be the current page), you can omit the `href` attribute.
</markdown>
<example col>
<mirror>
<breadcrumb>
<a href="#">OctoML</a>
<a href="#">Bootstrap</a>
<a>Components</a>
</breadcrumb>
</mirror>
</example>
<markdown>
## Pagination
Create Pagers using the `<pager>` tag. Inside place `<a>` tags, you can add `active` or `disabled` attributes to these links.
You can also place `<prev>` and `<next>` tags. These can be given a link location (`href`), and optionally have content (to override the default text).
If there are only `<prev>` and `<next>` tags, but no `<a>`s, the pager will be centrally aligned.
To align the Next and Previous buttons at the left and right, use the `align` attribute
</markdown>
<example>
<mirror>
<pager>
<prev href="hello"></prev>
<a active href="#">1</a>
<a href="#">2</a>
<a disabled href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<next href="next" disabled></next>
</pager>
<pager>
<prev href="hello"></prev>
<next href="next" disabled></next>
</pager>
<pager align>
<prev href="hello">Next Page</prev>
<next href="next" disabled>Previous Page (disabled)</next>
</pager>
</mirror>
</example>
<markdown>
## Labels (Lbl)
Since the `<label>` tag is already taken, to add in labels, use the `<lbl>` tag.
</markdown>
<example>
<mirror>
<h1>Example label <lbl>New</lbl></h1>
<h2>Example label <lbl>New</lbl></h2>
<h3>Example label <lbl>New</lbl></h3>
<h4>Example label <lbl>New</lbl></h4>
<h5>Example label <lbl>New</lbl></h5>
<h6>Example label <lbl>New</lbl></h6>
<lbl>Default</lbl>
<lbl primary>Primary</lbl>
<lbl success>success</lbl>
<lbl info>info</lbl>
<lbl warning>warning</lbl>
<lbl danger>danger</lbl>
</mirror>
</example>
<markdown>
## Badges
</markdown>
<example>
<mirror>
<a href="#">Inbox <badge>42<badge></a>
<br><br>
<btn primary> Messages <badge>4</badge></btn>
<br><br>
<pills>
<a active href="#">Home <badge>42</badge></a>
<a href="#">Profile</a>
<a href="#">Messages <badge>3</badge></a>
</pills>
</mirror>
</example>
<markdown>
## Jumbotron
</markdown>
<example>
<mirror>
<jumbotron>
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a btn primary lg href="#">Learn more</a></p>
</jumbotron>
</mirror>
</example>
<markdown>
Use the `<hero>` tag to center the hero unit in the middle of your `<jumbotron>`.
The hero unit is set using `display:absolute;`, so the `<jumbotron>` will need a fixed height or other content inside, like the image in the example below.
It will also need to have `position:relative;' set
</markdown>
<example>
<mirror>
<jumbotron style="position:relative;">
<hero style="background:rgba(255,255,255,0.6);padding:20px;">
<h1>This is a hero unit</h1>
<h2>Perfectly centered</h2>
<icon 3x leaf>
</hero>
<img src="img/pic9.jpg" style="width:100%;height:auto;">
</jumbotron>
</mirror>
</example>
<markdown>
## Thumbnails
</markdown>
<example>
<mirror>
<thumbnails md="3" sm="2">
<thumb>
<img holder="200">
<h3>Thumbnail Title</h3>
<lorem short>
</thumb>
<thumb>
<img holder="200">
<h3>Thumbnail Title</h3>
<lorem short>
</thumb>
<thumb>
<img holder="200">
<h3>Thumbnail Title</h3>
<lorem short>
</thumb>
<thumb>
<img holder="200">
<h3>Thumbnail Title</h3>
<lorem short>
</thumb>
</thumbnails>
</mirror>
</example>
<markdown>
## Alert
</markdown>
<example>
<mirror>
<alert success close>Well done! You successfully read this important alert message.</alert>
<alert info close>Heads up! <a href="#">This alert</a> needs your attention, but it's not super important.</alert>
<alert warning close>Warning! Better check yourself, you're not looking too good.</alert>
<alert danger close>Oh snap! This is an error, still I have a groovy <a href="#">link</a></alert>
</mirror>
</example>
<markdown>
## Media
Create a media object
</markdown>
<example>
<mirror>
<media-list>
<media>
<img holder="64">
<h3>Default Media (left top)</h3>
<lorem length="50">
</media>
<media>
<img middle holder="64">
<h3>Middle Media</h3>
<lorem length="50">
</media>
<media>
<img bottom holder="64">
<h3>Bottom Media</h3>
<lorem length="50">
</media>
<media>
<img right holder="64">
<h3>Right Media</h3>
<lorem length="50">
</media>
</media-list>
</mirror>
</example>
<markdown>
### Nested lists
</markdown>
<example>
<mirror>
<media-list left>
<media><img holder="64"><lorem length="50"></media>
<media><img holder="64"><lorem length="50">
<media-list>
<media><img holder="64"><lorem length="50"></media>
<media><img holder="64"><lorem length="50">
<media-list>
<media><img holder="64"><lorem length="50"></media>
</media-list>
</media>
<media><img holder="64"><lorem length="50"></media>
</media-list>
</media>
<media><img holder="64"><lorem length="50"></media>
</media-list>
</mirror>
</example>
<markdown>
## List group
</markdown>
<example>
<mirror>
<list>
<a href="#" active lorem="short"><badge>New</badge></a>
<a href="#" lorem="short"><badge>Old</badge></a>
<a href="#" lorem="short"><badge>Antique</badge></a>
<a href="#" disabled lorem="short"><badge>Prehistoric</badge></a>
</list>
</mirror>
</example>
<example>
<mirror>
<list>
<li active><badge>Hi There!</badge>List item 1</li>
<li><badge>New</badge>List item 2</li>
<li disabled>List item 3</li>
<li><badge>Old</badge>List item 4</li>
<li><badge>Antique</badge>List item 5</li>
</list>
</mirror>
</example>
<example>
<mirror>
<list>
<a href="#" active><h4>Hello World</h4><lorem short></a>
<a href="#"><h4>Hello World</h4><lorem short></a>
<a href="#" disabled><h4>Hello World</h4><lorem short></a>
</list>
</mirror>
</example>
<example>
<mirror>
<list>
<li success lorem="short"></li>
<li info lorem="short"></li>
<li warning lorem="short"></li>
<li danger lorem="short"></li>
</list>
<list>
<a href="#" success lorem="short"></a>
<a href="#" info lorem="short"></a>
<a href="#" warning lorem="short"></a>
<a href="#" danger lorem="short"></a>
</list>
</mirror>
</example>
</template>
main.xml:
<bootstrap ajax css="css/docs.css,/css/menu.css" title="%title%">
<google font="Roboto:300;400;700,Quattrocento Sans:400;700">
<import src="../php/menu.php">
<main class="octoml-%code%">
<header id="banner" trianglify="x_colors:%colour%" resize>
<div>
<h1>OctoML / %type%</h1>
<h2>%title%</h2>
</div>
<a id="source-code" class="ajax" href="source/%code%.html">Page Source</a>
</header>
<container fluid>
<row>
<column sm="9">
<article>
%html%
</article>
</column>
<column sm="3">
<pills id="pills" style="width:100%;" affix="220" gap-top="52" target=".octoml-%code%" stacked spy=".octoml-%code%" hide="xs" populate="article > h2"></pills>
</column>
</row>
</container>
<footer class="container">
<a href="https://github.com/sprawld/octoml/"><fa github> Github</a>
</footer>
</main>
<js name="ajax-navigation" src="/js/menu.js" require="jquery"></js>
<js require="jquery">setTimeout(function() {$(window).trigger('load');},250);</js>
</bootstrap>