Introduction to Jasny Bootstrap
Jasny Bootstrap is a set of extensions and enhancements to the popular Bootstrap framework, designed to improve user experience and streamline web development. It offers a range of additional components and utilities that can be easily integrated into your existing Bootstrap projects.
API Examples
Off-Canvas Navigation
The off-canvas navigation is a flexible sidebar menu that can be toggled on and off-screen.
<div class="navmenu navmenu-default navmenu-fixed-left">
<a class="navmenu-brand" href="#">Brand</a>
<ul class="nav navmenu-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
File Input
Enhanced file input for Bootstrap, featuring file preview and multiple selection.
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
<img src="http://placehold.it/200x150" alt="Sample Image">
</div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
<div>
<span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span>
<input type="hidden"><input type="file" name="..."></span>
<a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
Input Mask
Input masks make it easier to enter data correctly in fields such as dates, phone numbers, or serial codes.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Masked Input Example</h2>
<div class="form-group">
<label for="phone">Phone Number:</label>
<input type="text" class="form-control" id="phone" data-mask="(999) 999-9999">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>
</body>
</html>
App Example
Here is a simple application example utilizing the APIs mentioned above.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
</head>
<body>
<div class="navmenu navmenu-default navmenu-fixed-left">
<a class="navmenu-brand" href="#">My App</a>
<ul class="nav navmenu-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
<div class="container">
<h1>My App with Jasny Bootstrap</h1>
<h2>Upload a File</h2>
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
<img src="http://placehold.it/200x150" alt="..."/>
</div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
<div>
<span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span>
<input type="hidden"><input type="file" name="..."/></span>
<a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
<h2>Enter Your Phone Number</h2>
<div class="form-group">
<label for="phone">Phone Number:</label>
<input type="text" class="form-control" id="phone" data-mask="(999) 999-9999"/>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>
</body>
</html>
Hash: 1ff159e53e11c1e7d0af7bfb3db9a549ac8fa1cdce20d6217afb2754e3938006
