Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
example [2018/08/31 13:11] – nampara17example [2018/08/31 13:36] (current) – nampara17
Line 416: Line 416:
  
 </WRAP> </WRAP>
- 
  
 <code> <code>
Line 457: Line 456:
 ==== Bootswrapper plugin ==== ==== Bootswrapper plugin ====
  
 +==== Jumbotron ====
 +
 +<code>
 <jumbotron> <jumbotron>
 ===== Hello, world! ===== ===== Hello, world! =====
Line 464: Line 466:
 content or information. content or information.
 </jumbotron> </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>