Recent Changes -

Markup {Bootstrap}

See MarkupMasterIndex for "native" PmWiki 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. 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%
  • HomePage

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

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!

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!

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