136 lines
7.5 KiB
HTML
136 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
|
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
|
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
|
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
|
|
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<title>bootstrap-drawer documentation</title>
|
|
<meta name="description" content="">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
|
|
<link rel="stylesheet" type="text/css" href="example/drawer-docs.css">
|
|
<link rel="stylesheet" type="text/css" href="example/github.css">
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-59331212-1', 'auto');
|
|
ga('require', 'displayfeatures');
|
|
ga('send', 'pageview');
|
|
</script>
|
|
</head>
|
|
<body class="has-offcanvas">
|
|
<div id="docDrawer" class="drawer dw-xs-10 dw-sm-6 dw-md-5 fold in" aria-labelledby="docDrawer">
|
|
<div class="drawer-controls">
|
|
<a href="#docDrawer" data-toggle="drawer" href="#docDrawer" aria-foldedopen="false" aria-controls="docDrawer" class="btn btn-default"><i class="fa fa-align-justify"></i></a>
|
|
</div>
|
|
<div class="drawer-contents">
|
|
<div class="drawer-heading">
|
|
<h2 class="drawer-title"><strong>bootstrap-drawer</strong></h2>
|
|
</div>
|
|
<div class="drawer-body">
|
|
<iframe src="https://ghbtns.com/github-btn.html?user=clineamb&repo=bootstrap-drawer&type=star&count=true" frameborder="0" scrolling="0" width="100" height="20px"></iframe>
|
|
<iframe src="https://ghbtns.com/github-btn.html?user=clineamb&repo=bootstrap-drawer&type=watch&count=true&v=2" frameborder="0" scrolling="0" width="100" height="20px"></iframe>
|
|
</div>
|
|
<div class="drawer-heading">
|
|
<h3 class="drawer-title">Basics</h2>
|
|
</div>
|
|
<ul id="doc-nav" class="drawer-fullnav">
|
|
<li role="presentation"><a href="index.html">Home / Basic Usage</a></li>
|
|
<li role="presentation"><a href="customize.html">Position / Colors</a></li>
|
|
<li role="presentation"><a href="javascript.html">data-toggle / Javascript</a></li>
|
|
<li role="presentation"><a href="less.html">Using Less</a></li>
|
|
</ul>
|
|
<div class="drawer-heading">
|
|
<h3 class="drawer-title">Other Links</h2>
|
|
</div>
|
|
<ul class="drawer-fullnav">
|
|
<li role="presentation"><a href="http://github.com/clineamb/bootstrap-drawer" target="_blank"><i class="fa fa-github-alt"></i> GitHub Repo</a></li>
|
|
<li role="presentation"><a href="http://www.npmjs.com/package/bootstrap-drawer" target="_blank"><i class="fa fa-share-square"></i> npm</a></li>
|
|
<li role="presentation"><a href="http://twitter.com/clineamb" target="_blank"><i class="fa fa-twitter"></i> @clineamb</a></li>
|
|
<li><a name=""><iframe src="https://ghbtns.com/github-btn.html?user=clineamb&type=follow&count=true" frameborder="0" scrolling="0" width="100%" height="20px"></iframe></a></li>
|
|
</ul>
|
|
<div class="drawer-footer">
|
|
<small>© 2015 Caroline Amaba</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="drawer-docs">
|
|
<div class="jumbotron page-topper">
|
|
<div class="container">
|
|
<h1>bootstrap-drawer</h1>
|
|
<h4>bootstrap-drawer is a Bootstrap add-on that gives you an off-canvas/drawer element to your page or container! Check it out by clicking the toggle in the top-left corner!</h4>
|
|
</div>
|
|
</div>
|
|
<div id="drawer-docs-content" class="container">
|
|
<h2 id="drawer-customization">Drawer Customization</h2>
|
|
<p><strong>bootstrap-drawer</strong> comes with some built-in classes to customize some basics about your drawer. These utility classes are modeled after Bootstrap's Navbar components.</p>
|
|
<hr>
|
|
<h2 id="position">Position</h2>
|
|
<p>Sometimes you might want the drawer to the right. You can do this quickly by adding <code>.drawer-right</code> to the <code>.drawer</code> container.</p>
|
|
<pre><code class="lang-html"><div id="drawerExample2" class="drawer drawer-right ...">
|
|
...
|
|
</div>
|
|
</code></pre>
|
|
<div class="panel panel-default has-inner-drawer example-container-right">
|
|
<div id="drawerExample2" class="drawer drawer-right drawer-inside dw-xs-5 fold" aria-labelledby="drawerExample2">
|
|
<div class="drawer-controls">
|
|
<a href="#drawerExample2" data-toggle="drawer" href="#drawerExample2" aria-foldedopen="false" aria-controls="drawerExample2" class="btn btn-primary btn-sm">Menu</a>
|
|
</div>
|
|
<div class="drawer-contents">
|
|
<div class="drawer-heading">
|
|
<strong>right menu example</strong>
|
|
</div>
|
|
<ul class="drawer-nav">
|
|
<li role="presentation" class="active"><a href="#">Link</a></li>
|
|
<li role="presentation"><a href="#">Link</a></li>
|
|
<li role="presentation"><a href="#">Link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p>You can position the drawer to the right by adding the <code>.drawer-right</code> class. This also works on full-page drawers.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
<h2 id="inverse-color">Inverse Color</h2>
|
|
<p>Like the Bootstrap navbar, there is an inverse color option to the drawer. Just add <code>.drawer-inverse</code> to your <code>.drawer</code> container.</p>
|
|
<pre><code class="lang-html"><div id="drawerExample2" class="drawer drawer-inverse ...">
|
|
...
|
|
</div>
|
|
</code></pre>
|
|
<div class="panel panel-default has-inner-drawer example-container">
|
|
<div id="drawerExample3" class="drawer drawer-inverse drawer-inside dw-xs-5 fold" aria-labelledby="drawerExample3">
|
|
<div class="drawer-controls">
|
|
<a href="#drawerExample3" data-toggle="drawer" href="#drawerExample3" aria-foldedopen="false" aria-controls="drawerExample3" class="btn btn-primary btn-sm">Menu</a>
|
|
</div>
|
|
<div class="drawer-contents">
|
|
<div class="drawer-heading">
|
|
<strong>inverse menu example</strong>
|
|
</div>
|
|
<ul class="drawer-fullnav">
|
|
<li role="presentation" class="active"><a href="#">Link</a></li>
|
|
<li role="presentation"><a href="#">Link</a></li>
|
|
<li role="presentation"><a href="#">Link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p>You can inverse the drawer color (like navbar) by adding <code>.drawer-inverse</code> class.</p>
|
|
</div>
|
|
</div> <div id="drawer-docs-footer">
|
|
<a href="#docDrawer" data-toggle="drawer" class="btn btn-lg btn-block btn-primary">Open the Drawer</a>
|
|
</div>
|
|
</div>
|
|
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
|
|
<script src="example/bootstrap.min.js"></script>
|
|
<script src="example/highlight.pack.js"></script>
|
|
<script src="dist/js/drawer.js"></script>
|
|
<script src="example/docs.js"></script>
|
|
</body>
|
|
</html> |