273 lines
9.6 KiB
HTML
273 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" class="h-100">
|
|
<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="../css/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://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
|
|
|
<!-- Custom styles for this template -->
|
|
<link href="../css/bootstrap.local.css" rel="stylesheet" />
|
|
|
|
<!-- Custom styles for derivatives -->
|
|
|
|
<link rel="stylesheet" href="../css/local.css" type="text/css" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
<body class="d-flex flex-column h-100">
|
|
|
|
<header>
|
|
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light border">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand me-auto" href="../">
|
|
<img alt="Ayakael" src="../favicon.png" width="48" height="48" />
|
|
</a>
|
|
|
|
|
|
|
|
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div id="navbar" class="collapse navbar-collapse">
|
|
<!-- the anchors force ikiwiki to use a tags instead of spans. hopefully. -->
|
|
<ul class="navbar-nav nav-link align-items-center ms-auto">
|
|
<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="navbar-nav nav-link align-items-center ms-auto">
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<main class="flex-shrink-0">
|
|
<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-09-17T19:04:06Z" class="dt-published">Tue Sep 17 19:04:06 2024</time>.</span>
|
|
<span class="edited">
|
|
|
|
Edited <time datetime="2024-09-17T19:04:06Z">Tue Sep 17 19:04:06 2024</time>.
|
|
|
|
</span>
|
|
</div>
|
|
|
|
</div> <!-- /container -->
|
|
</main>
|
|
|
|
<footer class="footer mt-auto bg-light py-2" role="contentinfo">
|
|
<div class="container">
|
|
<div class="row text-muted">
|
|
<div class="col-sm">
|
|
Copyleft © 2024 ayakael <a href="../meta/license/">CC-BY-SA</a>
|
|
</div>
|
|
<div class="col-sm text-sm-end">
|
|
Powered by <a href="http://ikiwiki.info/">ikiwiki</a>.
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
<!-- Bootstrap core JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></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>
|