See MarkupMasterIndex for "native" PmWiki markup

See more Bootstrap examples @ http://getbootstrap.com/2.3.2/components.html

If you are aiming to add Bootstrap styles to further customize your skin's template, you should probably be adding the generated HTML.

Hero Unit

A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.


  >>hero-unit<<
! Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
(:button class="btn btn-primary btn-large" text="Learn more" :)
>><<

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information. Learn more

Page Header


  >>page-header<<
! Example page header '-Subtext for header-'
>><<

Examples

A single example shown as it might be displayed across multiple pages. (NOTE: the list-escape-sequence ([==]) is only here to separate the three lists; you do not need it for breadcrumb markup per se.


  * HomePage %apply=list class="breadcrumb"% %apply=item class=active%
[==]

* [[Main/HomePage]] %apply=list class="breadcrumb"% %class=divider%/
* Markup %apply=item class=active%
[==]

* [[Main/HomePage]] %apply=list class="breadcrumb"% %class=divider%/
* [[Bootstrap/Markup]] %class=divider%/
* WikiSandbox %apply=item class=active%

Wells

Use the well as a simple effect on an element to give it an inset effect.


  >>well<<
Look, I'm in a well!
>><<

Look, I'm in a well!

Optional classes

Control padding and rounded corners with two optional modifier classes.


  >>well well-large<<
Look, I'm in a well!
>><<

Look, I'm in a well!


  >>well well-small<<
Look, I'm in a well!
>><<

Look, I'm in a well!

labels

NOTE: labels do not have to be applied to list items.


  * %label% Default
* %label label-success% Success
* %label label-warning% Warning
* %label label-important% Important
* %label label-info% Info
* %label label-inverse% Inverse

Default
Success
Warning
Important
Info
Inverse

badges

NOTE: badges do not have to be applied to list-items.


  * %badge% Default
* %badge badge-success% Success
* %badge badge-warning% Warning
* %badge badge-important% Important
* %badge badge-info% Info
* %badge badge-inverse% Inverse

Default
Success
Warning
Important
Info
Inverse

Base Css

http://getbootstrap.com/2.3.2/base-css.html

Alignment classes

Easily realign text to components with text alignment classes.


  %apply=p text-left%Left aligned text.

%apply=p text-center%Center aligned text.

%apply=p text-right%Right aligned text.

Left aligned text.

Center aligned text.

Right aligned text.

Emphasis Classes

Convey meaning through color with a handful of emphasis utility classes.


  * %muted% Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
* %text-warning% Etiam porta sem malesuada magna mollis euismod.
* %text-error% Donec ullamcorper nulla non metus auctor fringilla.
* %text-info% Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
* %text-success% Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Link buttons

"Normal" link-style with link-level `apply`


  [[https://github.com/MichaelPaulukonis/pmwiki-bootstrap-skin|Github Repo]]%apply=link newwin class="btn btn-primary"% @@git clone git://github.com/MichaelPaulukonis/pmwiki-boostrap-skin.git@@

Github Repo git clone git://github.com/MichaelPaulukonis/pmwiki-boostrap-skin.git

Custom `(:button:)` markup


  (:button link=https://github.com/MichaelPaulukonis/pmwiki-bootstrap-skin text="Github Repo" class="btn btn-primary" newwin=true:) @@git clone git://github.com/MichaelPaulukonis/pmwiki-boostrap-skin.git@@

Github Repo git clone git://github.com/MichaelPaulukonis/pmwiki-boostrap-skin.git


  (:button link=http://www.google.com text="go to google!" class="btn btn-primary" newwin=false:)

(:button link=http://www.google.com text="go to google!" class="btn btn-primary" newwin=true:)

go to google!


  (:button link=http://www.google.com text="go to google!" class="btn btn-primary" :)
(:button link=http://www.google.com text="go to google!" class="btn" :)
(:button link=http://www.google.com text="go to google!" class="btn btn-info" :)
(:button link=http://www.google.com text="go to google!" class="btn btn-success" :)
(:button link=http://www.google.com text="go to google!" class="btn btn-warning" :)
(:button link=http://www.google.com text="go to google!" class="btn btn-danger" :)
(:button link=http://www.google.com text="go to google!" class="btn btn-inverse" :)
(:button link=http://www.google.com text="go to google!" class="btn btn-large" :)
(:button link=http://www.google.com text="go to google!" class="btn btn-small" :)
(:button link=http://www.google.com text="go to google!" class="btn btn-mini" :)
(:button link=http://www.google.com text="go to google!" class="btn btn-disabled" :)

(:div:)
(:button link=http://www.google.com text="go to google!" class="btn btn-large btn-block btn-primary" :)
(:divend:)

go to google! go to google! go to google! go to google! go to google! go to google! go to google! go to google! go to google! go to google! go to google!

go to google!

Icon glyphs

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

`(:icon icon-glass:)`	`(:icon icon-music:)`	`(:icon icon-search:)`
`(:icon icon-envelope:)`	`(:icon icon-heart:)`	`(:icon icon-star:)`
`(:icon icon-star-empty:)`	`(:icon icon-user:)`	`(:icon icon-film:)`
`(:icon icon-th-large:)`	`(:icon icon-th:)`	`(:icon icon-th-list:)`
`(:icon icon-ok:)`	`(:icon icon-remove:)`	`(:icon icon-zoom-in:)`
`(:icon icon-zoom-out:)`	`(:icon icon-off:)`	`(:icon icon-signal:)`
`(:icon icon-cog:)`	`(:icon icon-trash:)`	`(:icon icon-home:)`
`(:icon icon-file:)`	`(:icon icon-time:)`	`(:icon icon-road:)`
`(:icon icon-download-alt:)`	`(:icon icon-download:)`	`(:icon icon-upload:)`
`(:icon icon-inbox:)`	`(:icon icon-play-circle:)`	`(:icon icon-repeat:)`
`(:icon icon-refresh:)`	`(:icon icon-list-alt:)`	`(:icon icon-lock:)`
`(:icon icon-flag:)`	`(:icon icon-headphones:)`	`(:icon icon-volume-off:)`
`(:icon icon-volume-down:)`	`(:icon icon-volume-up:)`	`(:icon icon-qrcode:)`
`(:icon icon-barcode:)`	`(:icon icon-tag:)`	`(:icon icon-tags:)`
`(:icon icon-book:)`	`(:icon icon-bookmark:)`	`(:icon icon-print:)`
`(:icon icon-camera:)`	`(:icon icon-font:)`	`(:icon icon-bold:)`
`(:icon icon-italic:)`	`(:icon icon-text-height:)`	`(:icon icon-text-width:)`
`(:icon icon-align-left:)`	`(:icon icon-align-center:)`	`(:icon icon-align-right:)`
`(:icon icon-align-justify:)`	`(:icon icon-list:)`	`(:icon icon-indent-left:)`
`(:icon icon-indent-right:)`	`(:icon icon-facetime-video:)`	`(:icon icon-picture:)`
`(:icon icon-pencil:)`	`(:icon icon-map-marker:)`	`(:icon icon-adjust:)`
`(:icon icon-tint:)`	`(:icon icon-edit:)`	`(:icon icon-share:)`
`(:icon icon-check:)`	`(:icon icon-move:)`	`(:icon icon-step-backward:)`
`(:icon icon-fast-backward:)`	`(:icon icon-backward:)`	`(:icon icon-play:)`
`(:icon icon-pause:)`	`(:icon icon-stop:)`	`(:icon icon-forward:)`
`(:icon icon-fast-forward:)`	`(:icon icon-step-forward:)`	`(:icon icon-eject:)`
`(:icon icon-chevron-left:)`	`(:icon icon-chevron-right:)`	`(:icon icon-plus-sign:)`
`(:icon icon-minus-sign:)`	`(:icon icon-remove-sign:)`	`(:icon icon-ok-sign:)`
`(:icon icon-question-sign:)`	`(:icon icon-info-sign:)`	`(:icon icon-screenshot:)`
`(:icon icon-remove-circle:)`	`(:icon icon-ok-circle:)`	`(:icon icon-ban-circle:)`
`(:icon icon-arrow-left:)`	`(:icon icon-arrow-right:)`	`(:icon icon-arrow-up:)`
`(:icon icon-arrow-down:)`	`(:icon icon-share-alt:)`	`(:icon icon-resize-full:)`
`(:icon icon-resize-small:)`	`(:icon icon-plus:)`	`(:icon icon-minus:)`
`(:icon icon-asterisk:)`	`(:icon icon-exclamation-sign:)`	`(:icon icon-gift:)`
`(:icon icon-leaf:)`	`(:icon icon-fire:)`	`(:icon icon-eye-open:)`
`(:icon icon-eye-close:)`	`(:icon icon-warning-sign:)`	`(:icon icon-plane:)`
`(:icon icon-calendar:)`	`(:icon icon-random:)`	`(:icon icon-comment:)`
`(:icon icon-magnet:)`	`(:icon icon-chevron-up:)`	`(:icon icon-chevron-down:)`
`(:icon icon-retweet:)`	`(:icon icon-shopping-cart:)`	`(:icon icon-folder-close:)`
`(:icon icon-folder-open:)`	`(:icon icon-resize-vertical:)`	`(:icon icon-resize-horizontal:)`
`(:icon icon-hdd:)`	`(:icon icon-bullhorn:)`	`(:icon icon-bell:)`
`(:icon icon-certificate:)`	`(:icon icon-thumbs-up:)`	`(:icon icon-thumbs-down:)`
`(:icon icon-hand-right:)`	`(:icon icon-hand-left:)`	`(:icon icon-hand-up:)`
`(:icon icon-hand-down:)`	`(:icon icon-circle-arrow-right:)`	`(:icon icon-circle-arrow-left:)`
`(:icon icon-circle-arrow-up:)`	`(:icon icon-circle-arrow-down:)`	`(:icon icon-globe:)`
`(:icon icon-wrench:)`	`(:icon icon-tasks:)`	`(:icon icon-filter:)`
`(:icon icon-briefcase:)`	`(:icon icon-fullscreen:)`

Markup {Bootstrap}

Skin markup

Typographic components

Hero Unit

Hello, world!

Page Header

Example page header Subtext for header

Breadcrumbs

Examples

Miscellaneous Lightweight utility components

Wells

Optional classes

labels

badges

Base Css

Alignment classes

Emphasis Classes

Link buttons

"Normal" link-style with link-level `apply`

Custom `(:button:)` markup

Icon glyphs

Markup {Bootstrap}

Skin markup

Typographic components

Hero Unit

Hello, world!

Page Header

Example page header Subtext for header

Breadcrumbs

Examples

Miscellaneous Lightweight utility components

Wells

Optional classes

labels

badges

Base Css

Alignment classes

Emphasis Classes

Link buttons

"Normal" link-style with link-level apply

Custom (:button:) markup

Icon glyphs

"Normal" link-style with link-level `apply`

Custom `(:button:)` markup