Recent Changes -

Bootstrap > Markup

See MarkupMasterIndex for "native" Pm Wiki markup

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

Skin markup

(:noleft:) - supress leftbar (:bootstrap-center-main:) - supress leftbar and center content

TODO: dropdown markup

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

Typographic components

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. ⚠ (:button class="btn btn-primary btn-large" text="Learn more" :)

Page Header

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

Example page header Subtext for header

Breadcrumbs

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%

Miscellaneous Lightweight utility components

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

⚠ (:icon icon-align-center:) 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.

⚠ (:icon icon-bullhorn:) 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/Michael Paulukonis?/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@@

⚠ (:button link=https://github.com/MichaelPaulukonis/pmwiki-bootstrap-skin text="Github Repo" class="btn btn-primary" newwin=true:) git clone git://github.com/Michael Paulukonis?/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:)

⚠ (: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:) 

(: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:)

⚠ (: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" :)

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

⚠ (:icon icon-info-sign:) Icon glyphs

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

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