Documentation in Jasny style

Hide original twbs docs by default (show/hide button)
This commit is contained in:
Arnold Daniels
2013-10-01 04:09:46 +02:00
parent e8a1df5f06
commit febb170bc1
14 changed files with 308 additions and 92 deletions

View File

@@ -1 +1,10 @@
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script>var z = document.createElement("script"); z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
<div id="aboutme-container">
<a href="mailto:arnold@jasny.net" class="aboutme">
<img class="img-circle" src="http://0.gravatar.com/avatar/0bba82e8b2a9d2cf9645cb07ea54766f?s=100&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D100&r=G" title="Arnold Daniels">
<div class="aboutme-text">
<span href="mailto:arnold@jasny.net" class="aboutme-title">Looking for a developer?</span>
I've for hire. Drop me a line and let's take your application to the next level.
<span class="aboutme-name" href="mailto:arnold@jasny.net">- Arnold Daniels</span>
</div>
</a>
</div>

View File

@@ -1,4 +1,4 @@
<li>
<li class="bs-jasny">
<a href="#download">Download Bootstrap</a>
<ul class="nav">
<li><a href="#download-compiled">Compiled CSS, JS, and fonts</a></li>
@@ -6,19 +6,19 @@
<li><a href="#download-cdn">Bootstrap CDN</a></li>
</ul>
</li>
<li>
<li class="bs-jasny">
<a href="#whats-included">What's included</a>
</li>
<li>
<a href="#template">Basic template</a>
</li>
<li>
<li class="bs-jasny">
<a href="#examples">Examples</a>
</li>
<li>
<a href="#disable-responsive">Disabling responsiveness</a>
</li>
<li>
<li class="bs-jasny">
<a href="#migration">Migrating from 2.x to 3.0</a>
<ul class="nav">
<li><a href="#migration-classes">Major class changes</a></li>

View File

@@ -3,6 +3,6 @@
<strong>
<a href="{{ page.base_url }}2.3.2/">Looking for Bootstrap 2.3.2 docs?</a>
</strong>
We've moved it to a new home while we push forward with Bootstrap 3. <a href="http://blog.getbootstrap.com/">Read the blog</a> for details.
We've moved it to a new home while we push forward with Bootstrap 3.
</div>
</div>

View File

@@ -1,16 +1,16 @@
<div class="bs-social">
<ul class="bs-social-buttons">
<li>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&amp;repo=bootstrap&amp;type=watch&amp;count=true" width="100" height="20" title="Star on GitHub"></iframe>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=jasny&amp;repo=bootstrap&amp;type=watch&amp;count=true" width="100" height="20" title="Star on GitHub"></iframe>
</li>
<li>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&amp;repo=bootstrap&amp;type=fork&amp;count=true" width="102" height="20" title="Fork on GitHub"></iframe>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=jasny&amp;repo=bootstrap&amp;type=fork&amp;count=true" width="102" height="20" title="Fork on GitHub"></iframe>
</li>
<li class="follow-btn">
<a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a>
<a href="https://twitter.com/ArnoldDaniels" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @ArnoldDaniels</a>
</li>
<li class="tweet-btn">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://getbootstrap.com/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://jasny.github.io/bootstrap" data-count="horizontal" data-via="ArnoldDaniels">Tweet</a>
</li>
</ul>
</div>

View File

@@ -43,6 +43,19 @@
</div>
</div>
<div class="col-md-9" role="main">
<div class="bs-callout bs-callout-info bs-twbs-toggle">
Are you already familiar with Twitter Bootstrap?
<div class="btn-group pull-right" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="show-twbs" value="yes"> Yes
</label>
<label class="btn btn-default">
<input type="radio" name="show-twbs" value="no"> No
</label>
</div>
</div>
{{ content }}
</div>
</div>
@@ -55,12 +68,12 @@
<div class="container">
{% include social-buttons.html %}
<p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Jasny Bootstrap is a fork of <a href="http://getbootstrap.com/" target="_blank">Twitter Bootstrap</a>. This fork is developed and maintained by <a href="http://twitter.com/ArnoldDaniels" target="_blank">Arnold Daniels</a>.</p>
<p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<ul class="footer-links">
<li><a href="{{ page.base_url }}2.3.2/">Bootstrap 2.3.2 docs</a></li>
<li class="muted">&middot;</li>
<li><a href="{{ site.blog }}">Blog</a></li>
<li><a href="http://www.jasny.net">Jasny.net</a></li>
<li class="muted">&middot;</li>
<li><a href="{{ site.repo }}/issues?state=open">Issues</a></li>
<li class="muted">&middot;</li>

