1 files changed, 136 insertions, 0 deletions
diff --git a/backend/ikistrap/example/Bootstrap_features.mdwn b/backend/ikistrap/example/Bootstrap_features.mdwn
new file mode 100644
index 0000000..12c3a08
--- /dev/null
+++ b/backend/ikistrap/example/Bootstrap_features.mdwn
@@ -0,0 +1,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.
+