Help: Bootstrap 3

DCCWiki uses the Tweeki skin, when utilizes Bootstrap 3.3 In plain English, this means that there are advanced web page layouts readily available to any page. Below are specific examples as it applies to this website. For additional features and uses, please see theBootstrap Documentation. Please note that not all features may be compatible with the wiki as some markup has been deemed too dangerous to use within the wiki.

Examples

Here's some basic examples for use within the DCCWiki.

Accordions

See: Vendor documentation - Accordions

Hide or show content based on what button is selected.

Code

<div class="panel-group" id="accordion">
 <accordion parent="accordion" heading="SECTION1" class="in">
   Lorem ipsum...
 </accordion>
 <accordion parent="accordion" heading="SECTION2">
   Lorem ipsum...
 </accordion>
</div>

Output

SECTION1

  Lorem ipsum...

SECTION2

  Lorem ipsum...

Buttons

See: Vendor documentation - Buttons

Use a button to visit a different DCCWiki page.

Standard buttons

Code	Output
<btn>Simple Button</btn>	Simple Button
<btn size="lg">Large Button</btn> <btn size="sm">Small Button</btn>	Large Button Small Button
<btn> Grouped Buttons </btn>	GroupedButtons
<btn> Button Tool Bar </btn>	Button ToolBar
<btn class="btn-primary"> Classy Buttons </btn>	ClassyButtons
<btn class=""> Button without any class </btn>	Button without any class
<btn> Classy||btn-primary Non-classy Very Classy||btn-success </btn>	ClassyNon-classyVery Classy
<btn> Standard Button Some Page Title|Internal Target http://some.where|External Target </btn>	Standard ButtonInternal TargetExternal Target

Dropdown buttons

Code	Output
<btn> Dropdown-Menu * Some Menu Item * *: Some Heading * Some Other Menu Item </btn>	Dropdown-Menu Some Menu Item Some Heading Some Other Menu Item
<btn> Target|Split Dropdown * Some Menu Item </btn>	Split DropdownToggle Dropdown Some Menu Item
<btn class=""> Non-Button Dropdown * Some Menu Item </btn>	Non-Button Dropdown Some Menu Item
<btn> Semantic Dropdown * {{#ask:[[Category:Components]]}} </btn>	Semantic Dropdown no entries…

Wrappers

Code	Output
<btn wrapperclass="btn-group dropup"> Dropup * Some Menu Item </btn>	Dropup Some Menu Item
<btn wrapperclass="btn-group-vertical"> Explicit Wrapper Setting </btn>	ExplicitWrapperSetting
<btn wrapper=""> Explicit Wrapper Unsetting </btn>	ExplicitWrapperUnsetting

Styling

Code	Output
<btn> Target|<i>Italic Tag</i> </btn>	Italic Tag
<btn> Target|''Italic Wiki Markup'' </btn>	Italic Wiki Markup
''<btn> Surrounding Italic Wiki Markup </btn>''	Surrounding Italic Wiki Markup

Icons

See also: Help:Font awesome for additional icon usage.

Code	Output
<btn> Target|<span class="fa fa-cog"></span> icon with span </btn>	icon with span
<btn icon="cog"> icon attribute </btn>	icon attribute
<btn fa="cog"> fa attribute </btn>	fa attribute

Parsing

Code	Output
<btn> {{fullurl:{{PAGENAME}}}}|{{ucfirst:magic words}} </btn>	Magic words
<btn> mainpage </btn>	Main Page
Info: if a system message by that name exists, the text will be replaced by it's content

Specifications

The general structure for the code of a single button is "target|text|class", where "text" and "class" are optional. If "text" is omitted it is assumed to be the same as "target". "target" and "text" are parsed after the following algorithm.

1. Check for semantic queries.
2. If there is an existing or default interface message with that name, use the content of that message instead.
3. Parse it.
4. If it is a valid URL (beginning with http:// or other URL protocol), the link will point to that URL.
5. Else, it will be treated as a wikilink.