File diff suppressed because one or more lines are too long

BIN
assets/img/bg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 259 KiB

View File

@@ -24,6 +24,20 @@
e.preventDefault()
})
// show/hide Twitter Bootstrap docs
$('.bs-twbs-toggle :radio').on('change', function() {
$(this).val() === 'no' ? $('body').addClass('bs-twbs-show') : $('body').removeClass('bs-twbs-show')
if (localStorage) localStorage.hide_twbs = $(this).val()
$body.scrollspy('refresh')
})
var hide_twbs = localStorage && localStorage.hide_twbs ? localStorage.hide_twbs : 'yes'
$('.bs-twbs-toggle :radio').attr('checked', function() {
return $(this).val() === hide_twbs }
).filter(':checked').trigger('change')
$('.bs-twbs-toggle label').removeClass('active').has(':radio[checked]').addClass('active')
$('body').addClass('bs-twbs-statefull');
// back to top
setTimeout(function () {
var $sideBar = $('.bs-sidebar')

View File

@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="starter-template.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/jquery.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</body>
</html>

View File

@@ -0,0 +1,7 @@
body {
padding-top: 50px;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}

View File

@@ -0,0 +1,5 @@
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
});

View File

@@ -9,7 +9,7 @@ base_url: "../"
<!-- Getting started
================================================== -->
<div class="bs-docs-section">
<div class="bs-docs-section bs-jasny">
<div class="page-header">
<h1 id="download">Download Bootstrap</h1>
</div>
@@ -18,7 +18,7 @@ base_url: "../"
<h3 id="download-compiled">Compiled CSS, JS, and fonts</h3>
<p>The fastest way to get Bootstrap is to download the compiled and minified versions of our CSS and JavaScript, along with the included fonts. No documentation or original source files are included.</p>
<p><a class="btn btn-lg btn-primary" href="{{ site.download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
<h3 id="download-additional">Additional downloads</h3>
<div class="bs-docs-dl-options">
<h4>
@@ -33,11 +33,11 @@ base_url: "../"
Install with <a href="http://bower.io">Bower</a>
</h4>
<p>Install and manage the original files for all CSS and JavaScript, along with a local copy of the docs, using <a href="http://bower.io">Bower</a>.</p>
{% highlight bash %}$ bower install bootstrap{% endhighlight %}
{% highlight bash %}$ bower install jasny/bootstrap{% endhighlight %}
</div>
<h3 id="download-cdn">Bootstrap CDN</h3>
<p>The folks over at <a href="https://www.netdna.com/">NetDNA</a> have graciously provided CDN support for Bootstrap's CSS and JavaScript. To use, swap your local instances for the <a href="http://www.bootstrapcdn.com/">Bootstrap CDN</a> links listed below.</p>
<h3 id="download-cdn">Jasny Bootstrap @ cdnjs</h3>
<p><a href="http://cdnjs.com" target="_blank">Cdnjs</a> is a community driven CDN hosted by CloudFlare, supporting over a hundred projects. To use this CDN, swap your local instances for the <a href="http://www.bootstrapcdn.com/">Bootstrap CDN</a> links listed below.</p>
{% highlight html %}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="{{ site.cdn_css }}">
@@ -59,7 +59,7 @@ base_url: "../"
<!-- File structure
================================================== -->
<div class="bs-docs-section">
<div class="bs-docs-section bs-jasny">
<div class="page-header">
<h1 id="whats-included">What's included</h1>
</div>
@@ -76,17 +76,26 @@ bootstrap/
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
── glyphicons-halflings-regular.woff
── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
── glyphicons-halflings-regular.woff
└── extend/
├── css/
│ ├── jasny-bootstrap.css
│ ├── jasny-bootstrap.min.css
└── js/
├── jasny-bootstrap.js
└── jasny-bootstrap.min.js
{% endhighlight %}
<p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). Fonts from Glyphicons are included, as is the optional Bootstrap theme.</p>
<p>Alternatively you can extend Bootstrap by loading the <code>jasny-bootstrap.*</code> files from the <code>extend</code> folder, in conjunction with the original Twitter Bootstrap files or a custom build of Bootstrap.</p>
<div class="bs-callout bs-callout-danger">
<h4>jQuery required</h4>
<p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#template">starter template</a>.</p>
<p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included.</p>
</div>
</div>
@@ -132,12 +141,12 @@ bootstrap/
<!-- Template
================================================== -->
<div class="bs-docs-section">
<div class="bs-docs-section bs-jasny">
<div class="page-header">
<h1 id="examples">Examples</h1>
</div>
<p class="lead">Build on the basic template above with Bootstrap's many components. Check out some of the more advanced tips for how to customize and build on top of them.</p>
<p class="lead">Create diverse and advanced user interfaces using Jasny's Bootstrap components.</p>
<div class="row bs-examples">
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/starter-template/">
@@ -146,7 +155,7 @@ bootstrap/
<h4>Starter template</h4>
<p>Nothing but the basics: compiled CSS and JavaScript along with a container.</p>
</div>
<div class="col-xs-6 col-md-4">
<div class="col-xs-6 col-md-4 bs-twbs">
<a class="thumbnail" href="../examples/grid/">
<img src="../examples/screenshots/grid.jpg" alt="">
</a>
@@ -155,14 +164,14 @@ bootstrap/
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-md-4">
<div class="col-xs-6 col-md-4 bs-twbs">
<a class="thumbnail" href="../examples/jumbotron/">
<img src="../examples/screenshots/jumbotron.jpg" alt="">
</a>
<h4>Jumbotron</h4>
<p>Build around the jumbotron with a navbar and some basic grid columns.</p>
</div>
<div class="col-xs-6 col-md-4">
<div class="col-xs-6 col-md-4 bs-twbs">
<a class="thumbnail" href="../examples/jumbotron-narrow/">
<img src="../examples/screenshots/jumbotron-narrow.jpg" alt="">
</a>
@@ -171,14 +180,14 @@ bootstrap/
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-md-4">
<div class="col-xs-6 col-md-4 bs-twbs">
<a class="thumbnail" href="../examples/navbar/">
<img src="../examples/screenshots/navbar.jpg" alt="">
</a>
<h4>Navbar</h4>
<p>Super basic template that includes the navbar along with some additional content.</p>
</div>
<div class="col-xs-6 col-md-4">
<div class="col-xs-6 col-md-4 bs-twbs">
<a class="thumbnail" href="../examples/navbar-static-top/">
<img src="../examples/screenshots/navbar-static.jpg" alt="">
</a>
@@ -187,14 +196,14 @@ bootstrap/
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-md-4">
<div class="col-xs-6 col-md-4 bs-twbs">
<a class="thumbnail" href="../examples/navbar-fixed-top/">
<img src="../examples/screenshots/navbar-fixed.jpg" alt="">
</a>
<h4>Fixed navbar</h4>
<p>Super basic template with a fixed top navbar along with some additional content.</p>
</div>
<div class="col-xs-6 col-md-4">
<div class="col-xs-6 col-md-4 bs-twbs">
<a class="thumbnail" href="../examples/signin/">
<img src="../examples/screenshots/sign-in.jpg" alt="">
</a>
@@ -203,14 +212,14 @@ bootstrap/
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-md-4">
<div class="col-xs-6 col-md-4 bs-twbs">
<a class="thumbnail" href="../examples/sticky-footer/">
<img src="../examples/screenshots/sticky-footer.jpg" alt="">
</a>
<h4>Sticky footer</h4>
<p>Attach a footer to the bottom of the viewport when the content is shorter than it.</p>
</div>
<div class="col-xs-6 col-md-4">
<div class="col-xs-6 col-md-4 bs-twbs">
<a class="thumbnail" href="../examples/sticky-footer-navbar/">
<img src="../examples/screenshots/sticky-footer-navbar.jpg" alt="">
</a>
@@ -219,14 +228,14 @@ bootstrap/
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-md-4">
<div class="col-xs-6 col-md-4 bs-twbs">
<a class="thumbnail" href="../examples/justified-nav/">
<img src="../examples/screenshots/justified-nav.jpg" alt="">
</a>
<h4>Justified nav</h4>
<p>Expand on the default navbar and more to create justified navigation links.</p>
</div>
<div class="col-xs-6 col-md-4">
<div class="col-xs-6 col-md-4 bs-twbs">
<a class="thumbnail" href="../examples/offcanvas/">
<img src="../examples/screenshots/offcanvas.jpg" alt="">
</a>
@@ -235,14 +244,14 @@ bootstrap/
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-md-4">
<div class="col-xs-6 col-md-4 bs-twbs">
<a class="thumbnail" href="../examples/carousel/">
<img src="../examples/screenshots/carousel.jpg" alt="">
</a>
<h4>Carousel</h4>
<p>Customize the navbar and carousel, then add some new components.</p>
</div>
<div class="col-xs-6 col-md-4">
<div class="col-xs-6 col-md-4 bs-twbs">
<a class="thumbnail" href="../examples/non-responsive/">
<img src="../examples/screenshots/non-responsive.jpg" alt="">
</a>
@@ -251,7 +260,7 @@ bootstrap/
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-md-4">
<div class="col-xs-6 col-md-4 bs-twbs">
<a class="thumbnail" href="../examples/theme/">
<img src="../examples/screenshots/theme.jpg" alt="">
</a>
@@ -293,11 +302,11 @@ bootstrap/
<!-- Migration
================================================== -->
<div class="bs-docs-section">
<div class="bs-docs-section bs-jasny">
<div class="page-header">
<h1 id="migration">Migrating from 2.x to 3.0</h1>
</div>
<p class="lead">Folks looking to upgrade to v3 should use this section as a general upgrade guide. We've outlined some of the major changes and provided tables that highlight key changes. For an overview, <a href="http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/">read the announcement blog post</a>.</p>
<p class="lead">Folks looking to upgrade to v3 should use this section as a general upgrade guide. We've outlined some of the major changes and provided tables that highlight key changes.</p>
<h2 id="migration-classes">Major class changes</h2>
@@ -311,115 +320,119 @@ bootstrap/
</tr>
</thead>
<tbody>
<tr>
<tr class="bs-twbs">
<td><code>.container-fluid</code></td>
<td><code>.container</code></td>
</tr>
<tr>
<td><code>.container-semifluid</code></td>
<td><code>.container-smooth</code></td>
</tr>
<tr class="bs-twbs">
<td><code>.row-fluid</code></td>
<td><code>.row</code></td>
</tr>
<tr>
<tr class="bs-twbs">
<td><code>.span*</code></td>
<td><code>.col-md-*</code></td>
</tr>
<tr>
<tr class="bs-twbs">
<td><code>.offset*</code></td>
<td><code>.col-md-offset-*</code></td>
</tr>
<tr>
<tr class="bs-twbs">
<td><code>.brand</code></td>
<td><code>.navbar-brand</code></td>
</tr>
<tr>
<tr class="bs-twbs">
<td><code>.nav-collapse</code></td>
<td><code>.navbar-collapse</code></td>
</tr>
<tr>
<tr class="bs-twbs">
<td><code>.nav-toggle</code></td>
<td><code>.navbar-toggle</code></td>
</tr>
<tr>
<tr class="bs-twbs">
<td><code>.btn-navbar</code></td>
<td><code>.navbar-btn</code></td>
</tr>
<tr>
<tr class="bs-twbs">
<td><code>.hero-unit</code></td>
<td><code>.jumbotron</code></td>
</tr>
<tr>
<tr class="bs-twbs">
<td><code>.icon-*</code></td>
<td><code>.glyphicon .glyphicon-*</code></td>
</tr>
<tr>
<tr class="bs-twbs">
<td><code>.btn</code></td>
<td><code>.btn .btn-default</code></td>
</tr>
<tr>
<tr class="bs-twbs">
<td><code>.btn-mini</code></td>
<td><code>.btn-xs</code></td>
</tr>
<tr>
<tr class="bs-twbs">
<td><code>.btn-small</code></td>
<td><code>.btn-sm</code></td>
</tr>
<tr>
<tr class="bs-twbs">
<td><code>.btn-large</code></td>
<td><code>.btn-lg</code></td>
</tr>
<tr>
<tr class="bs-twbs">
<td><code>.visible-phone</code></td>
<td><code>.visible-sm</code></td>
</tr>
<tr>
<tr class="bs-twbs">
<td><code>.visible-tablet</code></td>
<td><code>.visible-md</code></td>
</tr>
<tr>
<tr class="bs-twbs">
<td><code>.visible-desktop</code></td>
<td><code>.visible-lg</code></td>
</tr>
<tr>
<tr class="bs-twbs">
<td><code>.hidden-phone</code></td>
<td><code>.hidden-sm</code></td>
</tr>
<tr>
<tr class="bs-twbs">
<td><code>.hidden-tablet</code></td>
<td><code>.hidden-md</code></td>
</tr>
<tr>
<tr class="bs-twbs">
<td><code>.hidden-desktop</code></td>
<td><code>.hidden-lg</code></td>
</tr>
<tr>
<tr class="bs-twbs">
<td><code>.input-small</code></td>
<td><code>.input-sm</code></td>
</tr>
<tr>
<tr class="bs-twbs">
<td><code>.input-large</code></td>
<td><code>.input-lg</code></td>
</tr>
<tr>
<tr class="bs-twbs">
<td><code>.checkbox.inline</code> <code>.radio.inline</code></td>
<td><code>.checkbox-inline</code> <code>.radio-inline</code></td>
</tr>
<tr>
<tr class="bs-twbs">
<td><code>.input-prepend</code> <code>.input-append</code></td>
<td><code>.input-group</code></td>
</tr>
<tr>
<tr class="bs-twbs">
<td><code>.add-on</code></td>
<td><code>.input-group-addon</code></td>
</tr>
<tr>
<tr class="bs-twbs">
<td><code>.thumbnail</code></td>
<td><code>.img-thumbnail</code></td>
</tr>
<tr>
<tr class="bs-twbs">
<td><code>ul.unstyled</code></td>
<td><code>.list-unstyled</code></td>
</tr>
<tr>
<tr class="bs-twbs">
<td><code>ul.inline</code></td>
<td><code>.list-inline</code></td>
</tr>

View File

@@ -6,8 +6,8 @@ base_url: "./"
<main class="bs-masthead" id="content" role="main">
<div class="container">
<h1>Bootstrap</h1>
<p class="lead">Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
<h1>Jasny Bootstrap</h1>
<p class="lead">The sleek and powerfull front-end framework you love, plus everything it's missing.</p>
<p>
<a href="{{ site.download }}" class="btn btn-outline-inverse btn-lg" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 3.0.0']);">Download Bootstrap</a>
</p>

View File

@@ -1910,3 +1910,10 @@ $('#myCarousel').on('slide.bs.carousel', function () {
</div><!-- /.table-responsive -->
</div>
<!-- Overview
================================================== -->
<div class="bs-docs-section bs-jasny">
Hallo
</div>