2024-08-25 22:56:19 +00:00
<!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" >
2024-08-26 00:18:58 +00:00
< span class = "created" > Created < time datetime = "2024-08-26T00:18:26Z" class = "dt-published" > Mon Aug 26 00:18:26 2024< / time > .< / span >
2024-08-25 22:56:19 +00:00
< span class = "edited" >
2024-08-26 00:18:58 +00:00
Edited < time datetime = "2024-08-26T00:18:26Z" > Mon Aug 26 00:18:26 2024< / time > .
2024-08-25 22:56:19 +00:00
< / 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 >
