mirror of
https://github.com/jasny/bootstrap.git
synced 2026-04-24 03:00:49 -04:00
Arnold Daniels
@@ -1,16 +0,0 @@
|
||||
<!-- <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" alt="Arnold Daniels">
|
||||
<div class="aboutme-text">
|
||||
<span class="aboutme-title">Looking for a developer?</span>
|
||||
I'm available for freelance work, I want to hear about your projects.
|
||||
<span class="aboutme-name">- Arnold Daniels</span>
|
||||
</div>
|
||||
</a>
|
||||
</div> -->
|
||||
|
||||
|
||||
<div id="carbonads-container">
|
||||
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=jansy" id="_carbonads_js"></script>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://code.jquery.com/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/sticky-kit/1.1.3/sticky-kit.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
|
||||
<script src="{{ page.base_url }}dist/js/jasny-bootstrap.min.js"></script>
|
||||
|
||||
<script src="http://platform.twitter.com/widgets.js"></script>
|
||||
<script src="{{ page.base_url }}assets/js/docs.min.js"></script>
|
||||
@@ -1,55 +0,0 @@
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>
|
||||
{% if page.title == "Jasny Bootstrap" %}
|
||||
{{ page.title }}
|
||||
{% else %}
|
||||
{{ page.title }} · Jasny Bootstrap
|
||||
{% endif %}
|
||||
</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="{{ page.base_url }}dist/css/jasny-bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
|
||||
<!-- Documentation extras -->
|
||||
<link href="{{ page.base_url }}assets/css/docs.css" rel="stylesheet">
|
||||
<link href="{{ page.base_url }}assets/css/pygments-manni.css" rel="stylesheet">
|
||||
<!--[if lt IE 9]><script src="{{ page.base_url }}assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ page.base_url }}assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="{{ page.base_url }}assets/ico/favicon.png">
|
||||
|
||||
<script>
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-32388850-1']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
(function() {
|
||||
var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
|
||||
s.type = 'text/javascript';
|
||||
s.async = true;
|
||||
s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
|
||||
t.parentNode.insertBefore(s, t);
|
||||
})();
|
||||
/* ]]> */</script>
|
||||
@@ -1,43 +0,0 @@
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#navmenu">Navmenu</a>
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a class="nav-link" href="#navmenu-default">Default navmenu</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#navmenu-fixed">Fixed to left or right</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#navmenu-offcanvas">Off canvas</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#navmenu-inverted">Inverted navmenu</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#alerts">Alerts</a>
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a class="nav-link" href="#alerts-fixed">Fixed to top / bottom</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#buttons">Buttons</a>
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a class="nav-link" href="#buttons-labels">Labels</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#offcanvas">Off canvas</a>
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a class="nav-link" href="#offcanvas-examples">Examples</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#offcanvas-usage">Usage</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#rowlink">Row link</a>
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a class="nav-link" href="#rowlink-examples">Examples</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#rowlink-usage">Usage</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#fileinput">File input</a>
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a class="nav-link" href="#fileinput-examples">Examples</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#fileinput-usage">Usage</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
@@ -1,49 +0,0 @@
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#jasny-bootstrap">Jasny Bootstrap</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#download">Download Jasny Bootstrap</a>
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a class="nav-link" href="#download-compiled">Compiled CSS, JS, and fonts</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#download-additional">Additional downloads</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#download-cdn">Bootstrap CDN</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#whats-included">What's included</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#template">Basic template</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#js-overview">Plugins</a>
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a class="nav-link" href="#js-individual-compiled">Individual or compiled</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#js-data-attrs">Data attributes</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#js-programmatic-api">Programmatic API</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#js-noconflict">No conflict</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#js-events">Events</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#containers">Containers</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#examples">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#migration-v4">Migrating from 3.x to 4.0</a>
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a class="nav-link" href="#migration-classes-v4">Major class changes</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#migration-dropped-v4">What's removed</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#migration-v3">Migrating from 2.x to 3.0</a>
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a class="nav-link" href="#migration-classes-v3">Major class changes</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#migration-new-v3">What's new</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#migration-dropped-v3">What's removed</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#migration-notes-v3">Additional notes</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
@@ -1,26 +0,0 @@
|
||||
<header class="navbar navbar-dark navbar-expand-lg navbar-inverse fixed-top bs-docs-nav" role="banner">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<a href="{{ page.base_url }}" class="navbar-brand">Jasny Bootstrap</a>
|
||||
</div>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNavmenu">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<nav class="collapse navbar-collapse" role="navigation" id="mainNavmenu">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item {% if page.slug == 'getting-started' %}active{% endif %}">
|
||||
<a class="nav-link" href="{{ page.base_url }}getting-started">Getting started</a>
|
||||
</li>
|
||||
<li class="nav-item {% if page.slug == 'components' %}active{% endif %}">
|
||||
<a class="nav-link" href="{{ page.base_url }}components">Components</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav ml-auto">
|
||||
<li>
|
||||
<a href="http://www.jasny.net"><span class="hidden-sm">More by</span> Jasny</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
@@ -1,19 +0,0 @@
|
||||
<div class="bs-social">
|
||||
<ul class="bs-social-buttons">
|
||||
<li>
|
||||
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=jasny&repo=bootstrap&type=watch&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=jasny&repo=bootstrap&type=fork&count=true" width="102" height="20" title="Fork on GitHub"></iframe>
|
||||
</li>
|
||||
<li class="follow-btn">
|
||||
<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://jasny.github.io/bootstrap" data-count="horizontal" data-via="ArnoldDaniels">Tweet</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="FlattrButton" style="display:none;" rev="flattr;button:compact;" href="http://github.com/jasny/bootstrap">Flattr</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -1,74 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Meta, title, CSS, favicons, etc. -->
|
||||
{% include header.html %}
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
if (localStorage && localStorage.hide_twbs === 'no') document.body.setAttribute('class', 'bs-twbs-show')
|
||||
</script>
|
||||
|
||||
<a class="sr-only" href="#content">Skip to main content</a>
|
||||
|
||||
<!-- Docs master nav -->
|
||||
{% include nav-main.html %}
|
||||
|
||||
<!-- Docs page layout -->
|
||||
<div class="bs-header" id="content">
|
||||
<div class="container">
|
||||
<h1>{{ page.title }}</h1>
|
||||
<p>{{ page.lead }}</p>
|
||||
{% include ads.html %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container bs-docs-container">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="bs-sidebar hidden-print" role="complementary">
|
||||
<ul class="nav bs-sidenav flex-column">
|
||||
{% if page.slug == "getting-started" %}
|
||||
{% include nav-getting-started.html %}
|
||||
{% elsif page.slug == "components" %}
|
||||
{% include nav-components.html %}
|
||||
{% elsif page.slug == "about" %}
|
||||
{% include nav-about.html %}
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-9" role="main">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer
|
||||
================================================== -->
|
||||
<footer class="bs-footer" role="contentinfo">
|
||||
<div class="container">
|
||||
{% include social-buttons.html %}
|
||||
|
||||
<p>Jasny Bootstrap is a fork of <a href="http://getbootstrap.com/" target="_blank">vanilla 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>Currently v{{ site.current_version }}</li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="{{ page.base_url }}2.3.1/">Bootstrap 2.3.1 docs</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="http://www.jasny.net">Jasny.net</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="{{ site.repo }}/issues?state=open">Issues</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="{{ site.repo }}/releases">Releases</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- JS and analytics only. -->
|
||||
{% include footer.html %}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,44 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Meta, title, CSS, favicons, etc. -->
|
||||
{% include header.html %}
|
||||
</head>
|
||||
<body class="bs-docs-home">
|
||||
<a class="sr-only" href="#content">Skip to main content</a>
|
||||
|
||||
<!-- Docs master nav -->
|
||||
{% include nav-main.html %}
|
||||
|
||||
<!-- Page content of course! -->
|
||||
{{ content }}
|
||||
|
||||
<footer class="container" role="contentinfo">
|
||||
{% include ads.html %}
|
||||
|
||||
{% include social-buttons.html %}
|
||||
|
||||
<ul class="bs-masthead-links">
|
||||
<li class="current-version">
|
||||
Currently v{{ site.current_version }}
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ page.base_url }}3.2.0/">v3.2.0 docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ page.base_url }}2.3.1/">v2.3.1 docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ site.repo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);">GitHub project</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ page.base_url }}getting-started/#examples" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);">Examples</a>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
|
||||
<!-- JS and analytics only. -->
|
||||
{% include footer.html %}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
2
assets/js/docs.min.js
vendored
2
assets/js/docs.min.js
vendored
@@ -13,4 +13,4 @@ var Holder=Holder||{};!function(a,b){function c(a,b,c){b=parseInt(b,10),a=parseI
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
|
||||
* details, see http://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
!function(a){a(function(){if(navigator.userAgent.match(/IEMobile\/10\.0/)){var b=document.createElement("style");b.appendChild(document.createTextNode("@-ms-viewport{width:auto!important}")),document.getElementsByTagName("head")[0].appendChild(b)}var c=a(window),d=a(document.body),e=a(".navbar").outerHeight(!0)+10;d.scrollspy({target:".bs-sidebar",offset:e}),c.on("load",function(){d.scrollspy("refresh")}),a(".bs-docs-container [href=#]").click(function(a){a.preventDefault()}),a(".bs-sidebar").stick_in_parent({offset_top:56,spacer:!1})})}(jQuery);
|
||||
!function(a){a(function(){if(navigator.userAgent.match(/IEMobile\/10\.0/)){var b=document.createElement("style");b.appendChild(document.createTextNode("@-ms-viewport{width:auto!important}")),document.getElementsByTagName("head")[0].appendChild(b)}var c=a(window),d=a(document.body),e=a(".navbar").outerHeight(!0)+10;d.scrollspy({target:".bs-sidebar",offset:e}),c.on("load",function(){d.scrollspy("refresh")}),a(".bs-docs-container [href=#]").click(function(a){a.preventDefault()}),a(".bs-sidebar").stick_in_parent({offset_top:56,spacer:!1})})}(jQuery);
|
||||
@@ -1,13 +1,179 @@
|
||||
---
|
||||
layout: default
|
||||
title: Components
|
||||
slug: components
|
||||
lead: "Reusable components to built the user interface."
|
||||
base_url: "../"
|
||||
---
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Meta, title, CSS, favicons, etc. -->
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>
|
||||
|
||||
Components · Jasny Bootstrap
|
||||
|
||||
</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../dist/css/jasny-bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
|
||||
<!-- Documentation extras -->
|
||||
<link href="../assets/css/docs.css" rel="stylesheet">
|
||||
<link href="../assets/css/pygments-manni.css" rel="stylesheet">
|
||||
<!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
|
||||
<script>
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-32388850-1']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
(function() {
|
||||
var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
|
||||
s.type = 'text/javascript';
|
||||
s.async = true;
|
||||
s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
|
||||
t.parentNode.insertBefore(s, t);
|
||||
})();
|
||||
/* ]]> */</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
if (localStorage && localStorage.hide_twbs === 'no') document.body.setAttribute('class', 'bs-twbs-show')
|
||||
</script>
|
||||
|
||||
<a class="sr-only" href="#content">Skip to main content</a>
|
||||
|
||||
<!-- Docs master nav -->
|
||||
<header class="navbar navbar-dark navbar-expand-lg navbar-inverse fixed-top bs-docs-nav" role="banner">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<a href="../" class="navbar-brand">Jasny Bootstrap</a>
|
||||
</div>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNavmenu">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<nav class="collapse navbar-collapse" role="navigation" id="mainNavmenu">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../getting-started">Getting started</a>
|
||||
</li>
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="../components">Components</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav ml-auto">
|
||||
<li>
|
||||
<a href="http://www.jasny.net"><span class="hidden-sm">More by</span> Jasny</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<!-- Navmenu
|
||||
<!-- Docs page layout -->
|
||||
<div class="bs-header" id="content">
|
||||
<div class="container">
|
||||
<h1>Components</h1>
|
||||
<p>Reusable components to built the user interface.</p>
|
||||
<!-- <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" alt="Arnold Daniels">
|
||||
<div class="aboutme-text">
|
||||
<span class="aboutme-title">Looking for a developer?</span>
|
||||
I'm available for freelance work, I want to hear about your projects.
|
||||
<span class="aboutme-name">- Arnold Daniels</span>
|
||||
</div>
|
||||
</a>
|
||||
</div> -->
|
||||
|
||||
|
||||
<div id="carbonads-container">
|
||||
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=jansy" id="_carbonads_js"></script>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container bs-docs-container">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="bs-sidebar hidden-print" role="complementary">
|
||||
<ul class="nav bs-sidenav flex-column">
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#navmenu">Navmenu</a>
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a class="nav-link" href="#navmenu-default">Default navmenu</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#navmenu-fixed">Fixed to left or right</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#navmenu-offcanvas">Off canvas</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#navmenu-inverted">Inverted navmenu</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#alerts">Alerts</a>
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a class="nav-link" href="#alerts-fixed">Fixed to top / bottom</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#buttons">Buttons</a>
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a class="nav-link" href="#buttons-labels">Labels</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#offcanvas">Off canvas</a>
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a class="nav-link" href="#offcanvas-examples">Examples</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#offcanvas-usage">Usage</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#rowlink">Row link</a>
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a class="nav-link" href="#rowlink-examples">Examples</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#rowlink-usage">Usage</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#fileinput">File input</a>
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a class="nav-link" href="#fileinput-examples">Examples</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#fileinput-usage">Usage</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-9" role="main">
|
||||
<!-- Navmenu
|
||||
================================================== -->
|
||||
<div class="bs-docs-section">
|
||||
<div class="pb-2 mt-4 mb-2 border-bottom">
|
||||
@@ -42,26 +208,24 @@ base_url: "../"
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<nav class="navmenu navmenu-default" role="navigation">
|
||||
<a class="navmenu-brand" href="#">Brand</a>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><nav class="navmenu navmenu-default" role="navigation">
|
||||
<a class="navmenu-brand" href="#">Brand</a>
|
||||
|
||||
<ul class="nav navmenu-nav flex-column">
|
||||
<li class="nav-item active"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu navmenu-nav" role="menu">
|
||||
<li class="nav-item"><a class="nav-link" href="#">Action</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Another action</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Something else here</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Separated link</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">One more separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endhighlight %}
|
||||
<ul class="nav navmenu-nav flex-column">
|
||||
<li class="nav-item active"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu navmenu-nav" role="menu">
|
||||
<li class="nav-item"><a class="nav-link" href="#">Action</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Another action</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Something else here</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Separated link</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">One more separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav></code></pre></figure>
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Make navmenus accessible</h4>
|
||||
@@ -81,22 +245,18 @@ base_url: "../"
|
||||
</ul>
|
||||
</nav>
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
<nav class="navmenu navmenu-default navmenu-fixed-left offcanvas-sm" role="navigation">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><nav class="navmenu navmenu-default navmenu-fixed-left offcanvas-sm" role="navigation">
|
||||
...
|
||||
</nav>
|
||||
{% endhighlight %}
|
||||
</nav></code></pre></figure>
|
||||
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<h4>Body padding required</h4>
|
||||
<p>The fixed navmenu will overlay your other content, unless you add <code>padding</code> to the left or right of the <code><body></code>. Try out your own values or use our snippet below. Tip: By default, the navmenu is 300px wide.</p>
|
||||
{% highlight css %}
|
||||
@media (min-width: 992px) {
|
||||
<figure class="highlight"><pre><code class="language-css" data-lang="css">@media (min-width: 992px) {
|
||||
body {
|
||||
padding-left: 300px;
|
||||
}
|
||||
}
|
||||
{% endhighlight %}
|
||||
}</code></pre></figure>
|
||||
<p>Make sure to include this <strong>after</strong> the Jasny Bootstrap CSS.</p>
|
||||
</div>
|
||||
|
||||
@@ -127,17 +287,15 @@ base_url: "../"
|
||||
</div>
|
||||
</div><!-- /example -->
|
||||
|
||||
{% highlight html %}
|
||||
<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
|
||||
...
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
<header class="navbar navbar-light bg-light fixed-top">
|
||||
<button class="navbar-toggler" type="button" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</header>
|
||||
{% endhighlight %}
|
||||
<header class="navbar navbar-light bg-light fixed-top">
|
||||
<button class="navbar-toggler" type="button" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</header></code></pre></figure>
|
||||
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<h4>Examples</h4>
|
||||
@@ -157,11 +315,9 @@ base_url: "../"
|
||||
</ul>
|
||||
</nav>
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
<nav class="navmenu navmenu-inverse" role="navigation">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><nav class="navmenu navmenu-inverse" role="navigation">
|
||||
...
|
||||
</nav>
|
||||
{% endhighlight %}
|
||||
</nav></code></pre></figure>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -180,11 +336,9 @@ base_url: "../"
|
||||
<strong>Success!</strong> Your action has been completed successfully.
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="alert alert-success alert-fixed-top">
|
||||
<strong>Success!</strong> Your action has been completed successfully.
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><div class="alert alert-success alert-fixed-top">
|
||||
<strong>Success!</strong> Your action has been completed successfully.
|
||||
</div></code></pre></figure>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -204,19 +358,17 @@ base_url: "../"
|
||||
<button type="button" class="btn btn-labeled btn-success"><span class="btn-label"><i class="fa fa-check"></i></span>Success</button>
|
||||
<button type="button" class="btn btn-labeled btn-danger"><span class="btn-label"><i class="fa fa-times"></i></span>Danger</button>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<!-- Standard button with label -->
|
||||
<button type="button" class="btn btn-labeled btn-secondary"><span class="btn-label"><i class="fa fa-arrow-left"></i></span>Left</button>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><!-- Standard button with label -->
|
||||
<button type="button" class="btn btn-labeled btn-secondary"><span class="btn-label"><i class="fa fa-arrow-left"></i></span>Left</button>
|
||||
|
||||
<!-- Standard button with label on the right side -->
|
||||
<button type="button" class="btn btn-labeled btn-secondary">Right<span class="btn-label btn-label-right"><i class="fa fa-arrow-right"></i></span></button>
|
||||
<!-- Standard button with label on the right side -->
|
||||
<button type="button" class="btn btn-labeled btn-secondary">Right<span class="btn-label btn-label-right"><i class="fa fa-arrow-right"></i></span></button>
|
||||
|
||||
<!-- Success button with label -->
|
||||
<button type="button" class="btn btn-labeled btn-success"><span class="btn-label"><i class="fa fa-check"></i></span>Success</button>
|
||||
<!-- Success button with label -->
|
||||
<button type="button" class="btn btn-labeled btn-success"><span class="btn-label"><i class="fa fa-check"></i></span>Success</button>
|
||||
|
||||
<!-- Danger button with label -->
|
||||
<button type="button" class="btn btn-labeled btn-danger"><span class="btn-label"><i class="fa fa-times"></i></span>Danger</button>
|
||||
{% endhighlight %}
|
||||
<!-- Danger button with label -->
|
||||
<button type="button" class="btn btn-labeled btn-danger"><span class="btn-label"><i class="fa fa-times"></i></span>Danger</button></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -255,23 +407,21 @@ base_url: "../"
|
||||
</div>
|
||||
</div><!-- /example -->
|
||||
|
||||
{% highlight html %}
|
||||
<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
|
||||
<a class="navmenu-brand" href="#">Brand</a>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
|
||||
<a class="navmenu-brand" href="#">Brand</a>
|
||||
|
||||
<ul class="nav navmenu-nav flex-column">
|
||||
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<ul class="nav navmenu-nav flex-column">
|
||||
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<header class="navbar navbar-light bg-light fixed-top">
|
||||
<button class="navbar-toggler" type="button" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</header>
|
||||
{% endhighlight %}
|
||||
<header class="navbar navbar-light bg-light fixed-top">
|
||||
<button class="navbar-toggler" type="button" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</header></code></pre></figure>
|
||||
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<h4>Examples</h4>
|
||||
@@ -291,9 +441,7 @@ base_url: "../"
|
||||
|
||||
<h3>Via JavaScript</h3>
|
||||
<p>Call the offcanvas via javascript:</p>
|
||||
{% highlight js %}
|
||||
$('.navmenu').offcanvas()
|
||||
{% endhighlight %}
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js">$('.navmenu').offcanvas()</code></pre></figure>
|
||||
|
||||
<h3>Options</h3>
|
||||
|
||||
@@ -447,18 +595,16 @@ $('.navmenu').offcanvas()
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
{% highlight html %}
|
||||
<table class="table table-striped table-bordered table-hover">
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Description</th><th>Actions</th></tr>
|
||||
</thead>
|
||||
<tbody data-link="row" class="rowlink">
|
||||
<tr><td><a href="#fileinput">File input</a></td><td>The file input plugin allows you to create a visually appealing file widgets.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
|
||||
<tr><td><a href="http://www.jasny.net/" target="_blank">jasny.net</a></td><td>Shared knowledge of Arnold Daniels aka Jasny.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
|
||||
<tr><td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a></td><td>Toggle a modal via JavaScript by clicking this row.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{% endhighlight %}
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><table class="table table-striped table-bordered table-hover">
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Description</th><th>Actions</th></tr>
|
||||
</thead>
|
||||
<tbody data-link="row" class="rowlink">
|
||||
<tr><td><a href="#fileinput">File input</a></td><td>The file input plugin allows you to create a visually appealing file widgets.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
|
||||
<tr><td><a href="http://www.jasny.net/" target="_blank">jasny.net</a></td><td>Shared knowledge of Arnold Daniels aka Jasny.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
|
||||
<tr><td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a></td><td>Toggle a modal via JavaScript by clicking this row.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
|
||||
</tbody>
|
||||
</table></code></pre></figure>
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
@@ -469,9 +615,7 @@ $('.navmenu').offcanvas()
|
||||
|
||||
<h3>Via JavaScript</h3>
|
||||
<p>Call the row link via javascript:</p>
|
||||
{% highlight js %}
|
||||
$('tbody.rowlink').rowlink()
|
||||
{% endhighlight %}
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js">$('tbody.rowlink').rowlink()</code></pre></figure>
|
||||
|
||||
<h3>Options</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
@@ -513,15 +657,11 @@ $('tbody.rowlink').rowlink()
|
||||
In first of the following examples one can easily add support for file icon, how it previously was, untill Bootstrap dropped Glyphicons. Include the link to iconic font on the page, and replace the following line
|
||||
</p>
|
||||
|
||||
{% highlight html %}
|
||||
<span class="fileinput-filename"></span>
|
||||
{% endhighlight %}
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="fileinput-filename"></span></code></pre></figure>
|
||||
|
||||
<p>with the following (<code>glyphicon</code> classes should be changed to the ones that you use):</p>
|
||||
|
||||
{% highlight html %}
|
||||
<i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename with-icon"></span>
|
||||
{% endhighlight %}
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename with-icon"></span></code></pre></figure>
|
||||
|
||||
<h3>File input widgets</h3>
|
||||
|
||||
@@ -545,24 +685,22 @@ $('tbody.rowlink').rowlink()
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
|
||||
<div class="form-control" data-trigger="fileinput">
|
||||
<span class="fileinput-filename"></span>
|
||||
</div>
|
||||
<span class="input-group-append">
|
||||
<span class="input-group-text fileinput-exists" data-dismiss="fileinput">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><div class="fileinput fileinput-new input-group" data-provides="fileinput">
|
||||
<div class="form-control" data-trigger="fileinput">
|
||||
<span class="fileinput-filename"></span>
|
||||
</div>
|
||||
<span class="input-group-append">
|
||||
<span class="input-group-text fileinput-exists" data-dismiss="fileinput">
|
||||
Remove
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="input-group-text btn-file">
|
||||
<span class="fileinput-new">Select file</span>
|
||||
<span class="fileinput-exists">Change</span>
|
||||
<input type="file" name="..." multiple>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
<span class="input-group-text btn-file">
|
||||
<span class="fileinput-new">Select file</span>
|
||||
<span class="fileinput-exists">Change</span>
|
||||
<input type="file" name="..." multiple>
|
||||
</span>
|
||||
</span>
|
||||
</div></code></pre></figure>
|
||||
|
||||
<div class="bs-example">
|
||||
|
||||
@@ -577,17 +715,15 @@ $('tbody.rowlink').rowlink()
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="fileinput fileinput-new" data-provides="fileinput">
|
||||
<span class="btn btn-outline-secondary btn-file">
|
||||
<span class="fileinput-new">Select file</span>
|
||||
<span class="fileinput-exists">Change</span>
|
||||
<input type="file" name="..." multiple>
|
||||
</span>
|
||||
<span class="fileinput-filename"></span>
|
||||
<a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">×</a>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><div class="fileinput fileinput-new" data-provides="fileinput">
|
||||
<span class="btn btn-outline-secondary btn-file">
|
||||
<span class="fileinput-new">Select file</span>
|
||||
<span class="fileinput-exists">Change</span>
|
||||
<input type="file" name="..." multiple>
|
||||
</span>
|
||||
<span class="fileinput-filename"></span>
|
||||
<a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
|
||||
</div></code></pre></figure>
|
||||
|
||||
<h3>Image upload widgets</h3>
|
||||
<p>When uploading an image, it's possible to show a thumbnail instead of the filename.</p>
|
||||
@@ -606,19 +742,17 @@ $('tbody.rowlink').rowlink()
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="fileinput fileinput-new" data-provides="fileinput">
|
||||
<div class="fileinput-preview img-thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
|
||||
<div>
|
||||
<span class="btn btn-outline-secondary btn-file">
|
||||
<span class="fileinput-new">Select image</span>
|
||||
<span class="fileinput-exists">Change</span>
|
||||
<input type="file" name="...">
|
||||
</span>
|
||||
<a href="#" class="btn btn-outline-secondary fileinput-exists" data-dismiss="fileinput">Remove</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><div class="fileinput fileinput-new" data-provides="fileinput">
|
||||
<div class="fileinput-preview img-thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
|
||||
<div>
|
||||
<span class="btn btn-outline-secondary btn-file">
|
||||
<span class="fileinput-new">Select image</span>
|
||||
<span class="fileinput-exists">Change</span>
|
||||
<input type="file" name="...">
|
||||
</span>
|
||||
<a href="#" class="btn btn-outline-secondary fileinput-exists" data-dismiss="fileinput">Remove</a>
|
||||
</div>
|
||||
</div></code></pre></figure>
|
||||
|
||||
<div class="bs-example">
|
||||
|
||||
@@ -634,18 +768,16 @@ $('tbody.rowlink').rowlink()
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="fileinput fileinput-new" data-provides="fileinput">
|
||||
<div class="fileinput-new img-thumbnail" style="width: 200px; height: 150px;">
|
||||
<img data-src="holder.js/100%x100%" alt="...">
|
||||
</div>
|
||||
<div class="fileinput-preview fileinput-exists img-thumbnail" style="max-width: 200px; max-height: 150px;"></div>
|
||||
<div>
|
||||
<span class="btn btn-outline-secondary btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
|
||||
<a href="#" class="btn btn-outline-secondary fileinput-exists" data-dismiss="fileinput">Remove</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><div class="fileinput fileinput-new" data-provides="fileinput">
|
||||
<div class="fileinput-new img-thumbnail" style="width: 200px; height: 150px;">
|
||||
<img data-src="holder.js/100%x100%" alt="...">
|
||||
</div>
|
||||
<div class="fileinput-preview fileinput-exists img-thumbnail" style="max-width: 200px; max-height: 150px;"></div>
|
||||
<div>
|
||||
<span class="btn btn-outline-secondary btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
|
||||
<a href="#" class="btn btn-outline-secondary fileinput-exists" data-dismiss="fileinput">Remove</a>
|
||||
</div>
|
||||
</div></code></pre></figure>
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<p>Image preview only works in IE10+, FF3.6+, Safari6.0+, Chrome6.0+ and Opera11.1+. In older browsers the filename is shown instead.</p>
|
||||
@@ -742,3 +874,66 @@ $('tbody.rowlink').rowlink()
|
||||
</table>
|
||||
</div><!-- ./bs-table-responsive -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer
|
||||
================================================== -->
|
||||
<footer class="bs-footer" role="contentinfo">
|
||||
<div class="container">
|
||||
<div class="bs-social">
|
||||
<ul class="bs-social-buttons">
|
||||
<li>
|
||||
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=jasny&repo=bootstrap&type=watch&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=jasny&repo=bootstrap&type=fork&count=true" width="102" height="20" title="Fork on GitHub"></iframe>
|
||||
</li>
|
||||
<li class="follow-btn">
|
||||
<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://jasny.github.io/bootstrap" data-count="horizontal" data-via="ArnoldDaniels">Tweet</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="FlattrButton" style="display:none;" rev="flattr;button:compact;" href="http://github.com/jasny/bootstrap">Flattr</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<p>Jasny Bootstrap is a fork of <a href="http://getbootstrap.com/" target="_blank">vanilla 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>Currently v4.0.0</li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="../2.3.1/">Bootstrap 2.3.1 docs</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="http://www.jasny.net">Jasny.net</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="https://github.com/jasny/bootstrap/issues?state=open">Issues</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="https://github.com/jasny/bootstrap/releases">Releases</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- JS and analytics only. -->
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://code.jquery.com/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/sticky-kit/1.1.3/sticky-kit.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
|
||||
<script src="../dist/js/jasny-bootstrap.min.js"></script>
|
||||
|
||||
<script src="http://platform.twitter.com/widgets.js"></script>
|
||||
<script src="../assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
776
dist/css/jasny-bootstrap.css
vendored
776
dist/css/jasny-bootstrap.css
vendored
@@ -1,776 +0,0 @@
|
||||
/*!
|
||||
* Jasny Bootstrap v4.0.0 (http://jasny.github.io/bootstrap)
|
||||
* Copyright 2012-2019 Arnold Daniels
|
||||
* Licensed under ()
|
||||
*/
|
||||
|
||||
/*!
|
||||
* Jasny Bootstrap v3.1.3 (http://jasny.github.io/bootstrap)
|
||||
* Copyright 2012-2015 Arnold Daniels
|
||||
* Licensed under Apache-2.0 (https://github.com/jasny/bootstrap/blob/master/LICENSE)
|
||||
*
|
||||
*/
|
||||
.container-smooth {
|
||||
max-width: 1170px;
|
||||
}
|
||||
@media (min-width: 1px) {
|
||||
.container-smooth {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.btn-labeled {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.btn-labeled.btn-block {
|
||||
line-height: 32px;
|
||||
text-indent: -12px;
|
||||
}
|
||||
.btn-labeled.btn-block.btn-lg {
|
||||
line-height: 42px;
|
||||
text-indent: -16px;
|
||||
}
|
||||
.btn-labeled.btn-block.btn-sm {
|
||||
line-height: 30px;
|
||||
text-indent: -10px;
|
||||
}
|
||||
.btn-labeled.btn-block.btn-xs {
|
||||
line-height: 22px;
|
||||
text-indent: -5px;
|
||||
}
|
||||
.btn-labeled.btn-block .btn-label {
|
||||
float: left;
|
||||
line-height: 20px;
|
||||
text-indent: 0;
|
||||
}
|
||||
.btn-label {
|
||||
position: relative;
|
||||
left: -12px;
|
||||
display: inline-block;
|
||||
padding: 5px 12px 7px 12px;
|
||||
background: transparent;
|
||||
background: rgba(0, 0, 0, .15);
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
.btn-label.btn-label-right {
|
||||
right: -12px;
|
||||
left: auto;
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
.btn-lg .btn-label {
|
||||
left: -16px;
|
||||
padding: 9px 16px 11px 16px;
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
.btn-lg .btn-label.btn-label-right {
|
||||
right: -16px;
|
||||
left: auto;
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
.btn-sm .btn-label {
|
||||
left: -10px;
|
||||
padding: 4px 10px 6px 10px;
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
.btn-sm .btn-label.btn-label-right {
|
||||
right: -10px;
|
||||
left: auto;
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
.btn-xs .btn-label {
|
||||
left: -5px;
|
||||
padding: 0 5px 2px 5px;
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
.btn-xs .btn-label.btn-label-right {
|
||||
right: -5px;
|
||||
left: auto;
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
.btn-group .btn-labeled:not(:first-child) .btn-label:not(.btn-label-right) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.btn-group .btn-labeled:not(:last-child) .btn-label.btn-label-right {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.nav-tabs-bottom {
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.nav-tabs-bottom > li {
|
||||
margin-top: -1px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.nav-tabs-bottom > li > a {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
.nav-tabs-bottom > li > a:hover,
|
||||
.nav-tabs-bottom > li > a:focus,
|
||||
.nav-tabs-bottom > li.active > a,
|
||||
.nav-tabs-bottom > li.active > a:hover,
|
||||
.nav-tabs-bottom > li.active > a:focus {
|
||||
border: 1px solid #ddd;
|
||||
border-top-color: transparent;
|
||||
}
|
||||
.nav-tabs-left {
|
||||
border-right: 1px solid #ddd;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.nav-tabs-left > li {
|
||||
float: none;
|
||||
margin-right: -1px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.nav-tabs-left > li > a {
|
||||
margin-right: 0;
|
||||
margin-bottom: 2px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.nav-tabs-left > li > a:hover,
|
||||
.nav-tabs-left > li > a:focus,
|
||||
.nav-tabs-left > li.active > a,
|
||||
.nav-tabs-left > li.active > a:hover,
|
||||
.nav-tabs-left > li.active > a:focus {
|
||||
border: 1px solid #ddd;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
.row > .nav-tabs-left {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-right: 0;
|
||||
padding-left: 15px;
|
||||
margin-right: -1px;
|
||||
}
|
||||
.row > .nav-tabs-left + .tab-content {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
.nav-tabs-right {
|
||||
border-bottom: 0;
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
.nav-tabs-right > li {
|
||||
float: none;
|
||||
margin-bottom: 0;
|
||||
margin-left: -1px;
|
||||
}
|
||||
.nav-tabs-right > li > a {
|
||||
margin-bottom: 2px;
|
||||
margin-left: 0;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
.nav-tabs-right > li > a:hover,
|
||||
.nav-tabs-right > li > a:focus,
|
||||
.nav-tabs-right > li.active > a,
|
||||
.nav-tabs-right > li.active > a:hover,
|
||||
.nav-tabs-right > li.active > a:focus {
|
||||
border: 1px solid #ddd;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
.row > .nav-tabs-right {
|
||||
padding-right: 15px;
|
||||
padding-left: 0;
|
||||
}
|
||||
.navmenu,
|
||||
.navbar-offcanvas {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.lockIphone {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
-webkit-overflow-scrolling: auto;
|
||||
}
|
||||
.navbar-fixed-top,
|
||||
.navbar-fixed-bottom {
|
||||
-webkit-transform: none;
|
||||
-o-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
.navmenu-fixed-left,
|
||||
.navmenu-fixed-right,
|
||||
.navbar-offcanvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1051;
|
||||
overflow-y: auto;
|
||||
border-radius: 0;
|
||||
}
|
||||
.navmenu-fixed-left .dropdown .dropdown-menu,
|
||||
.navmenu-fixed-right .dropdown .dropdown-menu {
|
||||
position: static !important;
|
||||
float: none;
|
||||
background: rgba(0, 0, 0, .02);
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
border-radius: 0;
|
||||
transform: none !important;
|
||||
}
|
||||
.navmenu-fixed-left .dropdown .dropdown-menu .nav-link,
|
||||
.navmenu-fixed-right .dropdown .dropdown-menu .nav-link {
|
||||
padding: .35rem 1rem .35rem 1.3rem;
|
||||
}
|
||||
.navmenu-fixed-left,
|
||||
.navbar-offcanvas.navmenu-fixed-left {
|
||||
right: auto!important;
|
||||
left: 0;
|
||||
border-width: 0 1px 0 0;
|
||||
}
|
||||
.navmenu-fixed-right,
|
||||
.navbar-offcanvas {
|
||||
right: 0;
|
||||
left: auto!important;
|
||||
border-width: 0 0 0 1px;
|
||||
}
|
||||
.navmenu-nav {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.navmenu-nav.dropdown-menu {
|
||||
position: static!important;
|
||||
float: none;
|
||||
padding-top: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
transform: none!important;
|
||||
}
|
||||
.navmenu-nav.dropdown-menu li > a {
|
||||
white-space: normal;
|
||||
}
|
||||
.navbar-offcanvas .navbar-nav {
|
||||
margin: 0;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.navbar-offcanvas {
|
||||
width: auto;
|
||||
border-top: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
.navbar-offcanvas.offcanvas {
|
||||
position: static;
|
||||
display: block !important;
|
||||
height: auto !important;
|
||||
padding-bottom: 0;
|
||||
overflow: visible !important;
|
||||
}
|
||||
.navbar-offcanvas .navbar-nav.navbar-left:first-child {
|
||||
margin-left: -15px;
|
||||
}
|
||||
.navbar-offcanvas .navbar-nav.navbar-right:last-child {
|
||||
margin-right: -15px;
|
||||
}
|
||||
.navbar-offcanvas .navmenu-brand {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.navmenu-brand {
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
margin: 10px 0;
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.navmenu-brand:hover,
|
||||
.navmenu-brand:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
.navmenu-default,
|
||||
.navbar-default .navbar-offcanvas {
|
||||
background-color: #f8f8f8;
|
||||
border-color: #e7e7e7;
|
||||
}
|
||||
.navmenu-default .navmenu-brand,
|
||||
.navbar-default .navbar-offcanvas .navmenu-brand {
|
||||
color: #777;
|
||||
}
|
||||
.navmenu-default .navmenu-brand:hover,
|
||||
.navbar-default .navbar-offcanvas .navmenu-brand:hover,
|
||||
.navmenu-default .navmenu-brand:focus,
|
||||
.navbar-default .navbar-offcanvas .navmenu-brand:focus {
|
||||
color: #5e5e5e;
|
||||
background-color: transparent;
|
||||
}
|
||||
.navmenu-default .navmenu-text,
|
||||
.navbar-default .navbar-offcanvas .navmenu-text {
|
||||
color: #777;
|
||||
}
|
||||
.navmenu-default .navmenu-nav > .dropdown > a:hover .caret,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .dropdown > a:hover .caret,
|
||||
.navmenu-default .navmenu-nav > .dropdown > a:focus .caret,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .dropdown > a:focus .caret {
|
||||
border-top-color: #333;
|
||||
border-bottom-color: #333;
|
||||
}
|
||||
.navmenu-default .navmenu-nav > .open > a,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a,
|
||||
.navmenu-default .navmenu-nav > .open > a:hover,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a:hover,
|
||||
.navmenu-default .navmenu-nav > .open > a:focus,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a:focus {
|
||||
color: #555;
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
.navmenu-default .navmenu-nav > .open > a .caret,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a .caret,
|
||||
.navmenu-default .navmenu-nav > .open > a:hover .caret,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a:hover .caret,
|
||||
.navmenu-default .navmenu-nav > .open > a:focus .caret,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a:focus .caret {
|
||||
border-top-color: #555;
|
||||
border-bottom-color: #555;
|
||||
}
|
||||
.navmenu-default .navmenu-nav > .dropdown > a .caret,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .dropdown > a .caret {
|
||||
border-top-color: #777;
|
||||
border-bottom-color: #777;
|
||||
}
|
||||
.navmenu-default .navmenu-nav.dropdown-menu,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu {
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
.navmenu-default .navmenu-nav.dropdown-menu > .divider,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu > .divider {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
.navmenu-default .navmenu-nav.dropdown-menu > .active > a,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a,
|
||||
.navmenu-default .navmenu-nav.dropdown-menu > .active > a:hover,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a:hover,
|
||||
.navmenu-default .navmenu-nav.dropdown-menu > .active > a:focus,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a:focus {
|
||||
background-color: #d7d7d7;
|
||||
}
|
||||
.navmenu-default .navmenu-nav > li > a,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > li > a {
|
||||
color: #777;
|
||||
}
|
||||
.navmenu-default .navmenu-nav > li > a:hover,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > li > a:hover,
|
||||
.navmenu-default .navmenu-nav > li > a:focus,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > li > a:focus {
|
||||
color: #333;
|
||||
background-color: transparent;
|
||||
}
|
||||
.navmenu-default .navmenu-nav > .active > a,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .active > a,
|
||||
.navmenu-default .navmenu-nav > .active > a:hover,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .active > a:hover,
|
||||
.navmenu-default .navmenu-nav > .active > a:focus,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .active > a:focus {
|
||||
color: #555;
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
.navmenu-default .navmenu-nav > .disabled > a,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .disabled > a,
|
||||
.navmenu-default .navmenu-nav > .disabled > a:hover,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .disabled > a:hover,
|
||||
.navmenu-default .navmenu-nav > .disabled > a:focus,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .disabled > a:focus {
|
||||
color: #ccc;
|
||||
background-color: transparent;
|
||||
}
|
||||
.navmenu-inverse,
|
||||
.navbar-inverse .navbar-offcanvas {
|
||||
background-color: #222;
|
||||
border-color: #080808;
|
||||
}
|
||||
.navmenu-inverse .navmenu-brand,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-brand {
|
||||
color: #999;
|
||||
}
|
||||
.navmenu-inverse .navmenu-brand:hover,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-brand:hover,
|
||||
.navmenu-inverse .navmenu-brand:focus,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-brand:focus {
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
}
|
||||
.navmenu-inverse .navmenu-text,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-text {
|
||||
color: #999;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav > .dropdown > a:hover .caret,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .dropdown > a:hover .caret,
|
||||
.navmenu-inverse .navmenu-nav > .dropdown > a:focus .caret,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .dropdown > a:focus .caret {
|
||||
border-top-color: #fff;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav > .open > a,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a,
|
||||
.navmenu-inverse .navmenu-nav > .open > a:hover,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a:hover,
|
||||
.navmenu-inverse .navmenu-nav > .open > a:focus,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a:focus {
|
||||
color: #fff;
|
||||
background-color: #080808;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav > .open > a .caret,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a .caret,
|
||||
.navmenu-inverse .navmenu-nav > .open > a:hover .caret,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a:hover .caret,
|
||||
.navmenu-inverse .navmenu-nav > .open > a:focus .caret,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a:focus .caret {
|
||||
border-top-color: #fff;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav > .dropdown > a .caret,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .dropdown > a .caret {
|
||||
border-top-color: #999;
|
||||
border-bottom-color: #999;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav.dropdown-menu,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu {
|
||||
background-color: #080808;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav.dropdown-menu > .divider,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu > .divider {
|
||||
background-color: #222;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav.dropdown-menu > .active > a,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a,
|
||||
.navmenu-inverse .navmenu-nav.dropdown-menu > .active > a:hover,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a:hover,
|
||||
.navmenu-inverse .navmenu-nav.dropdown-menu > .active > a:focus,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a:focus {
|
||||
background-color: #000;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav > li > a,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > li > a {
|
||||
color: #999;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav > li > a:hover,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > li > a:hover,
|
||||
.navmenu-inverse .navmenu-nav > li > a:focus,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > li > a:focus {
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav > .active > a,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .active > a,
|
||||
.navmenu-inverse .navmenu-nav > .active > a:hover,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .active > a:hover,
|
||||
.navmenu-inverse .navmenu-nav > .active > a:focus,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .active > a:focus {
|
||||
color: #fff;
|
||||
background-color: #080808;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav > .disabled > a,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .disabled > a,
|
||||
.navmenu-inverse .navmenu-nav > .disabled > a:hover,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .disabled > a:hover,
|
||||
.navmenu-inverse .navmenu-nav > .disabled > a:focus,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .disabled > a:focus {
|
||||
color: #444;
|
||||
background-color: transparent;
|
||||
}
|
||||
.alert-fixed-top,
|
||||
.alert-fixed-bottom {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
z-index: 1035;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.alert-fixed-top,
|
||||
.alert-fixed-bottom {
|
||||
left: 50%;
|
||||
width: 992px;
|
||||
margin-left: -496px;
|
||||
}
|
||||
}
|
||||
.alert-fixed-top {
|
||||
top: 0;
|
||||
border-width: 0 0 1px 0;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.alert-fixed-top {
|
||||
border-width: 0 1px 1px 1px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
}
|
||||
.alert-fixed-bottom {
|
||||
bottom: 0;
|
||||
border-width: 1px 0 0 0;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.alert-fixed-bottom {
|
||||
border-width: 1px 1px 0 1px;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
.offcanvas {
|
||||
display: none;
|
||||
}
|
||||
.offcanvas.in {
|
||||
display: block;
|
||||
}
|
||||
.offcanvas .dropdown .dropdown-menu {
|
||||
position: static !important;
|
||||
float: none;
|
||||
background: rgba(0, 0, 0, .02);
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
border-radius: 0;
|
||||
transform: none !important;
|
||||
}
|
||||
.offcanvas .dropdown .dropdown-menu .nav-link {
|
||||
padding: .35rem 1rem .35rem 1.3rem;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.offcanvas-xs {
|
||||
display: none;
|
||||
}
|
||||
.offcanvas-xs.in {
|
||||
display: block;
|
||||
}
|
||||
.offcanvas-xs .dropdown .dropdown-menu {
|
||||
position: static !important;
|
||||
float: none;
|
||||
background: rgba(0, 0, 0, .02);
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
border-radius: 0;
|
||||
transform: none !important;
|
||||
}
|
||||
.offcanvas-xs .dropdown .dropdown-menu .nav-link {
|
||||
padding: .35rem 1rem .35rem 1.3rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
.offcanvas-sm {
|
||||
display: none;
|
||||
}
|
||||
.offcanvas-sm.in {
|
||||
display: block;
|
||||
}
|
||||
.offcanvas-sm .dropdown .dropdown-menu {
|
||||
position: static !important;
|
||||
float: none;
|
||||
background: rgba(0, 0, 0, .02);
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
border-radius: 0;
|
||||
transform: none !important;
|
||||
}
|
||||
.offcanvas-sm .dropdown .dropdown-menu .nav-link {
|
||||
padding: .35rem 1rem .35rem 1.3rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1199px) {
|
||||
.offcanvas-md {
|
||||
display: none;
|
||||
}
|
||||
.offcanvas-md.in {
|
||||
display: block;
|
||||
}
|
||||
.offcanvas-md .dropdown .dropdown-menu {
|
||||
position: static !important;
|
||||
float: none;
|
||||
background: rgba(0, 0, 0, .02);
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
border-radius: 0;
|
||||
transform: none !important;
|
||||
}
|
||||
.offcanvas-md .dropdown .dropdown-menu .nav-link {
|
||||
padding: .35rem 1rem .35rem 1.3rem;
|
||||
}
|
||||
}
|
||||
.offcanvas-lg {
|
||||
display: none;
|
||||
}
|
||||
.offcanvas-lg.in {
|
||||
display: block;
|
||||
}
|
||||
.offcanvas-lg .dropdown .dropdown-menu {
|
||||
position: static !important;
|
||||
float: none;
|
||||
background: rgba(0, 0, 0, .02);
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
border-radius: 0;
|
||||
transform: none !important;
|
||||
}
|
||||
.offcanvas-lg .dropdown .dropdown-menu .nav-link {
|
||||
padding: .35rem 1rem .35rem 1.3rem;
|
||||
}
|
||||
.canvas-sliding {
|
||||
-webkit-transition: top .35s, left .35s, bottom .35s, right .35s;
|
||||
transition: top .35s, left .35s, bottom .35s, right .35s;
|
||||
}
|
||||
.offcanvas-clone {
|
||||
position: absolute !important;
|
||||
top: auto !important;
|
||||
right: 0 !important;
|
||||
bottom: 0 !important;
|
||||
left: auto !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
overflow: hidden !important;
|
||||
border: none !important;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.modal-backdrop.allow-navbar {
|
||||
z-index: 1029;
|
||||
}
|
||||
.limit-backdrop {
|
||||
overflow: hidden!important;
|
||||
}
|
||||
.limit-backdrop .modal-backdrop {
|
||||
position: absolute;
|
||||
}
|
||||
.table.rowlink td:not(.rowlink-skip),
|
||||
.table .rowlink td:not(.rowlink-skip) {
|
||||
cursor: pointer;
|
||||
}
|
||||
.table.rowlink td:not(.rowlink-skip) a,
|
||||
.table .rowlink td:not(.rowlink-skip) a {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
.table-hover.rowlink tr:hover td,
|
||||
.table-hover .rowlink tr:hover td {
|
||||
background-color: #cfcfcf;
|
||||
}
|
||||
.btn-file {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.btn-file > input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
font-size: 23px;
|
||||
cursor: pointer;
|
||||
filter: alpha(opacity=0);
|
||||
opacity: 0;
|
||||
|
||||
direction: ltr;
|
||||
}
|
||||
.btn-file > input::-webkit-file-upload-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
.fileinput {
|
||||
display: inline-block;
|
||||
max-width: 100vw;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
.fileinput .form-control {
|
||||
display: inline-block;
|
||||
padding-top: 7px;
|
||||
padding-bottom: 5px;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
cursor: text;
|
||||
}
|
||||
.fileinput .img-thumbnail {
|
||||
display: inline-block;
|
||||
margin-bottom: 5px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.fileinput .img-thumbnail > img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
max-height: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
.fileinput .btn {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.fileinput .form-group {
|
||||
overflow: hidden;
|
||||
}
|
||||
.fileinput .form-group .fileinput-filename {
|
||||
width: 90%;
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
.fileinput-exists .fileinput-new,
|
||||
.fileinput-new .fileinput-exists {
|
||||
display: none;
|
||||
}
|
||||
.fileinput-exists.close {
|
||||
float: none;
|
||||
}
|
||||
.fileinput-inline .fileinput-controls {
|
||||
display: inline;
|
||||
}
|
||||
.fileinput-filename {
|
||||
display: inline-block;
|
||||
max-width: 65%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.form-control .fileinput-filename {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding-left: 10px;
|
||||
white-space: nowrap;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.form-control .fileinput-filename.with-icon {
|
||||
padding-left: 30px;
|
||||
}
|
||||
.fileinput.input-group {
|
||||
display: flex;
|
||||
}
|
||||
.fileinput.input-group > * {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.fileinput.input-group > .btn-file {
|
||||
z-index: 1;
|
||||
}
|
||||
.fileinput .input-group-append .input-group-text:hover {
|
||||
cursor: pointer;
|
||||
background: #d9dcdf;
|
||||
}
|
||||
.form-group.has-warning .fileinput .fileinput-preview {
|
||||
color: #8a6d3b;
|
||||
}
|
||||
.form-group.has-warning .fileinput .img-thumbnail {
|
||||
border-color: #faebcc;
|
||||
}
|
||||
.form-group.has-error .fileinput .fileinput-preview {
|
||||
color: #a94442;
|
||||
}
|
||||
.form-group.has-error .fileinput .img-thumbnail {
|
||||
border-color: #ebccd1;
|
||||
}
|
||||
.form-group.has-success .fileinput .fileinput-preview {
|
||||
color: #3c763d;
|
||||
}
|
||||
.form-group.has-success .fileinput .img-thumbnail {
|
||||
border-color: #d6e9c6;
|
||||
}
|
||||
.input-group-addon:not(:first-child) {
|
||||
border-left: 0;
|
||||
}
|
||||
/*# sourceMappingURL=jasny-bootstrap.css.map */
|
||||
966
dist/js/jasny-bootstrap.js
vendored
966
dist/js/jasny-bootstrap.js
vendored
@@ -1,966 +0,0 @@
|
||||
/*!
|
||||
* Jasny Bootstrap v4.0.0 (http://jasny.github.io/bootstrap)
|
||||
* Copyright 2012-2019 Arnold Daniels
|
||||
* Licensed under ()
|
||||
*/
|
||||
|
||||
if (typeof jQuery === 'undefined') { throw new Error('Jasny Bootstrap\'s JavaScript requires jQuery') }
|
||||
|
||||
/* ========================================================================
|
||||
* Bootstrap: transition.js v4.0.0
|
||||
* http://getbootstrap.com/javascript/#transitions
|
||||
* ========================================================================
|
||||
* Copyright 2011-2014 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* ======================================================================== */
|
||||
|
||||
|
||||
+function ($) {
|
||||
'use strict';
|
||||
|
||||
// CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
|
||||
// ============================================================
|
||||
|
||||
function transitionEnd() {
|
||||
var el = document.createElement('bootstrap')
|
||||
|
||||
var transEndEventNames = {
|
||||
WebkitTransition : 'webkitTransitionEnd',
|
||||
MozTransition : 'transitionend',
|
||||
OTransition : 'oTransitionEnd otransitionend',
|
||||
transition : 'transitionend'
|
||||
}
|
||||
|
||||
for (var name in transEndEventNames) {
|
||||
if (el.style[name] !== undefined) {
|
||||
return { end: transEndEventNames[name] }
|
||||
}
|
||||
}
|
||||
|
||||
return false // explicit for ie8 ( ._.)
|
||||
}
|
||||
|
||||
if ($.support.transition !== undefined) return // Prevent conflict with vanilla Bootstrap
|
||||
|
||||
// http://blog.alexmaccaw.com/css-transitions
|
||||
$.fn.emulateTransitionEnd = function (duration) {
|
||||
var called = false, $el = this
|
||||
$(this).one($.support.transition.end, function () { called = true })
|
||||
var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
|
||||
setTimeout(callback, duration)
|
||||
return this
|
||||
}
|
||||
|
||||
$(function () {
|
||||
$.support.transition = transitionEnd()
|
||||
})
|
||||
|
||||
}(window.jQuery);
|
||||
|
||||
/* ========================================================================
|
||||
* Bootstrap: offcanvas.js v4.0.0
|
||||
* http://jasny.github.io/bootstrap/javascript/#offcanvas
|
||||
* ========================================================================
|
||||
* Copyright 2013-2014 Arnold Daniels
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License")
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
* ======================================================================== */
|
||||
|
||||
+function ($) { "use strict"
|
||||
|
||||
// OFFCANVAS PUBLIC CLASS DEFINITION
|
||||
// =================================
|
||||
var isIphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
|
||||
var OffCanvas = function (element, options) {
|
||||
this.$element = $(element)
|
||||
this.options = $.extend({}, OffCanvas.DEFAULTS, options)
|
||||
this.state = null
|
||||
this.placement = null
|
||||
this.$calcClone = null
|
||||
|
||||
this.calcClone()
|
||||
|
||||
if (this.options.recalc) {
|
||||
$(window).on('resize', $.proxy(this.recalc, this))
|
||||
}
|
||||
|
||||
if (this.options.autohide && !this.options.modal) {
|
||||
var eventName = (navigator.userAgent.match(/(iPad|iPhone)/i) === null) ? 'click' : 'touchstart'
|
||||
$(document).on('click touchstart', $.proxy(this.autohide, this))
|
||||
}
|
||||
|
||||
// Backdrop is added to dropdown on it's open, if device is touchable (or desctop FF, https://github.com/twbs/bootstrap/issues/13748)
|
||||
// and dropdown is not inside .navbar-nav. So we remove it
|
||||
$(this.$element).on('shown.bs.dropdown', $.proxy(function(e) {
|
||||
$(this.$element).find('.dropdown .dropdown-backdrop').remove()
|
||||
}, this))
|
||||
|
||||
if (typeof(this.options.disablescrolling) === "boolean") {
|
||||
this.options.disableScrolling = this.options.disablescrolling
|
||||
delete this.options.disablescrolling
|
||||
}
|
||||
|
||||
if (this.options.toggle) this.toggle()
|
||||
}
|
||||
|
||||
OffCanvas.DEFAULTS = {
|
||||
toggle: true,
|
||||
placement: 'auto',
|
||||
autohide: true,
|
||||
recalc: true,
|
||||
disableScrolling: true,
|
||||
modal: false,
|
||||
backdrop: false,
|
||||
exclude: null
|
||||
}
|
||||
|
||||
OffCanvas.prototype.setWidth = function () {
|
||||
var size = this.$element.outerWidth()
|
||||
var max = $(window).width()
|
||||
max -= 68 //Minimum space between menu and screen edge
|
||||
|
||||
this.$element.css('width', size > max ? max : size)
|
||||
}
|
||||
|
||||
OffCanvas.prototype.offset = function () {
|
||||
switch (this.placement) {
|
||||
case 'left':
|
||||
case 'right': return this.$element.outerWidth()
|
||||
case 'top':
|
||||
case 'bottom': return this.$element.outerHeight()
|
||||
}
|
||||
}
|
||||
|
||||
OffCanvas.prototype.calcPlacement = function () {
|
||||
if (this.options.placement !== 'auto') {
|
||||
this.placement = this.options.placement
|
||||
return
|
||||
}
|
||||
|
||||
if (!this.$element.hasClass('in')) {
|
||||
this.$element.css('visiblity', 'hidden !important').addClass('in')
|
||||
}
|
||||
|
||||
var horizontal = $(window).width() / this.$element.outerWidth()
|
||||
var vertical = $(window).height() / this.$element.outerHeight()
|
||||
|
||||
var element = this.$element
|
||||
function ab(a, b) {
|
||||
if (element.css(b) === 'auto') return a
|
||||
if (element.css(a) === 'auto') return b
|
||||
|
||||
var size_a = parseInt(element.css(a), 10)
|
||||
var size_b = parseInt(element.css(b), 10)
|
||||
|
||||
return size_a > size_b ? b : a
|
||||
}
|
||||
|
||||
this.placement = horizontal > vertical ? ab('left', 'right') : ab('top', 'bottom')
|
||||
|
||||
if (this.$element.css('visibility') === 'hidden !important') {
|
||||
this.$element.removeClass('in').css('visiblity', '')
|
||||
}
|
||||
}
|
||||
|
||||
OffCanvas.prototype.opposite = function (placement) {
|
||||
switch (placement) {
|
||||
case 'top': return 'bottom'
|
||||
case 'left': return 'right'
|
||||
case 'bottom': return 'top'
|
||||
case 'right': return 'left'
|
||||
}
|
||||
}
|
||||
|
||||
OffCanvas.prototype.getCanvasElements = function() {
|
||||
// Return a set containing the canvas plus all fixed elements
|
||||
var canvas = this.options.canvas ? $(this.options.canvas) : this.$element
|
||||
|
||||
var fixed_elements = canvas.find('*').filter(function() {
|
||||
return getComputedStyle(this).getPropertyValue('position') === 'fixed'
|
||||
}).not(this.options.exclude)
|
||||
|
||||
return canvas.add(fixed_elements)
|
||||
}
|
||||
|
||||
OffCanvas.prototype.slide = function (elements, offset, callback) {
|
||||
// Use jQuery animation if CSS transitions aren't supported
|
||||
if (!$.support.transition) {
|
||||
var anim = {}
|
||||
anim[this.placement] = "+=" + offset
|
||||
anim[this.opposite(this.placement)] = "-=" + offset
|
||||
|
||||
return elements.animate(anim, 350, callback)
|
||||
}
|
||||
|
||||
var placement = this.placement
|
||||
var opposite = this.opposite(placement)
|
||||
|
||||
elements.each(function() {
|
||||
if ($(this).css(placement) !== 'auto') {
|
||||
$(this).css(placement, (parseInt($(this).css(placement), 10) || 0) + offset)
|
||||
}
|
||||
|
||||
if ($(this).css(opposite) !== 'auto') {
|
||||
$(this).css(opposite, (parseInt($(this).css(opposite), 10) || 0) - offset)
|
||||
}
|
||||
})
|
||||
|
||||
this.$element
|
||||
.one($.support.transition.end, callback)
|
||||
.emulateTransitionEnd(350)
|
||||
}
|
||||
|
||||
OffCanvas.prototype.disableScrolling = function() {
|
||||
var bodyWidth = $('body').width()
|
||||
var prop = 'padding-right'
|
||||
|
||||
if ($('body').data('offcanvas-style') === undefined) {
|
||||
$('body').data('offcanvas-style', $('body').attr('style') || '')
|
||||
}
|
||||
|
||||
$('body').css('overflow', 'hidden')
|
||||
//Fix iPhone scrolling
|
||||
if (isIphone) {
|
||||
$('body').addClass('lockIphone')
|
||||
}
|
||||
|
||||
if ($('body').width() > bodyWidth) {
|
||||
var padding = parseInt($('body').css(prop), 10) + $('body').width() - bodyWidth
|
||||
|
||||
setTimeout(function() {
|
||||
$('body').css(prop, padding)
|
||||
}, 1)
|
||||
}
|
||||
//disable scrolling on mobiles (they ignore overflow:hidden)
|
||||
$('body').on('touchmove.bs', function(e) {
|
||||
if (!$(event.target).closest('.offcanvas').length)
|
||||
e.preventDefault()
|
||||
})
|
||||
}
|
||||
|
||||
OffCanvas.prototype.enableScrolling = function() {
|
||||
$('body').off('touchmove.bs')
|
||||
$('body').removeClass('lockIphone')
|
||||
}
|
||||
|
||||
OffCanvas.prototype.show = function () {
|
||||
if (this.state) return
|
||||
|
||||
var startEvent = $.Event('show.bs.offcanvas')
|
||||
this.$element.trigger(startEvent)
|
||||
if (startEvent.isDefaultPrevented()) return
|
||||
|
||||
this.hideOthers($.proxy(function() {
|
||||
this.state = 'slide-in'
|
||||
this.$element.css('width', '')
|
||||
this.calcPlacement()
|
||||
this.setWidth()
|
||||
|
||||
var elements = this.getCanvasElements()
|
||||
var placement = this.placement
|
||||
var opposite = this.opposite(placement)
|
||||
var offset = this.offset()
|
||||
|
||||
if (elements.index(this.$element) !== -1) {
|
||||
$(this.$element).data('offcanvas-style', $(this.$element).attr('style') || '')
|
||||
this.$element.css(placement, -1 * offset)
|
||||
this.$element.css(placement) // Workaround: Need to get the CSS property for it to be applied before the next line of code
|
||||
}
|
||||
|
||||
elements.addClass('canvas-sliding').each(function() {
|
||||
var $this = $(this)
|
||||
if ($this.data('offcanvas-style') === undefined) $this.data('offcanvas-style', $this.attr('style') || '')
|
||||
if ($this.css('position') === 'static' && !isIphone) $this.css('position', 'relative')
|
||||
if (($this.css(placement) === 'auto' || $this.css(placement) === '0px') &&
|
||||
($this.css(opposite) === 'auto' || $this.css(opposite) === '0px')) {
|
||||
$this.css(placement, 0)
|
||||
}
|
||||
})
|
||||
|
||||
if (this.options.disableScrolling) this.disableScrolling()
|
||||
if (this.options.modal || this.options.backdrop) this.toggleBackdrop()
|
||||
|
||||
var complete = function () {
|
||||
if (this.state != 'slide-in') return
|
||||
|
||||
this.state = 'slid'
|
||||
|
||||
elements.removeClass('canvas-sliding').addClass('canvas-slid')
|
||||
this.$element.trigger('shown.bs.offcanvas')
|
||||
}
|
||||
|
||||
setTimeout($.proxy(function() {
|
||||
this.$element.addClass('in')
|
||||
this.slide(elements, offset, $.proxy(complete, this))
|
||||
}, this), 1)
|
||||
}, this))
|
||||
}
|
||||
|
||||
//Hide other opened offcanvas menus, and then open this one
|
||||
OffCanvas.prototype.hideOthers = function (callback) {
|
||||
var doHide = false
|
||||
var id = this.$element.attr('id')
|
||||
var $clones = $('.offcanvas-clone:not([data-id="' + id + '"])')
|
||||
|
||||
if (!$clones.length) return callback()
|
||||
|
||||
$clones.each(function(index, clone) {
|
||||
var id = $(clone).attr('data-id')
|
||||
var $menu = $('#' + id)
|
||||
doHide = $menu.hasClass('canvas-slid')
|
||||
|
||||
if (!doHide) return
|
||||
|
||||
$menu.one('hidden.bs.offcanvas', callback)
|
||||
$menu.offcanvas('hide')
|
||||
})
|
||||
|
||||
if (!doHide) callback()
|
||||
}
|
||||
|
||||
OffCanvas.prototype.hide = function () {
|
||||
if (this.state !== 'slid') return
|
||||
|
||||
var startEvent = $.Event('hide.bs.offcanvas')
|
||||
this.$element.trigger(startEvent)
|
||||
if (startEvent.isDefaultPrevented()) return
|
||||
|
||||
this.state = 'slide-out'
|
||||
|
||||
var elements = $('.canvas-slid')
|
||||
var placement = this.placement
|
||||
var offset = -1 * this.offset()
|
||||
|
||||
var complete = function () {
|
||||
if (this.state != 'slide-out') return
|
||||
|
||||
this.state = null
|
||||
this.placement = null
|
||||
|
||||
this.$element.removeClass('in')
|
||||
|
||||
elements.removeClass('canvas-sliding')
|
||||
elements.add(this.$element).add('body').each(function() {
|
||||
$(this).attr('style', $(this).data('offcanvas-style')).removeData('offcanvas-style')
|
||||
})
|
||||
|
||||
this.$element.css('width', '')
|
||||
this.$element.trigger('hidden.bs.offcanvas')
|
||||
}
|
||||
|
||||
if (this.options.disableScrolling) this.enableScrolling()
|
||||
if (this.options.modal || this.options.backdrop) this.toggleBackdrop()
|
||||
|
||||
elements.removeClass('canvas-slid').addClass('canvas-sliding')
|
||||
|
||||
setTimeout($.proxy(function() {
|
||||
this.slide(elements, offset, $.proxy(complete, this))
|
||||
}, this), 1)
|
||||
}
|
||||
|
||||
OffCanvas.prototype.toggle = function () {
|
||||
if (this.state === 'slide-in' || this.state === 'slide-out') return
|
||||
this[this.state === 'slid' ? 'hide' : 'show']()
|
||||
}
|
||||
|
||||
OffCanvas.prototype.toggleBackdrop = function (callback) {
|
||||
callback = callback || $.noop
|
||||
var time = 150
|
||||
|
||||
if (this.state == 'slide-in') {
|
||||
var $body = $('body')
|
||||
var doAnimate = $.support.transition
|
||||
|
||||
this.$backdrop = $('<div class="modal-backdrop fade" />')
|
||||
if (this.options.backdrop) {
|
||||
this.$backdrop.addClass('allow-navbar')
|
||||
|
||||
if (this.options.canvas && $(this.options.canvas)[0] !== $body[0]) {
|
||||
$(this.options.canvas).addClass('limit-backdrop')
|
||||
this.$backdrop.appendTo(this.options.canvas)
|
||||
} else {
|
||||
this.$backdrop.insertAfter(this.$element)
|
||||
}
|
||||
} else {
|
||||
this.$backdrop.insertAfter(this.$element)
|
||||
}
|
||||
|
||||
if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
|
||||
|
||||
$body.addClass('modal-open')
|
||||
this.$backdrop.addClass('show').show()
|
||||
this.$backdrop.on('click.bs', $.proxy(this.autohide, this))
|
||||
|
||||
doAnimate ?
|
||||
this.$backdrop
|
||||
.one($.support.transition.end, callback)
|
||||
.emulateTransitionEnd(time) :
|
||||
callback()
|
||||
} else if (this.state == 'slide-out' && this.$backdrop) {
|
||||
var self = this
|
||||
|
||||
this.$backdrop.hide().removeClass('show')
|
||||
$('body').removeClass('modal-open').off('touchmove.bs')
|
||||
|
||||
if ($.support.transition) {
|
||||
this.$backdrop
|
||||
.one($.support.transition.end, function() {
|
||||
self.$backdrop.remove()
|
||||
callback()
|
||||
self.$backdrop = null
|
||||
})
|
||||
.emulateTransitionEnd(time)
|
||||
} else {
|
||||
this.$backdrop.remove()
|
||||
this.$backdrop = null
|
||||
callback()
|
||||
}
|
||||
|
||||
if (this.options.canvas && $(this.options.canvas)[0] !== $('body')[0]) {
|
||||
var canvas = this.options.canvas
|
||||
setTimeout(function() {
|
||||
$(canvas).removeClass('limit-backdrop')
|
||||
}, time)
|
||||
}
|
||||
} else if (callback) {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
OffCanvas.prototype.calcClone = function() {
|
||||
var id = this.$element.attr('id')
|
||||
this.$calcClone = $('.offcanvas-clone[data-id="' + id + '"]')
|
||||
|
||||
if (!this.$calcClone.length) {
|
||||
this.$calcClone = this.$element.clone()
|
||||
.addClass('offcanvas-clone')
|
||||
.attr('data-id', id)
|
||||
.removeAttr('id')
|
||||
.appendTo($('body'))
|
||||
.html('')
|
||||
}
|
||||
|
||||
this.$calcClone.removeClass('in')
|
||||
}
|
||||
|
||||
OffCanvas.prototype.recalc = function () {
|
||||
if (this.$calcClone.css('display') === 'none' || (this.state !== 'slid' && this.state !== 'slide-in')) return
|
||||
|
||||
this.state = null
|
||||
this.placement = null
|
||||
var elements = this.getCanvasElements()
|
||||
|
||||
this.$element.trigger('hide.bs.offcanvas')
|
||||
this.$element.removeClass('in')
|
||||
|
||||
elements.removeClass('canvas-slid')
|
||||
elements.add(this.$element).add('body').each(function() {
|
||||
$(this).attr('style', $(this).data('offcanvas-style')).removeData('offcanvas-style')
|
||||
})
|
||||
|
||||
this.$element.trigger('hidden.bs.offcanvas')
|
||||
}
|
||||
|
||||
OffCanvas.prototype.autohide = function (e) {
|
||||
var $target = $(e.target)
|
||||
var doHide = !$target.hasClass('dropdown-backdrop') && $target.closest(this.$element).length === 0
|
||||
|
||||
if (doHide) this.hide()
|
||||
}
|
||||
|
||||
// OFFCANVAS PLUGIN DEFINITION
|
||||
// ==========================
|
||||
|
||||
var old = $.fn.offcanvas
|
||||
|
||||
$.fn.offcanvas = function (option) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
var data = $this.data('bs.offcanvas')
|
||||
var options = $.extend({}, OffCanvas.DEFAULTS, $this.data(), typeof option === 'object' && option)
|
||||
|
||||
//In case if user does smth like $('.navmenu-fixed-left').offcanvas('hide'),
|
||||
//thus selecting also menu clone (that can cause issues)
|
||||
if ($this.hasClass('offcanvas-clone')) return
|
||||
|
||||
if (!data) $this.data('bs.offcanvas', (data = new OffCanvas(this, options)))
|
||||
if (typeof option === 'string') data[option]()
|
||||
})
|
||||
}
|
||||
|
||||
$.fn.offcanvas.Constructor = OffCanvas
|
||||
|
||||
|
||||
// OFFCANVAS NO CONFLICT
|
||||
// ====================
|
||||
|
||||
$.fn.offcanvas.noConflict = function () {
|
||||
$.fn.offcanvas = old
|
||||
return this
|
||||
}
|
||||
|
||||
|
||||
// OFFCANVAS DATA-API
|
||||
// =================
|
||||
|
||||
$(document).on('click.bs.offcanvas.data-api', '[data-toggle=offcanvas]', function (e) {
|
||||
var $this = $(this), href
|
||||
var target = $this.attr('data-target')
|
||||
|| (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
|
||||
var $canvas = $(target)
|
||||
var data = $canvas.data('bs.offcanvas')
|
||||
var option = data ? 'toggle' : $.extend($this.data(), $canvas.data())
|
||||
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
|
||||
if (data) data.toggle()
|
||||
else $canvas.offcanvas(option)
|
||||
})
|
||||
|
||||
}(window.jQuery)
|
||||
|
||||
/* ============================================================
|
||||
* Bootstrap: rowlink.js v4.0.0
|
||||
* http://jasny.github.io/bootstrap/javascript/#rowlink
|
||||
* ============================================================
|
||||
* Copyright 2012-2014 Arnold Daniels
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
* ============================================================ */
|
||||
|
||||
+function ($) { "use strict";
|
||||
|
||||
var Rowlink = function (element, options) {
|
||||
this.$element = $(element)
|
||||
this.options = $.extend({}, Rowlink.DEFAULTS, options)
|
||||
|
||||
this.$element.on('click.bs.rowlink mouseup.bs.rowlink', 'td:not(.rowlink-skip)', $.proxy(this.click, this))
|
||||
}
|
||||
|
||||
Rowlink.DEFAULTS = {
|
||||
target: "a"
|
||||
}
|
||||
|
||||
Rowlink.prototype.click = function(e, ctrlKey) {
|
||||
var target = $(e.currentTarget).closest('tr').find(this.options.target)[0]
|
||||
|
||||
if (typeof target === 'undefined' || $(e.target)[0] === target) return
|
||||
if (e.type === 'mouseup' && e.which !== 2) return
|
||||
|
||||
e.preventDefault();
|
||||
ctrlKey = ctrlKey || e.ctrlKey || (e.type === 'mouseup' && e.which === 2)
|
||||
|
||||
if (!ctrlKey && target.click) {
|
||||
target.click()
|
||||
} else if (document.createEvent) {
|
||||
var evt = new MouseEvent("click", {
|
||||
view: window,
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
ctrlKey: ctrlKey
|
||||
});
|
||||
target.dispatchEvent(evt);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ROWLINK PLUGIN DEFINITION
|
||||
// ===========================
|
||||
|
||||
var old = $.fn.rowlink
|
||||
|
||||
$.fn.rowlink = function (options) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
var data = $this.data('bs.rowlink')
|
||||
if (!data) $this.data('bs.rowlink', (data = new Rowlink(this, options)))
|
||||
})
|
||||
}
|
||||
|
||||
$.fn.rowlink.Constructor = Rowlink
|
||||
|
||||
|
||||
// ROWLINK NO CONFLICT
|
||||
// ====================
|
||||
|
||||
$.fn.rowlink.noConflict = function () {
|
||||
$.fn.rowlink = old
|
||||
return this
|
||||
}
|
||||
|
||||
|
||||
// ROWLINK DATA-API
|
||||
// ==================
|
||||
|
||||
$(document).on('click.bs.rowlink.data-api mouseup.bs.rowlink.data-api', '[data-link="row"]', function (e) {
|
||||
if (e.type === 'mouseup' && e.which !== 2) return
|
||||
if ($(e.target).closest('.rowlink-skip').length !== 0) return
|
||||
|
||||
var $this = $(this)
|
||||
if ($this.data('bs.rowlink')) return
|
||||
$this.rowlink($this.data())
|
||||
|
||||
var ctrlKey = e.ctrlKey || e.which === 2
|
||||
$(e.target).trigger('click.bs.rowlink', [ctrlKey])
|
||||
})
|
||||
|
||||
}(window.jQuery);
|
||||
|
||||
/* ===========================================================
|
||||
* Bootstrap: fileinput.js v4.0.0
|
||||
* http://jasny.github.com/bootstrap/javascript/#fileinput
|
||||
* ===========================================================
|
||||
* Copyright 2012-2014 Arnold Daniels
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License")
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
* ========================================================== */
|
||||
|
||||
+function ($) { "use strict";
|
||||
|
||||
var isIE = window.navigator.appName == 'Microsoft Internet Explorer'
|
||||
|
||||
// FILEUPLOAD PUBLIC CLASS DEFINITION
|
||||
// =================================
|
||||
|
||||
var Fileinput = function (element, options) {
|
||||
this.$element = $(element)
|
||||
|
||||
this.options = $.extend({}, Fileinput.DEFAULTS, options)
|
||||
this.$input = this.$element.find(':file')
|
||||
if (this.$input.length === 0) return
|
||||
|
||||
this.name = this.$input.attr('name') || options.name
|
||||
|
||||
this.$hidden = this.$element.find('input[type=hidden][name="' + this.name + '"]')
|
||||
if (this.$hidden.length === 0) {
|
||||
this.$hidden = $('<input type="hidden">').insertBefore(this.$input)
|
||||
}
|
||||
|
||||
this.$preview = this.$element.find('.fileinput-preview')
|
||||
var height = this.$preview.css('height')
|
||||
if (this.$preview.css('display') !== 'inline' && height !== '0px' && height !== 'none') {
|
||||
this.$preview.css('line-height', height)
|
||||
}
|
||||
|
||||
this.original = {
|
||||
exists: this.$element.hasClass('fileinput-exists'),
|
||||
preview: this.$preview.html(),
|
||||
hiddenVal: this.$hidden.val()
|
||||
}
|
||||
|
||||
this.listen()
|
||||
this.reset()
|
||||
}
|
||||
|
||||
Fileinput.DEFAULTS = {
|
||||
clearName: true
|
||||
}
|
||||
|
||||
Fileinput.prototype.listen = function() {
|
||||
this.$input.on('change.bs.fileinput', $.proxy(this.change, this))
|
||||
$(this.$input[0].form).on('reset.bs.fileinput', $.proxy(this.reset, this))
|
||||
|
||||
this.$element.find('[data-trigger="fileinput"]').on('click.bs.fileinput', $.proxy(this.trigger, this))
|
||||
this.$element.find('[data-dismiss="fileinput"]').on('click.bs.fileinput', $.proxy(this.clear, this))
|
||||
},
|
||||
|
||||
Fileinput.prototype.verifySizes = function(files) {
|
||||
if (typeof this.options.maxSize === 'undefined') return true
|
||||
|
||||
var max = parseFloat(this.options.maxSize)
|
||||
if (max !== this.options.maxSize) return true
|
||||
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
var size = typeof files[i].size !== 'undefined' ? files[i].size : null
|
||||
if (size === null) continue
|
||||
|
||||
size = size / 1000 / 1000 /* convert from bytes to MB */
|
||||
if (size > max) return false
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
Fileinput.prototype.change = function(e) {
|
||||
var files = e.target.files === undefined ? (e.target && e.target.value ? [{ name: e.target.value.replace(/^.+\\/, '')}] : []) : e.target.files
|
||||
|
||||
e.stopPropagation()
|
||||
|
||||
if (files.length === 0) {
|
||||
this.clear()
|
||||
this.$element.trigger('clear.bs.fileinput')
|
||||
return
|
||||
}
|
||||
|
||||
if (!this.verifySizes(files)) {
|
||||
this.$element.trigger('max_size.bs.fileinput')
|
||||
|
||||
this.clear()
|
||||
this.$element.trigger('clear.bs.fileinput')
|
||||
return
|
||||
}
|
||||
|
||||
this.$hidden.val('')
|
||||
this.$hidden.attr('name', '')
|
||||
this.$input.attr('name', this.name)
|
||||
|
||||
var file = files[0]
|
||||
|
||||
if (this.$preview.length > 0 && (typeof file.type !== "undefined" ? file.type.match(/^image\/(gif|png|jpeg|svg\+xml)$/) : file.name.match(/\.(gif|png|jpe?g|svg)$/i)) && typeof FileReader !== "undefined") {
|
||||
var Fileinput = this
|
||||
var reader = new FileReader()
|
||||
var preview = this.$preview
|
||||
var element = this.$element
|
||||
|
||||
reader.onload = function(re) {
|
||||
var $img = $('<img>')
|
||||
$img[0].src = re.target.result
|
||||
files[0].result = re.target.result
|
||||
|
||||
element.find('.fileinput-filename').text(file.name)
|
||||
|
||||
// if parent has max-height, using `(max-)height: 100%` on child doesn't take padding and border into account
|
||||
if (preview.css('max-height') != 'none') {
|
||||
var mh = parseInt(preview.css('max-height'), 10) || 0
|
||||
var pt = parseInt(preview.css('padding-top'), 10) || 0
|
||||
var pb = parseInt(preview.css('padding-bottom'), 10) || 0
|
||||
var bt = parseInt(preview.css('border-top'), 10) || 0
|
||||
var bb = parseInt(preview.css('border-bottom'), 10) || 0
|
||||
|
||||
$img.css('max-height', mh - pt - pb - bt - bb)
|
||||
}
|
||||
|
||||
preview.html($img)
|
||||
if (Fileinput.options.exif) {
|
||||
//Fix image tranformation if this is possible
|
||||
Fileinput.setImageTransform($img, file);
|
||||
}
|
||||
element.addClass('fileinput-exists').removeClass('fileinput-new')
|
||||
|
||||
element.trigger('change.bs.fileinput', files)
|
||||
}
|
||||
|
||||
reader.readAsDataURL(file)
|
||||
} else {
|
||||
var text = file.name
|
||||
var $nameView = this.$element.find('.fileinput-filename')
|
||||
|
||||
if (files.length > 1) {
|
||||
text = $.map(files, function(file) {
|
||||
return file.name;
|
||||
}).join(', ')
|
||||
}
|
||||
|
||||
$nameView.text(text)
|
||||
this.$preview.text(file.name)
|
||||
this.$element.addClass('fileinput-exists').removeClass('fileinput-new')
|
||||
this.$element.trigger('change.bs.fileinput')
|
||||
}
|
||||
},
|
||||
|
||||
Fileinput.prototype.setImageTransform = function($img, file) {
|
||||
var Fileinput = this;
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(me) {
|
||||
var transform = false;
|
||||
var view = new DataView(reader.result);
|
||||
var exif = Fileinput.getImageExif(view);
|
||||
if (exif) {
|
||||
Fileinput.resetOrientation($img, exif);
|
||||
}
|
||||
}
|
||||
|
||||
reader.readAsArrayBuffer(file);
|
||||
}
|
||||
|
||||
Fileinput.prototype.getImageExif = function(view) {
|
||||
if (view.getUint16(0, false) != 0xFFD8) {
|
||||
return -2;
|
||||
}
|
||||
var length = view.byteLength, offset = 2;
|
||||
while (offset < length) {
|
||||
var marker = view.getUint16(offset, false);
|
||||
offset += 2;
|
||||
if (marker == 0xFFE1) {
|
||||
if (view.getUint32(offset += 2, false) != 0x45786966) {
|
||||
return -1;
|
||||
}
|
||||
var little = view.getUint16(offset += 6, false) == 0x4949;
|
||||
offset += view.getUint32(offset + 4, little);
|
||||
var tags = view.getUint16(offset, little);
|
||||
offset += 2;
|
||||
for (var i = 0; i < tags; i++) {
|
||||
if (view.getUint16(offset + (i * 12), little) == 0x0112) {
|
||||
return view.getUint16(offset + (i * 12) + 8, little);
|
||||
}
|
||||
}
|
||||
}
|
||||
else if ((marker & 0xFF00) != 0xFF00){
|
||||
break;
|
||||
} else {
|
||||
offset += view.getUint16(offset, false);
|
||||
}
|
||||
}
|
||||
|
||||
return -1;
|
||||
}
|
||||
|
||||
Fileinput.prototype.resetOrientation = function($img, transform) {
|
||||
var img = new Image();
|
||||
|
||||
img.onload = function() {
|
||||
var width = img.width,
|
||||
height = img.height,
|
||||
canvas = document.createElement('canvas'),
|
||||
ctx = canvas.getContext("2d");
|
||||
|
||||
// set proper canvas dimensions before transform & export
|
||||
if ([5,6,7,8].indexOf(transform) > -1) {
|
||||
canvas.width = height;
|
||||
canvas.height = width;
|
||||
} else {
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
}
|
||||
|
||||
// transform context before drawing image
|
||||
switch (transform) {
|
||||
case 2: ctx.transform(-1, 0, 0, 1, width, 0); break;
|
||||
case 3: ctx.transform(-1, 0, 0, -1, width, height ); break;
|
||||
case 4: ctx.transform(1, 0, 0, -1, 0, height ); break;
|
||||
case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
|
||||
case 6: ctx.transform(0, 1, -1, 0, height , 0); break;
|
||||
case 7: ctx.transform(0, -1, -1, 0, height , width); break;
|
||||
case 8: ctx.transform(0, -1, 1, 0, 0, width); break;
|
||||
default: ctx.transform(1, 0, 0, 1, 0, 0);
|
||||
}
|
||||
|
||||
// draw image
|
||||
ctx.drawImage(img, 0, 0);
|
||||
|
||||
// export base64
|
||||
$img.attr('src', canvas.toDataURL());
|
||||
};
|
||||
|
||||
img.src = $img.attr('src');
|
||||
};
|
||||
|
||||
Fileinput.prototype.clear = function(e) {
|
||||
if (e) e.preventDefault()
|
||||
|
||||
this.$hidden.val('')
|
||||
this.$hidden.attr('name', this.name)
|
||||
if (this.options.clearName) this.$input.attr('name', '')
|
||||
|
||||
//ie8+ doesn't support changing the value of input with type=file so clone instead
|
||||
if (isIE) {
|
||||
var inputClone = this.$input.clone(true);
|
||||
this.$input.after(inputClone);
|
||||
this.$input.remove();
|
||||
this.$input = inputClone;
|
||||
} else {
|
||||
this.$input.val('')
|
||||
}
|
||||
|
||||
this.$preview.html('')
|
||||
this.$element.find('.fileinput-filename').text('')
|
||||
this.$element.addClass('fileinput-new').removeClass('fileinput-exists')
|
||||
|
||||
if (e !== undefined) {
|
||||
this.$input.trigger('change')
|
||||
this.$element.trigger('clear.bs.fileinput')
|
||||
}
|
||||
},
|
||||
|
||||
Fileinput.prototype.reset = function() {
|
||||
this.clear()
|
||||
|
||||
this.$hidden.val(this.original.hiddenVal)
|
||||
this.$preview.html(this.original.preview)
|
||||
this.$element.find('.fileinput-filename').text('')
|
||||
|
||||
if (this.original.exists) this.$element.addClass('fileinput-exists').removeClass('fileinput-new')
|
||||
else this.$element.addClass('fileinput-new').removeClass('fileinput-exists')
|
||||
|
||||
this.$element.trigger('reseted.bs.fileinput')
|
||||
},
|
||||
|
||||
Fileinput.prototype.trigger = function(e) {
|
||||
this.$input.trigger('click')
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
|
||||
// FILEUPLOAD PLUGIN DEFINITION
|
||||
// ===========================
|
||||
|
||||
var old = $.fn.fileinput
|
||||
|
||||
$.fn.fileinput = function (options) {
|
||||
return this.each(function () {
|
||||
var $this = $(this),
|
||||
data = $this.data('bs.fileinput')
|
||||
if (!data) $this.data('bs.fileinput', (data = new Fileinput(this, options)))
|
||||
if (typeof options == 'string') data[options]()
|
||||
})
|
||||
}
|
||||
|
||||
$.fn.fileinput.Constructor = Fileinput
|
||||
|
||||
|
||||
// FILEINPUT NO CONFLICT
|
||||
// ====================
|
||||
|
||||
$.fn.fileinput.noConflict = function () {
|
||||
$.fn.fileinput = old
|
||||
return this
|
||||
}
|
||||
|
||||
|
||||
// FILEUPLOAD DATA-API
|
||||
// ==================
|
||||
|
||||
$(document).on('click.fileinput.data-api', '[data-provides="fileinput"]', function (e) {
|
||||
var $this = $(this)
|
||||
if ($this.data('bs.fileinput')) return
|
||||
$this.fileinput($this.data())
|
||||
|
||||
var $target = $(e.target).closest('[data-dismiss="fileinput"],[data-trigger="fileinput"]');
|
||||
if ($target.length > 0) {
|
||||
e.preventDefault()
|
||||
$target.trigger('click.bs.fileinput')
|
||||
}
|
||||
})
|
||||
|
||||
}(window.jQuery);
|
||||
2
dist/js/jasny-bootstrap.min.js
vendored
2
dist/js/jasny-bootstrap.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -1,12 +1,185 @@
|
||||
---
|
||||
layout: default
|
||||
title: Getting started
|
||||
slug: getting-started
|
||||
lead: "An overview of Jasny Bootstrap, how to download and use, basic templates and examples, and more."
|
||||
base_url: "../"
|
||||
---
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Meta, title, CSS, favicons, etc. -->
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Getting started
|
||||
<title>
|
||||
|
||||
Getting started · Jasny Bootstrap
|
||||
|
||||
</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../dist/css/jasny-bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
|
||||
<!-- Documentation extras -->
|
||||
<link href="../assets/css/docs.css" rel="stylesheet">
|
||||
<link href="../assets/css/pygments-manni.css" rel="stylesheet">
|
||||
<!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
|
||||
<script>
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-32388850-1']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
(function() {
|
||||
var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
|
||||
s.type = 'text/javascript';
|
||||
s.async = true;
|
||||
s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
|
||||
t.parentNode.insertBefore(s, t);
|
||||
})();
|
||||
/* ]]> */</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
if (localStorage && localStorage.hide_twbs === 'no') document.body.setAttribute('class', 'bs-twbs-show')
|
||||
</script>
|
||||
|
||||
<a class="sr-only" href="#content">Skip to main content</a>
|
||||
|
||||
<!-- Docs master nav -->
|
||||
<header class="navbar navbar-dark navbar-expand-lg navbar-inverse fixed-top bs-docs-nav" role="banner">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<a href="../" class="navbar-brand">Jasny Bootstrap</a>
|
||||
</div>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNavmenu">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<nav class="collapse navbar-collapse" role="navigation" id="mainNavmenu">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="../getting-started">Getting started</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="../components">Components</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav ml-auto">
|
||||
<li>
|
||||
<a href="http://www.jasny.net"><span class="hidden-sm">More by</span> Jasny</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<!-- Docs page layout -->
|
||||
<div class="bs-header" id="content">
|
||||
<div class="container">
|
||||
<h1>Getting started</h1>
|
||||
<p>An overview of Jasny Bootstrap, how to download and use, basic templates and examples, and more.</p>
|
||||
<!-- <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" alt="Arnold Daniels">
|
||||
<div class="aboutme-text">
|
||||
<span class="aboutme-title">Looking for a developer?</span>
|
||||
I'm available for freelance work, I want to hear about your projects.
|
||||
<span class="aboutme-name">- Arnold Daniels</span>
|
||||
</div>
|
||||
</a>
|
||||
</div> -->
|
||||
|
||||
|
||||
<div id="carbonads-container">
|
||||
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=jansy" id="_carbonads_js"></script>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container bs-docs-container">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="bs-sidebar hidden-print" role="complementary">
|
||||
<ul class="nav bs-sidenav flex-column">
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#jasny-bootstrap">Jasny Bootstrap</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#download">Download Jasny Bootstrap</a>
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a class="nav-link" href="#download-compiled">Compiled CSS, JS, and fonts</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#download-additional">Additional downloads</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#download-cdn">Bootstrap CDN</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#whats-included">What's included</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#template">Basic template</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#js-overview">Plugins</a>
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a class="nav-link" href="#js-individual-compiled">Individual or compiled</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#js-data-attrs">Data attributes</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#js-programmatic-api">Programmatic API</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#js-noconflict">No conflict</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#js-events">Events</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#containers">Containers</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#examples">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#migration-v4">Migrating from 3.x to 4.0</a>
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a class="nav-link" href="#migration-classes-v4">Major class changes</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#migration-dropped-v4">What's removed</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#migration-v3">Migrating from 2.x to 3.0</a>
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a class="nav-link" href="#migration-classes-v3">Major class changes</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#migration-new-v3">What's new</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#migration-dropped-v3">What's removed</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#migration-notes-v3">Additional notes</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-9" role="main">
|
||||
<!-- Getting started
|
||||
================================================== -->
|
||||
<div class="bs-docs-section">
|
||||
<div class="pb-2 mt-4 mb-2 border-bottom">
|
||||
@@ -31,29 +204,27 @@ base_url: "../"
|
||||
|
||||
<h3 id="download-compiled">Compiled CSS and JS</h3>
|
||||
<p>The fastest way to get Jasny Bootstrap is to download the compiled and minified versions of our CSS and JavaScript. 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 Jasny Bootstrap</a></p>
|
||||
<p><a class="btn btn-lg btn-primary" href="https://github.com/jasny/bootstrap/releases/download/v4.0.0/jasny-bootstrap-4.0.0-dist.zip" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Jasny Bootstrap</a></p>
|
||||
|
||||
<h3 id="download-additional">Additional downloads</h3>
|
||||
<div class="bs-docs-dl-options">
|
||||
<h4>
|
||||
<a href="{{ site.download.source }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download source code</a>
|
||||
<a href="https://github.com/jasny/bootstrap/archive/v4.0.0.zip" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download source code</a>
|
||||
</h4>
|
||||
<p>Get the latest Jasny Bootstrap LESS and JavaScript source code by downloading it directly from GitHub.</p>
|
||||
<h4>
|
||||
<a href="{{ site.repo }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'GitHub project']);">Clone or fork via GitHub</a>
|
||||
<a href="https://github.com/jasny/bootstrap" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'GitHub project']);">Clone or fork via GitHub</a>
|
||||
</h4>
|
||||
<p>Visit us on GitHub to clone or fork the Jasny Bootstrap project.</p>
|
||||
</div>
|
||||
|
||||
<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 CDN links listed below.</p>
|
||||
{% highlight html %}
|
||||
<!-- Latest compiled and minified CSS -->
|
||||
<link rel="stylesheet" href="{{ site.cdn.css }}">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><!-- Latest compiled and minified CSS -->
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/4.0.0/css/jasny-bootstrap.min.css">
|
||||
|
||||
<!-- Latest compiled and minified JavaScript -->
|
||||
<script src="{{ site.cdn.js }}"></script>
|
||||
{% endhighlight %}
|
||||
<!-- Latest compiled and minified JavaScript -->
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/4.0.0/js/jasny-bootstrap.min.js"></script></code></pre></figure>
|
||||
|
||||
<div class="bs-callout bs-callout-warning" id="callout-less-compilation">
|
||||
<h4>Compiling Jasny Bootstrap's LESS files</h4>
|
||||
@@ -73,16 +244,13 @@ base_url: "../"
|
||||
|
||||
<!-- NOTE: This info is intentionally duplicated in the README.
|
||||
Copy any changes made here over to the README too. -->
|
||||
{% highlight bash %}
|
||||
jasny-bootstrap/
|
||||
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">jasny-bootstrap/
|
||||
├── css/
|
||||
│ ├── jasny-bootstrap.css
|
||||
│ ├── jasny-bootstrap.min.css
|
||||
└── js/
|
||||
├── jasny-bootstrap.js
|
||||
└── jasny-bootstrap.min.js
|
||||
|
||||
{% endhighlight %}
|
||||
└── jasny-bootstrap.min.js</code></pre></figure>
|
||||
|
||||
<p>This is the most basic form of Jasny Bootstrap. We provide compiled CSS and JS (<code>jasny-bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>jasny-bootstrap.min.*</code>).</p>
|
||||
|
||||
@@ -104,34 +272,32 @@ jasny-bootstrap/
|
||||
<p class="lead">Start with this basic HTML template, or modify <a href="../getting-started#examples">these examples</a>. We hope you'll customize our templates and examples, adapting them to suit your needs.</p>
|
||||
|
||||
<p>Copy the HTML below to begin working with a minimal Bootstrap document.</p>
|
||||
{% highlight html %}
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Bootstrap 101 Template</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- Bootstrap -->
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
|
||||
<link href="css/jasny-bootstrap.min.css" rel="stylesheet" media="screen">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Bootstrap 101 Template</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- Bootstrap -->
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
|
||||
<link href="css/jasny-bootstrap.min.css" rel="stylesheet" media="screen">
|
||||
|
||||
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, world!</h1>
|
||||
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, world!</h1>
|
||||
|
||||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
||||
<script src="https://code.jquery.com/jquery.js"></script>
|
||||
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="js/jasny-bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
{% endhighlight %}
|
||||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
||||
<script src="https://code.jquery.com/jquery.js"></script>
|
||||
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="js/jasny-bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html></code></pre></figure>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -155,46 +321,34 @@ jasny-bootstrap/
|
||||
<p>You can use all Jasny Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.</p>
|
||||
|
||||
<p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with <code>data-api</code>. This looks like this:
|
||||
{% highlight js %}
|
||||
$(document).off('.data-api')
|
||||
{% endhighlight %}
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js">$(document).off('.data-api')</code></pre></figure>
|
||||
|
||||
<p>Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:</p>
|
||||
{% highlight js %}
|
||||
$(document).off('.alert.data-api')
|
||||
{% endhighlight %}
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js">$(document).off('.alert.data-api')</code></pre></figure>
|
||||
|
||||
<h3 id="js-programmatic-api">Programmatic API</h3>
|
||||
<p>We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.</p>
|
||||
{% highlight js %}
|
||||
$(".fileinput").fileinput().addClass("fat")
|
||||
{% endhighlight %}
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js">$(".fileinput").fileinput().addClass("fat")</code></pre></figure>
|
||||
|
||||
<p>All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):</p>
|
||||
{% highlight js %}
|
||||
$("#myMenu").offcanvas() // initialized with defaults
|
||||
$("#myMenu").offcanvas({ autohide: false }) // initialized with no autohide
|
||||
$("#myMenu").offcanvas('show') // initializes and invokes show immediately</p>
|
||||
{% endhighlight %}
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js">$("#myMenu").offcanvas() // initialized with defaults
|
||||
$("#myMenu").offcanvas({ autohide: false }) // initialized with no autohide
|
||||
$("#myMenu").offcanvas('show') // initializes and invokes show immediately</p></code></pre></figure>
|
||||
|
||||
<p>Each plugin also exposes its raw constructor on a <code>Constructor</code> property: <code>$.fn.popover.Offcanvas</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('.navmenu').data('offcanvas')</code>.</p>
|
||||
|
||||
<h3 id="js-noconflict">No conflict</h3>
|
||||
<p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p>
|
||||
{% highlight js %}
|
||||
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
|
||||
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
|
||||
{% endhighlight %}
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js">var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
|
||||
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality</code></pre></figure>
|
||||
|
||||
<h3 id="js-events">Events</h3>
|
||||
<p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
|
||||
<p>As of 3.1.2, all Bootstrap events are namespaced.</p>
|
||||
<p>All infinitive events provide <code>preventDefault</code> functionality. This provides the ability to stop the execution of an action before it starts.</p>
|
||||
{% highlight js %}
|
||||
$('#myMenu').on('show.bs.offcanvas', function (e) {
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js">$('#myMenu').on('show.bs.offcanvas', function (e) {
|
||||
if (!data) return e.preventDefault() // stops menu from being shown
|
||||
})
|
||||
{% endhighlight %}
|
||||
})</code></pre></figure>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -404,3 +558,66 @@ $('#myMenu').on('show.bs.offcanvas', function (e) {
|
||||
</ul>
|
||||
<p>For more information on upgrading to v3.0, and code snippets from the community, see <a href="http://bootply.com/">Bootply</a>.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer
|
||||
================================================== -->
|
||||
<footer class="bs-footer" role="contentinfo">
|
||||
<div class="container">
|
||||
<div class="bs-social">
|
||||
<ul class="bs-social-buttons">
|
||||
<li>
|
||||
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=jasny&repo=bootstrap&type=watch&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=jasny&repo=bootstrap&type=fork&count=true" width="102" height="20" title="Fork on GitHub"></iframe>
|
||||
</li>
|
||||
<li class="follow-btn">
|
||||
<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://jasny.github.io/bootstrap" data-count="horizontal" data-via="ArnoldDaniels">Tweet</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="FlattrButton" style="display:none;" rev="flattr;button:compact;" href="http://github.com/jasny/bootstrap">Flattr</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<p>Jasny Bootstrap is a fork of <a href="http://getbootstrap.com/" target="_blank">vanilla 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>Currently v4.0.0</li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="../2.3.1/">Bootstrap 2.3.1 docs</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="http://www.jasny.net">Jasny.net</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="https://github.com/jasny/bootstrap/issues?state=open">Issues</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="https://github.com/jasny/bootstrap/releases">Releases</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- JS and analytics only. -->
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://code.jquery.com/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/sticky-kit/1.1.3/sticky-kit.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
|
||||
<script src="../dist/js/jasny-bootstrap.min.js"></script>
|
||||
|
||||
<script src="http://platform.twitter.com/widgets.js"></script>
|
||||
<script src="../assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
180
index.html
180
index.html
@@ -1,15 +1,179 @@
|
||||
---
|
||||
layout: home
|
||||
title: Jasny Bootstrap
|
||||
---
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Meta, title, CSS, favicons, etc. -->
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<main class="bs-masthead" id="content" role="main">
|
||||
<title>
|
||||
|
||||
Jasny Bootstrap
|
||||
|
||||
</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="dist/css/jasny-bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
|
||||
<!-- Documentation extras -->
|
||||
<link href="assets/css/docs.css" rel="stylesheet">
|
||||
<link href="assets/css/pygments-manni.css" rel="stylesheet">
|
||||
<!--[if lt IE 9]><script src="assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="assets/ico/favicon.png">
|
||||
|
||||
<script>
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-32388850-1']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
(function() {
|
||||
var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
|
||||
s.type = 'text/javascript';
|
||||
s.async = true;
|
||||
s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
|
||||
t.parentNode.insertBefore(s, t);
|
||||
})();
|
||||
/* ]]> */</script>
|
||||
|
||||
</head>
|
||||
<body class="bs-docs-home">
|
||||
<a class="sr-only" href="#content">Skip to main content</a>
|
||||
|
||||
<!-- Docs master nav -->
|
||||
<header class="navbar navbar-dark navbar-expand-lg navbar-inverse fixed-top bs-docs-nav" role="banner">
|
||||
<div class="container">
|
||||
<h1>{{ page.title }}</h1>
|
||||
<div class="navbar-header">
|
||||
<a href="" class="navbar-brand">Jasny Bootstrap</a>
|
||||
</div>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNavmenu">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<nav class="collapse navbar-collapse" role="navigation" id="mainNavmenu">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="getting-started">Getting started</a>
|
||||
</li>
|
||||
<li class="nav-item ">
|
||||
<a class="nav-link" href="components">Components</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav ml-auto">
|
||||
<li>
|
||||
<a href="http://www.jasny.net"><span class="hidden-sm">More by</span> Jasny</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<!-- Page content of course! -->
|
||||
<main class="bs-masthead" id="content" role="main">
|
||||
<div class="container">
|
||||
<h1>Jasny Bootstrap</h1>
|
||||
<p class="lead">The missing components for your favorite front-end framework.</p>
|
||||
<p>
|
||||
<a href="{{ site.download.dist }}" class="btn btn-outline-inverse btn-lg" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}']);">Download</a>
|
||||
or <a href="{{ site.download.source }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }} source']);">Download source</a>
|
||||
<a href="https://github.com/jasny/bootstrap/releases/download/v4.0.0/jasny-bootstrap-4.0.0-dist.zip" class="btn btn-outline-inverse btn-lg" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 4.0.0']);">Download</a>
|
||||
or <a href="https://github.com/jasny/bootstrap/archive/v4.0.0.zip" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 4.0.0 source']);">Download source</a>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
<footer class="container" role="contentinfo">
|
||||
<!-- <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" alt="Arnold Daniels">
|
||||
<div class="aboutme-text">
|
||||
<span class="aboutme-title">Looking for a developer?</span>
|
||||
I'm available for freelance work, I want to hear about your projects.
|
||||
<span class="aboutme-name">- Arnold Daniels</span>
|
||||
</div>
|
||||
</a>
|
||||
</div> -->
|
||||
|
||||
|
||||
<div id="carbonads-container">
|
||||
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=jansy" id="_carbonads_js"></script>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bs-social">
|
||||
<ul class="bs-social-buttons">
|
||||
<li>
|
||||
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=jasny&repo=bootstrap&type=watch&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=jasny&repo=bootstrap&type=fork&count=true" width="102" height="20" title="Fork on GitHub"></iframe>
|
||||
</li>
|
||||
<li class="follow-btn">
|
||||
<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://jasny.github.io/bootstrap" data-count="horizontal" data-via="ArnoldDaniels">Tweet</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="FlattrButton" style="display:none;" rev="flattr;button:compact;" href="http://github.com/jasny/bootstrap">Flattr</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="bs-masthead-links">
|
||||
<li class="current-version">
|
||||
Currently v4.0.0
|
||||
</li>
|
||||
<li>
|
||||
<a href="3.2.0/">v3.2.0 docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="2.3.1/">v2.3.1 docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/jasny/bootstrap" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);">GitHub project</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="getting-started/#examples" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);">Examples</a>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
|
||||
<!-- JS and analytics only. -->
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://code.jquery.com/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/sticky-kit/1.1.3/sticky-kit.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
|
||||
<script src="dist/js/jasny-bootstrap.min.js"></script>
|
||||
|
||||
<script src="http://platform.twitter.com/widgets.js"></script>
|
||||
<script src="assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
// NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-nav.jade template.
|
||||
li
|
||||
a(href='#less') Less components
|
||||
li
|
||||
a(href='#plugins') jQuery plugins
|
||||
li
|
||||
a(href='#less-variables') Less variables
|
||||
ul.nav
|
||||
each section in sections
|
||||
if section.customizable
|
||||
li
|
||||
a(href='#'+section.id)= section.heading
|
||||
li
|
||||
a(href='#download') Download
|
||||
// NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-nav.jade template.
|
||||
@@ -1,21 +0,0 @@
|
||||
// NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-variables.jade template.
|
||||
each section in sections
|
||||
if section.customizable
|
||||
h2(id=section.id)= section.heading
|
||||
if section.docstring
|
||||
p!= section.docstring.html
|
||||
each subsection in section.subsections
|
||||
if subsection.heading
|
||||
h3(id=subsection.id)= subsection.heading
|
||||
div.row
|
||||
each variable in subsection.variables
|
||||
div.bs-customizer-input
|
||||
label(for="input-" + variable.name)= variable.name
|
||||
input.form-control(
|
||||
id="input-" + variable.name
|
||||
type="text"
|
||||
value=variable.defaultValue
|
||||
data-var=variable.name)
|
||||
if variable.docstring
|
||||
p.help-block!= variable.docstring.html
|
||||
// NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-variables.jade template.
|
||||
Reference in New Issue
Block a user