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
Last revisionBoth sides next revision
example [2018/08/31 13:11] – nampara17example [2018/08/31 13:29] – nampara17
Line 457: Line 457:
 ==== Bootswrapper plugin ==== ==== Bootswrapper plugin ====
  
 +==== Jumbotron ====
 +
 +<code>
 <jumbotron> <jumbotron>
 ===== Hello, world! ===== ===== Hello, world! =====
Line 464: Line 467:
 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>