341 lines
12 KiB
HTML
341 lines
12 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
|
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<title>Bootstrap features - Ayakael</title>
|
||
|
|
|
||
|
|
<!-- cargo-culted from https://realfavicongenerator.net/ -->
|
||
|
|
<!-- for the record: it is absolutely ridiculous that new browsers
|
||
|
|
*and* operating systems each want their own little precious
|
||
|
|
snowflake just for a frigging icon -->
|
||
|
|
<link rel="apple-touch-icon" sizes="180x180" href="../apple-touch-icon.png">
|
||
|
|
<link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png">
|
||
|
|
<link rel="icon" type="image/png" sizes="16x16" href="../favicon-16x16.png">
|
||
|
|
<link rel="manifest" href="../site.webmanifest">
|
||
|
|
<meta name="msapplication-TileColor" content="#da532c">
|
||
|
|
<meta name="theme-color" content="#ffffff">
|
||
|
|
|
||
|
|
<!-- ikiwiki CSS -->
|
||
|
|
<link href="../style.css" rel="stylesheet" />
|
||
|
|
|
||
|
|
<!-- Bootstrap core CSS -->
|
||
|
|
<!-- those checksums can be verified with: shasum -b -a 384 $file | xxd -r -p | base64 -->
|
||
|
|
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
|
||
|
|
|
||
|
|
<!-- Custom styles for this template -->
|
||
|
|
<link href="../bootstrap.local.css" rel="stylesheet" />
|
||
|
|
|
||
|
|
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
||
|
|
<!--[if lt IE 9]>
|
||
|
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||
|
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||
|
|
<![endif]-->
|
||
|
|
|
||
|
|
<!-- Custom styles for derivatives -->
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="../local.css" type="text/css" />
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<nav class="navbar navbar-default navbar-fixed-top">
|
||
|
|
<div class="container">
|
||
|
|
<div class="navbar-header">
|
||
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||
|
|
<span class="sr-only">Toggle navigation</span>
|
||
|
|
<span class="icon-bar"></span>
|
||
|
|
<span class="icon-bar"></span>
|
||
|
|
<span class="icon-bar"></span>
|
||
|
|
</button>
|
||
|
|
<a class="navbar-brand" href="../">
|
||
|
|
<img alt="Ayakael" src="../favicon.png" width="48" height="48" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="navbar" class="collapse navbar-collapse">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!-- the anchors force ikiwiki to use a tags instead of spans. hopefully. -->
|
||
|
|
|
||
|
|
<ul class="nav navbar-nav navbar-right">
|
||
|
|
<li><a href="../index.en.html">Home</a></li>
|
||
|
|
<li><a href="https://ayakael.net/forge/">Forge</a></li>
|
||
|
|
<li><a href="../contact/index.en.html">Contact</a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
|
||
|
|
<ul class="nav navbar-nav">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<div class="container" id="content">
|
||
|
|
|
||
|
|
<h1>Bootstrap features</h1>
|
||
|
|
|
||
|
|
<p>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 <code>markdown="1"</code> to <code>div</code> elements usually allows markup to be used inside them.
|
||
|
|
For a full list of features provided by Bootstrap 4, go to <a href="http://v4-alpha.getbootstrap.com/getting-started/introduction/">http://v4-alpha.getbootstrap.com/getting-started/introduction/</a>.</p>
|
||
|
|
|
||
|
|
<div class="jumbotron">
|
||
|
|
<h2>Jumbotron</h2>
|
||
|
|
|
||
|
|
<p>It's big and in your face.</p>
|
||
|
|
|
||
|
|
<hr />
|
||
|
|
|
||
|
|
<p>You can still use Markdown syntax inside HTML blocks, if you are careful.</p>
|
||
|
|
|
||
|
|
<p><a class="btn btn-primary btn-large" href="#">Button</a></p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>Labels <span class="label label-info">Hi!</span></h2>
|
||
|
|
|
||
|
|
<p>Span elements work inside Markdown headings.</p>
|
||
|
|
|
||
|
|
<div class="card card-block">
|
||
|
|
<h2>Cards</h2>
|
||
|
|
|
||
|
|
<p>Put a border with soft round corners around your content.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>Card decks</h2>
|
||
|
|
|
||
|
|
<p>These require some more work.
|
||
|
|
You can use the <code>[[!img ]]</code> directive, but make sure to add <code>class="card-img-top"</code> or <code>class="card-img-bottom"</code> 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 <code>style.css</code> file that comes with ikistrap.</p>
|
||
|
|
|
||
|
|
<p>Another issue is that due to all the nested HTML tags, even with <code>markdown="1"</code>, Markdown markup does not get parsed anymore.</p>
|
||
|
|
|
||
|
|
<div class="card-deck">
|
||
|
|
<div class="card-deck-wrapper">
|
||
|
|
<div class="card">
|
||
|
|
[[!img <span class="error">Error: Image::Magick is not installed</span>]]
|
||
|
|
<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 <span class="error">Error: Image::Magick is not installed</span>]]
|
||
|
|
<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 <span class="error">Error: Image::Magick is not installed</span>]]
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<h2>Card columns</h2>
|
||
|
|
|
||
|
|
<p>These can be created by writing the outer card-columns <code>div</code> elements yourself,
|
||
|
|
and using <code>[[!inline ]]</code> with <code>template="simplecard"</code> to generate the cards.</p>
|
||
|
|
|
||
|
|
<div class="card-columns">
|
||
|
|
[[!inline <span class="error">Error: failed to process template simplecard.tmpl: template simplecard.tmpl not found </span>]]
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>Carousel</h2>
|
||
|
|
|
||
|
|
<p>These can be created by writing the outer two carousel <code>div</code> elements yourself,
|
||
|
|
and using <code>[[!inline ]]</code> with <code>template="carouselpage"</code> to generate the carousel items.</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
<div id="carousel-example-pages" class="carousel slide" data-ride="carousel">
|
||
|
|
<ol class="carousel-indicators"></ol>
|
||
|
|
<div class="carousel-inner" role="listbox">
|
||
|
|
[[!inline <span class="error">Error: failed to process template carouselpage.tmpl: template carouselpage.tmpl not found </span>]]
|
||
|
|
</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>
|
||
|
|
|
||
|
|
<p>If you only want to show images, use <code>template="carouselimage"</code>, and select your images directly with the <code>pages</code> parameter.</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
<div id="carousel-example-images" class="carousel slide" data-ride="carousel">
|
||
|
|
<div class="carousel-inner" role="listbox">
|
||
|
|
[[!inline <span class="error">Error: failed to process template carouselimage.tmpl: template carouselimage.tmpl not found </span>]]
|
||
|
|
</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>
|
||
|
|
|
||
|
|
<h2>Progress bars</h2>
|
||
|
|
|
||
|
|
<p>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.</p>
|
||
|
|
|
||
|
|
<div class="progress">
|
||
|
|
<div class="progress-done" style="width: 0%">0%</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="progress">
|
||
|
|
<div class="progress-done" style="width: 33%">33%</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="progress">
|
||
|
|
<div class="progress-done" style="width: 66%">66%</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>Other stuff</h2>
|
||
|
|
|
||
|
|
<p>Goes here.</p>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!-- legacy Ikiwiki comments.pm section -->
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Mastodon comments -->
|
||
|
|
|
||
|
|
|
||
|
|
<div class="pagedate text-muted">
|
||
|
|
<span class="created">Created <time datetime="2024-08-26T01:41:43Z" class="dt-published">Mon Aug 26 01:41:43 2024</time>.</span>
|
||
|
|
<span class="edited">
|
||
|
|
|
||
|
|
Edited <time datetime="2024-08-26T01:41:43Z">Mon Aug 26 01:41:43 2024</time>.
|
||
|
|
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<nav class="navbar navbar-default">
|
||
|
|
|
||
|
|
<div class="navbar-brand"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></div>
|
||
|
|
<div class="container-fluid">
|
||
|
|
|
||
|
|
<div class="navbar-header">
|
||
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-footer" aria-expanded="false">
|
||
|
|
<span class="sr-only">Toggle navigation</span>
|
||
|
|
<span class="icon-bar"></span>
|
||
|
|
<span class="icon-bar"></span>
|
||
|
|
<span class="icon-bar"></span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="navbar-footer" class="collapse navbar-collapse">
|
||
|
|
|
||
|
|
|
||
|
|
<ul class="nav navbar-nav navbar-right">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<li class="dropdown">
|
||
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Meta<span class="caret"></span></a>
|
||
|
|
<ul class="dropdown-menu">
|
||
|
|
|
||
|
|
|
||
|
|
<li><a href="../recentchanges/index.en.html">Timeline</a></li>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</div> <!-- /container -->
|
||
|
|
|
||
|
|
<footer class="footer" role="contentinfo">
|
||
|
|
<div class="container">
|
||
|
|
|
||
|
|
|
||
|
|
<p class="text-muted">
|
||
|
|
<span class="copyright">
|
||
|
|
Copyleft © 2024-2024 ayakael <a href="../meta/license/">CC-BY-SA</a>
|
||
|
|
</span>
|
||
|
|
<span class="pull-right powered-by">
|
||
|
|
Powered by <a href="http://ikiwiki.info/">ikiwiki</a>.
|
||
|
|
<a href="https://gitlab.com/anarcat/ikiwiki-bootstrap-anarcat">Theme</a> by <a href="https://anarc.at/blog/2015-09-09-bootstrap">anarcat</a>.
|
||
|
|
</span>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Bootstrap core JavaScript
|
||
|
|
================================================== -->
|
||
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
||
|
|
<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f"></script>
|
||
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"></script>
|
||
|
|
|
||
|
|
<!-- TODO: Find other ways to setup analytics
|
||
|
|
<script data-goatcounter="https://analytics.anarc.at/count" async src="//analytics.anarc.at/count.js"></script>
|
||
|
|
<noscript>
|
||
|
|
<img src="https://analytics.anarc.at/count?p=Bootstrap_features&t=Bootstrap%20features" alt="tracking pixel to count visitors when Javascript is disabled" />
|
||
|
|
</noscript>
|
||
|
|
-->
|
||
|
|
</body>
|
||
|
|
</html>
|