Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision		 Previous revision
example [2018/08/31 13:02] – created nampara17example [2018/08/31 13:36] (current) – nampara17
Line 1: Line 1:
-====== Examples for the Wrap Plugin ======+====== Examples for the Wrap Plugin / bootswrapper plugin ======
  
 ===== Basic syntax ===== ===== Basic syntax =====
Line 416: Line 416:
  
 </WRAP> </WRAP>
- 
  
 <code> <code>
Line 454: Line 453:
 The text direction (''rtl'', right to left or ''ltr'', left to right) will get inserted automatically and is solely dependent on the language. The list of currently supported languages is taken from: http://meta.wikimedia.org/wiki/Template:List_of_language_names_ordered_by_code The text direction (''rtl'', right to left or ''ltr'', left to right) will get inserted automatically and is solely dependent on the language. The list of currently supported languages is taken from: http://meta.wikimedia.org/wiki/Template:List_of_language_names_ordered_by_code
 (If you specify a language not listed there, it simply won't do anything.) (If you specify a language not listed there, it simply won't do anything.)
 +
 +==== Bootswrapper plugin ====
 +
 +==== Jumbotron ====
 +
 +<code>
 +<jumbotron>
 +===== Hello, world! =====
 +
 +This is a simple hero unit, a simple jumbotron-style 
 +component for calling extra attention to featured
 +content or information.
 +</jumbotron>
 +</code>
 +
 +<jumbotron>
 +===== Hello, world! =====
 +
 +This is a simple hero unit, a simple jumbotron-style 
 +component for calling extra attention to featured
 +content or information.
 +</jumbotron>
 +
 +==== Panel ====
 +
 +<code>
 +<panel type="default" title="Title of Panel" subtitle="Subtitle" icon="fa fa-home">
 +Panel content
 +</panel>
 +</code>
 +
 +<panel type="default" title="Title of Panel" subtitle="Subtitle" icon="fa fa-home">
 +Panel content
 +</panel>
 +
 +==== Alert ====
 +
 +<code>
 +<alert type="success" icon="glyphicon glyphicon-user" dismiss="true">
 +**Well done!** You successfully read this important alert message.
 +</alert>
 +</code>
 +
 +<alert type="success" icon="glyphicon glyphicon-user" dismiss="true">
 +**Well done!** You successfully read this important alert message.
 +</alert>
 +
 +==== Text ====
 +
 +<code>
 +  * <text type="muted">muted</text>
 +  * <text type="primary">primary</text>
 +  * <text type="success">success</text>
 +  * <text type="info">info</text>
 +  * <text type="warning">warning</text>
 +  * <text type="danger">danger</text>
 +</code>
 +
 +  * <text type="muted">muted</text>
 +  * <text type="primary">primary</text>
 +  * <text type="success">success</text>
 +  * <text type="info">info</text>
 +  * <text type="warning">warning</text>
 +  * <text type="danger">danger</text>
 +
 +==== Tooltip ====
 +
 +<code>
 +<tooltip title="Sample Text" placement="bottom">Lorem ipsum</tooltip> dolor sit amet...
 +</code>
 +
 +<tooltip title="Sample Text" placement="bottom">Lorem ipsum</tooltip> dolor sit amet...
 +
 +==== Grid ====
 +
 +<code>
 +<grid>
 +<col sm="6">.col-sm-6 - Nulla quis lorem ut libero malesuada feugiat. Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
 +
 +Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit.
 +
 +Cras ultricies ligula sed magna dictum porta. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</col>
 +<col sm="6">.col-sm-6 - Nulla quis lorem ut libero malesuada feugiat. Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
 +
 +Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit.
 +
 +Cras ultricies ligula sed magna dictum porta. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</col>
 +</grid>
 +</code>
 +
 +<grid>
 +<col sm="6">.col-sm-6 - Nulla quis lorem ut libero malesuada feugiat. Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
 +
 +Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit.
 +
 +Cras ultricies ligula sed magna dictum porta. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</col>
 +<col sm="6">.col-sm-6 - Nulla quis lorem ut libero malesuada feugiat. Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
 +
 +Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit.
 +
 +Cras ultricies ligula sed magna dictum porta. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</col>
 +</grid>
 +
 +==== Variable size cols ====
 +
 +<code>
 +<grid>
 +<col xs="12" sm="6" lg="8">.col-xs-12 .col-sm-6 .col-lg-8 Nulla quis lorem ut libero malesuada feugiat. Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
 +
 +Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit.
 +
 +Cras ultricies ligula sed magna dictum porta. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</col>
 +<col xs="6" lg="4">.col-xs-6 .col-lg-4 Nulla quis lorem ut libero malesuada feugiat. Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
 +
 +Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit.
 +
 +Cras ultricies ligula sed magna dictum porta. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</col>
 +</grid>
 +</code>
 +
 +<grid>
 +<col xs="12" sm="6" lg="8">.col-xs-12 .col-sm-6 .col-lg-8 Nulla quis lorem ut libero malesuada feugiat. Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
 +
 +Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit.
 +
 +Cras ultricies ligula sed magna dictum porta. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</col>
 +<col xs="6" lg="4">.col-xs-6 .col-lg-4 Nulla quis lorem ut libero malesuada feugiat. Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
 +
 +Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit.
 +
 +Cras ultricies ligula sed magna dictum porta. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</col>
 +</grid>
 +
 +==== Thumbnail ====
 +
 +<code>
 +<grid>
 +Nulla quis lorem ut libero malesuada feugiat. Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
 +
 +Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit.
 +
 +Cras ultricies ligula sed magna dictum porta. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Quisque velit nisi, pretium ut lacinia in, elementum id enim.
 +<col xs="6" md="3">
 +<thumbnail>
 +{{:pasted:20180831-081621-example.png}}
 +</thumbnail>
 +</col>
 +Nulla quis lorem ut libero malesuada feugiat. Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
 +
 +Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit.
 +
 +Cras ultricies ligula sed magna dictum porta. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Quisque velit nisi, pretium ut lacinia in, elementum id enim.
 +</grid>
 +
 +<grid>
 +Nulla quis lorem ut libero malesuada feugiat. Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
 +
 +Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit.
 +
 +Cras ultricies ligula sed magna dictum porta. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Quisque velit nisi, pretium ut lacinia in, elementum id enim.
 +<col xs="6" md="3">
 +<thumbnail>
 +{{:pasted:20180831-081621-example.png}}
 +<caption>
 +
 +=== DokuWiki ===
 +
 +//DokuWiki is a simple to use and highly versatile Open Source wiki software//
 +</caption>
 +</thumbnail>
 +Nulla quis lorem ut libero malesuada feugiat. Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
 +</col>
 +</grid>
 +</code>
 +
 +<grid>
 +Nulla quis lorem ut libero malesuada feugiat. Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
 +
 +Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit.
 +
 +Cras ultricies ligula sed magna dictum porta. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Quisque velit nisi, pretium ut lacinia in, elementum id enim.
 +<col xs="6" md="3">
 +<thumbnail>
 +{{:pasted:20180831-081621-example.png}}
 +</thumbnail>
 +</col>
 +Nulla quis lorem ut libero malesuada feugiat. Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
 +
 +Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit.
 +
 +Cras ultricies ligula sed magna dictum porta. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Quisque velit nisi, pretium ut lacinia in, elementum id enim.
 +</grid>
 +
 +<grid>
 +Nulla quis lorem ut libero malesuada feugiat. Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
 +
 +Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit.
 +
 +Cras ultricies ligula sed magna dictum porta. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Quisque velit nisi, pretium ut lacinia in, elementum id enim.
 +<col xs="6" md="3">
 +<thumbnail>
 +{{:pasted:20180831-081621-example.png}}
 +<caption>
 +
 +=== DokuWiki ===
 +
 +//DokuWiki is a simple to use and highly versatile Open Source wiki software//
 +</caption>
 +</thumbnail>
 +Nulla quis lorem ut libero malesuada feugiat. Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
 +</col>
 +</grid>
 +
 +==== Well ====
 +
 +<code>
 +<well>Look, I'm in a well!</well>
 +</code>
 +
 +<well>Look, I'm in a well!</well>
 +
 +==== Button ====
 +
 +<code>
 +<button type="success" size="lg" icon="glyphicon glyphicon-edit">[[:wiki:welcome]]</button>
 +</code>
 +
 +<button type="success" size="lg" icon="glyphicon glyphicon-edit">[[:wiki:welcome]]</button>
 +
 +==== Nav ====
 +
 +<code>
 +<nav>
 +  * [[:start]]
 +  * [[:plugin:bootswrapper|Plugin]]
 +  * [[playground:playground]]
 +  * DokuWiki
 +    * [[:wiki:welcome]]
 +    * [[:wiki:syntax]]
 +</nav>
 +</code>
 +
 +<nav>
 +  * [[:start]]
 +  * [[:plugin:bootswrapper|Plugin]]
 +  * [[playground:playground]]
 +  * DokuWiki
 +    * [[:wiki:welcome]]
 +    * [[:wiki:syntax]]
 +</nav>
 +