Bootstrap has become one of the most popular open source projects in the world. It is very convenient for creating Responsive Web Pages. Bootstrap automatically adapts your pages for various screen sizes.
In this help topic, we will show you how to use the Bootstrap and its Responsive Features with jQWidgets.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Template</title>
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.css" rel="stylesheet">
<!-- jQWidgets CSS -->
<link href="jqwidgets/styles/jqx.base.css" rel="stylesheet">
<link href="jqwidgets/styles/jqx.bootstrap.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<!-- jQWidgets core JavaScript -->
<script src="jqwidgets/jqxcore.js"></script>
<!-- ================================================== -->
<!-- Add addition JavaScript files here -->
<script type="text/javascript">
$(document).ready(function () {
// your JavaScript code here.
});
</script>
</body>
</html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall we don't recommend this on every site, so use caution!
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.
<img src="..." class="img-responsive" alt="Responsive image">
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:
.container for proper alignment and padding..row and .col-xs-4 are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.padding. That padding is offset in rows for the first and last column via negative margin on .rows..col-xs-4.Look to the examples for applying these principles to your code.
Folks looking to create fully fluid layouts (meaning your site stretches the entire width of the viewport) must wrap their grid content in a containing element with padding: 0 15px; to offset the margin: 0 -15px; used on .rows.