Introduction to Jasny Bootstrap
Jasny Bootstrap is an extension of the popular Bootstrap framework, offering additional features and components that enhance the original Bootstrap’s capabilities. With Jasny Bootstrap, developers can leverage dozens of APIs to create more dynamic and flexible web applications.
Jasny Bootstrap Key Features and APIs
Below are some essential APIs provided by Jasny Bootstrap, accompanied by code snippets to illustrate their usage:
1. Off-Canvas Navigation
Off-canvas navigation is useful for creating hidden side menus that can be toggled on small screens. Here’s how to implement it:
<div class="navmenu navmenu-default navmenu-fixed-left">
<a class="navmenu-brand visible-md visible-lg" href="#">Brand</a>
<ul class="nav navmenu-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
2. Input Masks
Input masks allow for better control over user input, providing validation and formatting out of the box. Here’s an example:
<form>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="text" id="phone" class="form-control" data-inputmask="'mask': '(999) 999-9999'" />
</div>
</form>
3. File Upload
Jasny Bootstrap offers a straightforward API for file uploads. Here’s how:
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; 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="file" name="...">
</span>
<a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
4. App Example Using Jasny Bootstrap
Here’s a simple app incorporating some of the APIs discussed:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jasny Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="path-to-jasny-bootstrap.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navmenu navmenu-default navmenu-fixed-left">
<a class="navmenu-brand visible-md visible-lg" href="#">Brand</a>
<ul class="nav navmenu-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="container">
<h2>Form with Input Mask</h2>
<form>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="text" id="phone" class="form-control" data-inputmask="'mask': '(999) 999-9999'" />
</div>
</form>
<h2>File Upload</h2>
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; 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="file" name="...">
</span>
<a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="path-to-jasny-bootstrap.js"></script>
</body>
</html>
By using these APIs, you can significantly enhance the user experience and functionality of your web applications.
Hash: 1ff159e53e11c1e7d0af7bfb3db9a549ac8fa1cdce20d6217afb2754e3938006
