1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
# Bootstrap features
This page will contain a display of various features from Bootstrap.
They require some manual HTML tags.
Note that not all Markdown parsers allow Markdown markup inside all HTML tags.
In the case of ikiwiki, adding `markdown="1"` to `div` elements usually allows markup to be used inside them.
For a full list of features provided by Bootstrap 4, go to <http://v4-alpha.getbootstrap.com/getting-started/introduction/>.
<div class="jumbotron" markdown="1">
## Jumbotron
It's big and in your face.
---
You can still use Markdown syntax inside HTML blocks, if you are careful.
<a class="btn btn-primary btn-large" href="#">Button</a>
</div>
## Labels <span class="label label-info">Hi!</span>
Span elements work inside Markdown headings.
<div class="card card-block" markdown="1">
## Cards
Put a border with soft round corners around your content.
</div>
## Card decks
These require some more work.
You can use the `\[[!img]]` directive, but make sure to add `class="card-img-top"` or `class="card-img-bottom"` where appropriate.
For images in cards to work properly, they need to have their width forced to 100% of their container.
This is done in the `style.css` file that comes with ikistrap.
Another issue is that due to all the nested HTML tags, even with `markdown="1"`, Markdown markup does not get parsed anymore.
<div class="card-deck">
<div class="card-deck-wrapper">
<div class="card">
[[!img Lemonshark.jpg alt="Lemon shark" class="card-img-top"]]
<div class="card-block">
<p class="card-text">
A lemon shark and his little friends are out for a swim.
</p>
<p><a href="#" class="btn btn-danger">Escape</a></p>
</div>
</div>
<div class="card">
[[!img Anemones.jpg alt="Anemones" class="card-img-top"]]
<div class="card-block">
<p class="card-text">
Anemones look really nice and are much less dangerous than lemon sharks.
</p>
<p><a href="#" class="btn btn-success">Admire</a></p>
</div>
</div>
<div class="card">
[[!img Sea_Star.jpg alt="Sea star" class="card-img-top"]]
<div class="card-block">
<p class="card-text">
Sea stars are also less dangerous than lemon sharks, but they are slightly more dangerous than
anemones, <em>especially</em> when stepped on.
</p>
<p><a href="#" class="btn btn-warning">Sidestep</a></p>
</div>
</div>
</div>
</div>
## Card columns
These can be created by writing the outer card-columns `div` elements yourself,
and using `\[[!inline]]` with `template="simplecard"` to generate the cards.
<div class="card-columns">
[[!inline pages="sample_text/* and !*/Discussion" template="simplecard" feeds="no"]]
</div>
## Carousel
These can be created by writing the outer two carousel `div` elements yourself,
and using `\[[!inline]]` with `template="carouselpage"` to generate the carousel items.
<p>
<div id="carousel-example-pages" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators"></ol>
<div class="carousel-inner" role="listbox">
[[!inline pages="sample_text/* and !*/Discussion" template="carouselpage" feeds="no"]]
</div>
<a class="left carousel-control" href="#carousel-example-pages" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-pages" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</p>
If you only want to show images, use `template="carouselimage"`, and select your images directly with the `pages` parameter.
<p>
<div id="carousel-example-images" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
[[!inline pages="*.jpg" template="carouselimage" feeds="no"]]
</div>
<a class="left carousel-control" href="#carousel-example-images" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-images" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</p>
## Progress bars
Ikistrap also provides a progress directive which works in the same way as the progress plugin,
but it also allows an extra class to be specified to change the style per bar.
[[!progress totalpages="* and !*/Discussion" donepages="*/Discussion"]]
[[!progress percent="33%"]]
[[!progress percent="66%" class="progress-success progress-striped"]]
## Other stuff
Goes here.
|
